アプレットの複数列選択器(ダイナミックデータ、サポート2、3、4、5…列)
コードは二つの部分に分けて、先にwxmlを入れます.
他のパラメータについては、まずレンゲと結合された二次元データであり、文字列だけで構成される二次元配列
二つ目はvalueです.これは対応項目のいくつか目だと思っていましたが、aはcに対応すれば、bはdに対応すると思います.bdを選択すると[1,1]になりますが、実は[1,0]です.つまり、対応ページに表示されているいくつかの対応(bd、ページ上の第一列にはabの二つのオプションがあり、第二列には一つのdしかありません.)
他のbindchangeバインディングの方法は確認ボタンをクリックしてトリガします.bindcolumnchangeバインディングの方法は複数の列のセレクタをスライドさせる時に触発されます.bindcancelバインディングの感覚は笑い話です.データはリアルタイムに変更されます.キャンセルはもう一つの中間値をバインドしてからこの効果を達成できます.ここではしばらくやっていません.
jsの部分は5つのデータを使いました. object MultiShow:[] ID付きObjectオブジェクト配列を選択します. object MultiAray:[] バックグラウンドID,parentIdオブジェクト配列 multiAray:[] マイクロクレジットウィジェットコンポーネントに必要な文字列二次元配列 multi Index:[] マイクロクレジットウィジェットコンポーネントの必要な選択対象配列 checke Index:[] bindcancelによる中間値(しばらくはしていません) 本当の複数列の効果を達成するために、私は肉体を売ることをいとわないで、バックグランドの兄と達成した各種の屈辱的な合意、欲しいデータのフォーマットの第1列の行列を獲得してparentIdを持たないで、parentがないためです.2列目のparentIdは1列目のID、3列目のparentIdは2列目のIDに対応していますが、まだたくさんあれば順次類推できます.そして必要に応じて、必要な他のデータを順次取得し、データ初期化を完了する.
そして、複数の列の選択器をスライドさせる時に、次の列のデータを動的に更新します.ここでの処理は次の列のデータを更新して、デフォルトで最初のオプションを選択します.
詳細な注釈を書き終わったら、より多くのコードを配置しています.具体的な機能コードはむしろ少ないです.
個人の感覚では、プログラムはコードを書くのではなく、構成オプションで作られたものです.
Page({
/**
*
*/
data: {
objectMultiShow: [],
objectMultiArray: [],
multiArray: [],
multiIndex: [],
checkeIndex: []
},
/**
* --
* objectMultiShow-- json （ id，parentId，name）
* multiArray--
*/
onLoad: function (options) {
//
let data = {
objectMultiShow: this.data.objectMultiShow,
objectMultiArray: this.data.objectMultiArray,
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex,
checkeIndex: this.data.checkeIndex
}
data.objectMultiArray = [
[{ id: 0, name: ' ' }, { id: 1, name: ' ' }],
[
{ id: 0, name: ' ', parentId: 0 }, { id: 1, name: ' ', parentId: 0 }, { id: 2, name: ' ', parentId: 0 }, { id: 3, name: ' ', parentId: 0 }, { id: 4, name: ' ', parentId: 0 },
{ id: 5, name: ' ', parentId: 1 }, { id: 6, name: ' ', parentId: 1 }, { id: 7, name: ' ', parentId: 1 }
],
[
{ id: 0, name: ' ', parentId: 0 }, { id: 1, name: ' ', parentId: 0 },
{ id: 2, name: ' ', parentId: 1 },
{ id: 3, name: ' ', parentId: 2 }, { id: 4, name: ' ', parentId: 2 },
{ id: 5, name: ' ', parentId: 3 }, { id: 6, name: ' ', parentId: 3 }, { id: 7, name: ' ', parentId: 3 },
{ id: 8, name: ' ', parentId: 4 }, { id: 9, name: ' ', parentId: 4 }, { id: 10, name: ' ', parentId: 4 }, { id: 11, name: ' ', parentId: 4 },
{ id: 3, name: ' ', parentId: 5 }, { id: 4, name: ' ', parentId: 5 },
{ id: 3, name: ' ', parentId: 6 }, { id: 4, name: ' ', parentId: 6 },
{ id: 3, name: ' ', parentId: 7 }, { id: 4, name: ' ', parentId: 7 }, { id: 4, name: ' ', parentId: 7 },
]
]
data.objectMultiShow = data.objectMultiArray.map((item, index) => {
if (index > 0) {
item = item.filter(i => i.parentId === data.objectMultiArray[index - 1][0].id)
}
return item
})
data.multiArray = data.objectMultiShow.map(item => {
item = item.map(i => i.name)
return item
})
console.log(data.multiIndex)
//
this.setData(data)
},
bindMultiPickerChange: function (e) {
console.log('picker ， ', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
},
bindMultiPickerColumnChange: function (e) {
console.log(' ', e.detail.column, '， ', e.detail.value);
//
var data = {
objectMultiShow: this.data.objectMultiShow,
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
// i ， 0 （ ）
data.multiIndex[e.detail.column] = e.detail.value;
for (let i = e.detail.column; i < data.multiIndex.length - 1; i++) {
data.multiIndex[i + 1] = 0
}
/**
* i ，
* ：for switch，switch ，for switch ，
* swich ： ， filter （parentId = id），
* ， filter （parentId = id）
*/
let arry = this.data.objectMultiArray
for (let i = e.detail.column; i < data.multiIndex.length - 1; i++) {
data.objectMultiShow[i + 1] = arry[i + 1].filter(item => item.parentId === data.objectMultiShow[i][data.multiIndex[i]].id)
data.multiArray[i + 1] = data.objectMultiShow[i + 1].map(item => item.name)
}
/*switch (e.detail.column) {
case 0:
data.objectMultiShow[1] = arry[1].filter(item => item.parentId === data.objectMultiShow[0][data.multiIndex[0]].id)
data.multiArray[1] = data.objectMultiShow[1].map(item => item.name)
data.objectMultiShow[2] = arry[2].filter(item => item.parentId === data.objectMultiShow[1][data.multiIndex[1]].id)
data.multiArray[2] = data.objectMultiShow[2].map(item => item.name)
break;
case 1:
data.objectMultiShow[2] = arry[2].filter(item => item.parentId === data.objectMultiShow[1][data.multiIndex[1]].id)
data.multiArray[2] = data.objectMultiShow[2].map(item => item.name)
}*/
//
this.setData(data);
}
})他のパラメータについては、まずレンゲと結合された二次元データであり、文字列だけで構成される二次元配列
， [["a","b"], ["c","d"]]であり、このようにすると、多列選択器は第一列a、bオプション、第二列c、dオプションである.とても美しいと思います.しかし、これは何をすることができますか?私達が作った複数の列の選択器はページだけの展示ではなく、バックグラウンドとデータをドッキングするには、このように文字列を送るのが適当ですか?私が必要なのは、idなどのオブジェクトを持っていますが、wxmlページでは、二重括弧バインディングデータにmapなどの関数を書くのはサポートされていません.だから、私達のバックグランドからのデータは改造して、その中のnameを取り出してバインディングデータです.二つ目はvalueです.これは対応項目のいくつか目だと思っていましたが、aはcに対応すれば、bはdに対応すると思います.bdを選択すると[1,1]になりますが、実は[1,0]です.つまり、対応ページに表示されているいくつかの対応(bd、ページ上の第一列にはabの二つのオプションがあり、第二列には一つのdしかありません.)
他のbindchangeバインディングの方法は確認ボタンをクリックしてトリガします.bindcolumnchangeバインディングの方法は複数の列のセレクタをスライドさせる時に触発されます.bindcancelバインディングの感覚は笑い話です.データはリアルタイムに変更されます.キャンセルはもう一つの中間値をバインドしてからこの効果を達成できます.ここではしばらくやっていません.
jsの部分は5つのデータを使いました.
そして、複数の列の選択器をスライドさせる時に、次の列のデータを動的に更新します.ここでの処理は次の列のデータを更新して、デフォルトで最初のオプションを選択します.
詳細な注釈を書き終わったら、より多くのコードを配置しています.具体的な機能コードはむしろ少ないです.
個人の感覚では、プログラムはコードを書くのではなく、構成オプションで作られたものです.