小程序多列对象选择器处理

作者:dante_wd 发布时间:2019-07-12 08:52:24

先看下效果图:

image.png


数据格式有如:

image.png




image.png


选择器页面代码:(range-key一定要有)


<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" range-key='OrgName'>

<view class="picker">

{{multiArray[0][multiIndex[0]].OrgName}}{{multiArray[1][multiIndex[1]].OrgName}}

</view>

</picker>


JS数据:

multiArray: [

[],

[]

],

multiIndex: [0, 0],



函数:获取数据列表,并在头部添加一个全部元素,默认取接口全部数据

image.png

getorglistcallbackFun: function(data) {

var city = [];

data.unshift({

'RegionName': '全部',

'ol': [{

'OrgID': '',

'OrgName': '全部'

}]

});

console.log(data);

for (let i in data) {

city.push({

OrgName: data[i].RegionName

})

}

var multiArray = this.data.multiArray;

multiArray[0] = city;

multiArray[1] = this.getstore(this.data.multiIndex[1], data);

this.setData({

data: data,

multiArray: multiArray

})

console.log(multiArray);

},


一个点击确认事件处理,获取数据。一个选择器变动,联动数据处理。这块基于第一列的变动,取对应索引下的二级数据。执行getstore,通过索引值在大数据里去找去拼装

image.png


获取二级数据处理:

image.png



bindMultiPickerChange: function(e) {

console.log(e.detail.value);

this.setData({

multiIndex: e.detail.value,

})

console.log('获取接口数据。');

},

bindMultiPickerColumnChange: function(e) {

let that = this

var data = {

multiArray: this.data.multiArray,

multiIndex: this.data.multiIndex

};

data.multiIndex[e.detail.column] = e.detail.value;

switch (e.detail.column) {

case 0:

//第一列改变  设置第二列数据

let arr = that.getstore(this.data.multiIndex[0], this.data.data)

data.multiArray[1] = arr

that.setData({

multiArray: data.multiArray

})

break;

case 1:

//第二列改变  

// console.log(data.multiArray[1][e.detail.value].OrgID)

break;

}

},


/***根据第一列数据的编码去匹配对应的第二列数据**/

getstore: function(index, data) {

var ol = data[index].ol;

var r = [];

for (let i in ol) {

let arr = {

'OrgID': ol[i].OrgID,

'OrgName': ol[i].OrgName

}

r.push(arr);

}

return r;

},


关于我 |  合作伙伴 |  用户注册 |  帮助中心 |  版权声明