树形结构以地区为例，省市区三级联动。这里为什么不用现成的组建呢，因为客户的业务范围比较小（黑人脸）。
我这里写成了一个组件。
wxml：
<view class="section">
<picker mode="multiSelector" bindchange="PickerChange" bindcolumnchange="ColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<input class='well-text' type='text' placeholder='点击选择地区' value='{{region}}' disabled='true'></input>
</picker>
</view>
wxss：
.well-text{
height: 60rpx;
border-bottom: 1px solid #d7dce0;
box-sizing: border-box;
}
js：
// pages/template/region.js
var appInstance = getApp();
//获取客户地区
var GetKHDQ = function (that) {
appInstance.post(
"SYS_DOOPENDATA", [{
"TYPE": "OPEN",
"TABLENAME": "KHDQ",
"FIELDNAME": "KHDQ_DQID, KHDQ_DQMC, KHDQ_MJBZ, KHDQ_FDQID",
"WHERE": "",
"ORDER": "KHDQ_DQID"
}],
function (res) {
if (res.data[0].RESULT == 'Y') {
// console.log(res.data);
var AreaJson = [];
var tprovince = [];var tprovinceid = [];
var tcity = [];var tcityid = [];
var tarea = [];var tareaid = [];
for(var i = 1; i<res.data.length;i++){
AreaJson.push(res.data[i]);
if (res.data[i].KHDQ_FDQID == 0){
tprovince.push(res.data[i].KHDQ_DQMC.trim()); //获取省的名称
tprovinceid.push(res.data[i].KHDQ_DQID.trim()); //获取省的id
}
}
wx.setStorageSync('AreaJson', AreaJson); //将查询出来的数据放入缓存
that.setData({
province: tprovince,
provinceid: tprovinceid
});
GetCity(that,'');
return;
} else {
wx.showToast({
title: res.data[1].ERRINFO,
icon: 'none',
duration: 2000
});
return;
}
},
function (xhr, type, errorThrown) {
return;
},
);
}
//获取城市
var GetCity = function(that,provinceindex){
var AreaJson = wx.getStorageSync('AreaJson');
var tprovinceid = that.data.provinceid;
var provincefirstid = tprovinceid[0];
var tcity = [];var tcityid = [];
if (provinceindex){
for (var i = 0; i < AreaJson.length; i++) { //根据省的id获取地级市
if (AreaJson[i].KHDQ_FDQID == provinceindex) {
tcity.push(AreaJson[i].KHDQ_DQMC.trim());
tcityid.push(AreaJson[i].KHDQ_DQID.trim());
}
}
// console.log([that.data.multiIndex[0],0,0]);
that.setData({
city: tcity,
cityid: tcityid,
multiIndex: [that.data.multiIndex[0], 0, 0]
});
GetArea(that, '');
}else{
for (var i = 0; i < AreaJson.length; i++) {
if (AreaJson[i].KHDQ_FDQID == provincefirstid) {
tcity.push(AreaJson[i].KHDQ_DQMC.trim());
tcityid.push(AreaJson[i].KHDQ_DQID.trim());
}
}
that.setData({
city: tcity,
cityid: tcityid
});
GetArea(that, '');
}
}
//获取地区
var GetArea = function(that,cityindex){
var AreaJson = wx.getStorageSync('AreaJson');
var tcityid = that.data.cityid;
var cityfirstid = tcityid[0];
var tarea = []; var tareaid = [];
if (cityindex){
for (var i = 0; i < AreaJson.length; i++) { //根据地级市的id获取区
if (AreaJson[i].KHDQ_FDQID == cityindex) {
tarea.push(AreaJson[i].KHDQ_DQMC.trim());
tareaid.push(AreaJson[i].KHDQ_DQID.trim());
}
}
that.setData({
area: tarea,
areaid: tareaid,
multiIndex: [that.data.multiIndex[0], that.data.multiIndex[1], 0]
});
}else{
for (var i = 0; i < AreaJson.length; i++) {
if (AreaJson[i].KHDQ_FDQID == cityfirstid) {
tarea.push(AreaJson[i].KHDQ_DQMC.trim());
tareaid.push(AreaJson[i].KHDQ_DQID.trim());
}
}
that.setData({
area: tarea,
areaid: tareaid
});
}
SelectArea(that);
}
var SelectArea = function(that,areaindex){
var multiArrayTemp = [that.data.province, that.data.city, that.data.area];
var multiArrayid = [that.data.provinceid, that.data.cityid, that.data.areaid];
var khdqid = '';
var khdqmc = '';
var khdqmctemp = '';
for (var i = 0; i < multiArrayid.length; i++) {
if (multiArrayid[i][that.data.multiIndex[i]]) {
khdqid = multiArrayid[i][that.data.multiIndex[i]];
khdqmctemp = multiArrayTemp[i][that.data.multiIndex[i]];
khdqmc = khdqmc + khdqmctemp;
}
}
// console.log(khdqid);
that.setData({
khdqid: khdqid,
khdqmc: khdqmc,
multiArray: multiArrayTemp
})
// console.log(that.data.khdqid);
// that.triggerEvent('btnconfirm', { khdqid, khdqmc });//传值到主页面
// console.log(that.data.multiArray);
}
Component({
/*组件的生命周期*/
lifetimes: {
attached() {
var that = this;
GetKHDQ(that);
},
detached() {
// 在组件实例被从页面节点树移除时执行
},
},
// 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
attached() {
var that = this;
GetKHDQ(that);
},
detached() {
// 在组件实例被从页面节点树移除时执行
},
/**
* 组件的初始数据
*/
data: {
region:'',
tykhdqid:'',
province: [], provinceid: [], city: [], cityid: [], area: [], areaid: [],
multiArray: [],
multiIndex: [0, 0, 0],
},
/**
* 组件的方法列表
*/
methods: {
PickerChange: function (e) {
// console.log('picker发送选择改变，携带值为', e.detail.value)
var khdqid = this.data.khdqid;
var khdqmc = this.data.khdqmc;
this.setData({
region: this.data.khdqmc,
multiIndex: e.detail.value
});
this.triggerEvent('btnconfirm', { khdqid, khdqmc });//将地区id和地区名称传递到主页面
},
//多列选择器，某一列的值改变时触发事件
ColumnChange: function (e) {
// console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0:
var provinceindex = this.data.provinceid[this.data.multiIndex[0]];
GetCity(this, provinceindex);
break;
case 1:
var cityindex = this.data.cityid[this.data.multiIndex[1]];
GetArea(this, cityindex);
break;
case 2:
var areaindex = this.data.areaid[this.data.multiIndex[2]];
SelectArea(this,areaindex);
}
// console.log(this.data.multiArray);
},
}
})
json：
{
"usingComponents": {}
}
组件引用根据你的实际情况来。
组件调用方式文档里很详细。
