微信小程序多级联动实现
本节将继续讲述小程序picker控件的使用，上篇讲述的是单级下拉列表，本次讲述的是多级下拉列表
小程序实现联动下拉列表，为实现联动润滑的效果，需要将联动用到的所有数据请求到，然后再逻辑处理这些数据，避免选中上一级，下一级结果出现迟缓卡顿的现象
第一步，小程序端向后端php请求所有用到的区划数据
onload:function(){
var url = app.globalData.domain + 'survey_server/api.php?action=getGroup&system_id=' + this.data.storageData.system_id;
var that=this;
wx.request({
url: url,
data: {
group_id: this.data.storageData.system_id,
},
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
that.setData({ groupInfo: res.data.groupInfo});
}
})}后端php 为小程序提供数据
public function getGroup($group_id,$name,$idno,$isExist){
$db=$this->db;
$prefix=$this->prefix;
$len=strlen($group_id);
$sql="select group_id,group_name from ". $prefix."_group where group_fatherid='$group_id' and group_operate!='d' ";
$groupInfo=$db->getAll($sql);//区{镇}
foreach ($groupInfo as $key => &$value) {
$childGroupId=$value['group_id'];
if(strlen($childGroupId==12)){
continue;
}
$childGroupInfo=$this->getGroupInfo($childGroupId);//镇{社区}
$value['child']= $childGroupInfo;
if($len==4){
foreach ($value['child'] as $key1 => &$value1) {
$childGroupId2=$value1['group_id'];
$childGroupInfo2=$this->getGroupInfo($childGroupId2);//社区{}
$value1['child']= $childGroupInfo2;
}
}
}
$arr['groupInfo']=$groupInfo;
$arr=$this->ConvertToUtf8($arr);
return $arr;
}
private function getGroupInfo($group_id){
$db=$this->db;
$prefix=$this->prefix;
if(strlen($group_id==12)){
return false;
}
$sql="select group_id,group_name from ". $prefix."_group where group_fatherid='$group_id' and group_operate!='d' ";
$groupInfo=$db->getAll($sql);
return $groupInfo;
}第二步，小程序端html页面
{{mutiGroupArray[0][mutiIndexArray[0]]}}{{mutiGroupArray[1][mutiIndexArray[1]]}}{{mutiGroupArray[2][mutiIndexArray[2]]}}
第三步 就是js端的逻辑处理
【1】初始数据生成
data: {
mutiGroupArray:[],
mutiIndexArray:[],
firstIndex:0,
},
onload:function(){
//为联动组件picker初始化数据
var mutiGroupArray=[];
var firstArr=[]; //收集第一列的容器
var secondArr = []; //收集第二列的容器
var thirdArr = []; //收集第三列的容器
var mutiIndexArray = that.data.storageData.mutiIndexArray;
console.log(mutiIndexArray);
for (var i = 0; i < res.data.groupInfo.length;i++){ //遍历最外层的区划集合，收集第一列
firstArr.push(res.data.groupInfo[i].group_name);
if (res.data.groupInfo[mutiIndexArray[0]].child && i == mutiIndexArray[0]){ //判断第一列是否有子集，如果有，则将遍历第一列第一个项的子集集合，生成第二列
var child1 = res.data.groupInfo[mutiIndexArray[0]].child;
for (var m = 0; m < child1.length;m++){
secondArr.push(child1[m].group_name);
if (child1[mutiIndexArray[1]].child && m == mutiIndexArray[1]){ //判断第二列的有没有子集，若果有，同样的，遍历第二列第一个项下的子集，生成第三列集合
var child2 = child1[mutiIndexArray[1]].child;
for(var n=0;n【2】picker值改变赋值
bindMultiPickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value);
//生成改变以后的所在社区
var valArr = e.detail.value;
var groupIdArr=[];
var groupInfo=this.data.groupInfo;
if (groupInfo[valArr[0]].child[valArr[1]].child){
var selectedgroupid = groupInfo[valArr[0]].child[valArr[1]].child[valArr[2]].group_id;
}else{
var selectedgroupid = groupInfo[valArr[0]].child[valArr[1]].group_id;
}
this.setData({
mutiIndexArray: e.detail.value,
selectedgroupid: selectedgroupid,
})
},【3】picker列的改变，加载下级数据
bindMultiPickerColumnChange: function (e) {
// console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
var mutiGroupArray = this.data.mutiGroupArray;
var mutiIndexArray = this.data.mutiIndexArray;
var mutiSize = mutiIndexArray.length;
var column = e.detail.column;
var groupInfo = this.data.groupInfo;
var firstIndex=0; //表示第一列选的是哪个值，默认是0，就是第一个区
switch (column){
case 0: //以西咸新区市级为例，改变第一列的值，那将重新生成第二列（街道）和第三列（村）
firstIndex = e.detail.value;
this.data.storageData['firstIndex'] = firstIndex
this.setData({ firstIndex: firstIndex, storageData: this.data.storageData});
var mutiGroup1=[];//镇集合
//groupInfo[e.detail.value] 表示第一列选择的是哪一个区，那么意味着接下来生成这个区的镇和村，生成镇就要遍历groupInfo[e.detail.value].child（镇集合列表），生成村只需要生成第一个镇下面的村就可以了即就是遍历groupInfo[e.detail.value].child[0].child(第一个镇下的村的集合列表)
for (var key1 in groupInfo[e.detail.value].child){
mutiGroup1.push(groupInfo[e.detail.value].child[key1].group_name);
if (key1 == 0 && groupInfo[e.detail.value].child[0].child){
var child1 = groupInfo[e.detail.value].child[0].child;
var mutiGroup2=[];//村集合
for (var key2 in child1){
mutiGroup2.push(child1[key2].group_name);
}
mutiGroupArray[2] = mutiGroup2;
}
}
mutiGroupArray[1] = mutiGroup1 ;
break;
case 1: //若改变第二列（镇）的值，那将重新生成第三列（村）的值就可以了
//groupInfo[firstIndex].child[e.detail.value].child 第二列选择以后的下级集合（村集合）
var mutiGroup2=[];
var child = groupInfo[this.data.firstIndex].child[e.detail.value].child;
if (child){
for (var key in child) {
mutiGroup2.push(child[key].group_name);
}
mutiGroupArray[2] = mutiGroup2;
}
break;
}
this.setData({ mutiGroupArray: mutiGroupArray})
},