小程序picker---级联效果(三级)

一、WXML

< picker bindchange = "bindPickerChange1" value = "{{departIndex}}" range = "{{departArray}}">
< view class = "list clear">
< view class = 'left'> {{departName}} view >
< view class = 'right'>
< image mode = "widthFix" src = "/resources/images/task/23.png"> image >
view >
view >
picker >
< picker bindchange = "bindPickerChange2" value = "{{areaIndex}}" range = "{{areaArray}}">
< view class = "list clear">
< view class = 'left'> {{areaName}} view >
< view class = 'right'>
< image mode = "widthFix" src = "/resources/images/task/23.png"> image >
view >
view >
picker >
< picker bindchange = "bindPickerChange3" value = "{{unitIndex}}" range = "{{unitArray}}">
< view class = "list clear">
< view class = 'left'> {{unitName}} view >
< view class = 'right'>
< image mode = "widthFix" src = "/resources/images/task/23.png"> image >
view >
view >
picker >

二、WXSS

.list {
width: 100% ;
margin: 30 rpx auto ;
box-sizing: border-box ;
padding: 0px 3% ;
}
.list .left {
width: 88% ;
background-color: #fff ;
height: 80 rpx ;
line-height: 80 rpx ;
padding-left: 18 rpx ;
box-sizing: border-box ;
border-top-left-radius: 20 rpx ;
border-bottom-left-radius: 20 rpx ;
color: #666666 ;
}
.list .right {
width: 12% ;
background-color: #EAEBF1 ;
height: 80 rpx ;
line-height: 90 rpx ;
text-align: center ;
box-sizing: border-box ;
border-top-right-radius: 20 rpx ;
border-bottom-right-radius: 20 rpx ;
}
.list .right image {
width: 30 rpx ;
height: 30 rpx ;
}

三、JS

var app = getApp();
var https = 'https://xrun-5s.com/ashx/ApiService_wqq.ashx' ;
var departmentData = [ "请选择部门" ]; //部门名称
var departmentDatas = [{ ID: 0 , title: '请选择' }]; //部门名称加id
var areaData = [ "请选择区域" ];
var areaDatas = [{ ID: 0 , title: '请选择' }];
var unitData = [ "请选择单元" ];
var unitDatas = [{ ID: 0 , title: '请选择' }];
var staffData = [ "请点击选择" ];
var staffDatas = [{ ID: 0 , title: '请选择' }];
var deIndexStr = 0 ; //选中的部门id
var areaIndexStr = 0 ; //选中的区域id
var unitIndexStr = 0 ; //选中的单元id
var staffIndexStr = 0 ; //选中的巡检人id
var that1;
data: {
departArray: ["请选择部门"],
departIndex: 0 ,
departName: "请选择部门" ,
areaArray: [ "请选择区域" ],
areaIndex: 0 ,
areaName: "请选择区域" ,
unitArray: [ "请选择单元" ],
unitIndex: 0 ,
unitName: "请选择单元"
}
onLoad: function (options) {
departmentData = [ "请选择部门" ];
departmentDatas = [{ ID: 0 , title: '请选择' }];
staffData = [ "请点击选择" ];
staffDatas = [{ ID: 0 , title: '请选择' }];
var that = this ;
that1 = this ;
//加载部门
var param = {
action: "LoadDepartment" ,
CompanyID: wx.getStorageSync( 'CompanyID' )
};
wx.request({
method: 'GET' ,
dataType: "json" ,
header: {
'content-type' : 'application/json' // 默认值
},
data: param,
url: https,
success: function (res) {
if (res.data.Status > 0 ) {
var items = res.data.Data;
for ( var i = 0 ; i < items.length; i++) {
var obj = new Object();
obj = items[i].DepartmentName;
departmentData.push(obj);
var objs = new Object();
objs.ID = items[i].DepartmentID;
objs.title = items[i].DepartmentName;
departmentDatas.push(objs);
}
that.setData({
departArray: departmentData
});
}
}
});
}
bindPickerChange1: function (e) {
console.log( 'picker部门发送选择改变,携带值为' , e.detail.value)
this .setData({
departIndex: e.detail.value
})
this .setData({
departName: this .data.departArray[ this .data.departIndex]
})
for ( var i = 0 ; i < departmentDatas.length; i++) {
if (departmentData[e.detail.value] == departmentDatas[i].title) {
deIndexStr = departmentDatas[i].ID;
}
}
areaIndexStr = 0 ;
unitIndexStr= 0 ;
areaData = [ "请选择区域" ];
areaDatas = [{ ID: 0 , title: '请选择' }];
that1.setData({
areaArray: areaData,
areaName: "请选择区域" ,
areaIndex: 0 ,
unitArray: [ "请选择单元" ],
unitIndex: 0 ,
unitName: "请选择单元"
});
//加载区域
var param = {
action: "LoadArea" ,
CompanyID: wx.getStorageSync( 'CompanyID' ),
DepartmentID: deIndexStr
};
wx.request({
method: 'GET' ,
dataType: "json" ,
header: {
'content-type' : 'application/json' // 默认值
},
data: param,
url: https,
success: function (res) {
//console.log(res);
if (res.data.Status > 0 ) {
var items = res.data.Data;
for ( var i = 0 ; i < items.length; i++) {
var obj = new Object();
obj = items[i].AreaName;
areaData.push(obj);
var objs = new Object();
objs.ID = items[i].AreaID;
objs.title = items[i].AreaName;
areaDatas.push(objs);
}
that1.setData({
areaArray: areaData
});
}
}
})
},
bindPickerChange2: function (e) {
console.log( 'picker区域发送选择改变,携带值为' , e.detail.value)
this .setData({
areaIndex: e.detail.value
});
this .setData({
areaName: this .data.areaArray[ this .data.areaIndex]
});
for ( var i = 0 ; i < areaDatas.length; i++) {
if (areaData[e.detail.value] == areaDatas[i].title) {
areaIndexStr = areaDatas[i].ID;
}
}
unitIndexStr = 0 ;
unitData = [ "请选择单元" ];
unitDatas = [{ ID: 0 , title: '请选择' }];
that1.setData({
unitArray: unitData,
unitIndex: 0 ,
unitName: "请选择单元"
});
//加载单元
var param = {
action: "LoadUnit" ,
AreaID: areaIndexStr
};
wx.request({
method: 'GET' ,
dataType: "json" ,
header: {
'content-type' : 'application/json' // 默认值
},
data: param,
url: https,
success: function (res) {
//console.log(res);
if (res.data.Status > 0 ) {
var items = res.data.Data;
for ( var i = 0 ; i < items.length; i++) {
var obj = new Object();
obj = items[i].UnitName;
unitData.push(obj);
var objs = new Object();
objs.ID = items[i].UnitID;
objs.title = items[i].UnitName;
unitDatas.push(objs);
}
that1.setData({
unitArray: unitData
});
}
}
})
},
bindPickerChange3: function (e) {
console.log( 'picker单元发送选择改变,携带值为' , e.detail.value)
this .setData({
unitIndex: e.detail.value
})
this .setData({
unitName: this .data.unitArray[ this .data.unitIndex]
})
for ( var i = 0 ; i < unitDatas.length; i++) {
if (unitData[e.detail.value] == unitDatas[i].title) {
unitIndexStr = unitDatas[i].ID;
}
}
},
四、效果图
小程序picker---级联效果(三级)_第1张图片




你可能感兴趣的:(前端日常笔记)