idiot

小程序中的联动选单

2019-07-08

简单写了下,有很多不足,先记下来方便以后用。。暂时没时间整理,自己能看懂就行

例子中主要是选择地区有一个地区和小区的联动,选好地区及小区后刷新出下面的环卫工列表==具体可以看截图

样式就不贴了实际使用都会变的。。

HTML

1
2
3
4
5
6
7
<view class='row_area_wrap'>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" range="{{multiArray}}">
<view class='select' bindtap='stratSelect'>
{{selectText}}
</view>
</picker>
</view>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
remarks: '',
selectText: '选择地区:',
hwgSelectText: '选择处理人: ',
multiArray: [], //地区数据
objectMultiArray: null, //详细地区数据
itemMultiArray: [], //二级地区数据
objectItemMultiArray: null, //详细二级地区数据
recycleBinArray: [], //回收站数据
objectRecycleBinArray: null, //详细回收站数据
index: [0, 0], //选择索引
select1: null, //选择的第一项(区)
select2: null, //第二项(小区)
},

/**
* 获取最上级地区数据
*/
getTapData: function() {
const self = this
//模拟数据
var objectMultiArray = [{
id: 1,
name: '小区1'
},
{
id: 2,
name: '小区2'
},
{
id: 3,
name: '小区3'
},
{
id: 4,
name: '小区4'
}
]
var multiArray = []
var flag = []
for (var i in objectMultiArray) {
flag.push(objectMultiArray[i].name)
}
if (flag.length == 0) {
flag.push('无数据')
}
multiArray.push(flag)
multiArray.push(['--'])
self.setData({
multiArray: multiArray,
objectMultiArray: objectMultiArray
})

var objectItemMultiArray = self.data.objectItemMultiArray
if (objectItemMultiArray == null) {
self.getNextRegion(objectMultiArray[0].id)

}
},


/**
* 取出下一级地区并加入到选项
* parentId 父级id
*/
getNextRegion: function(parentId) {
const self = this

var flag = []
//这里本该用parentId获取二级地区数据,这里直接模拟==
var myData = [{
id: 1,
name: '二级小区1'
},
{
id: 2,
name: '二级小区2'
},
{
id: 3,
name: '二级小区3'
},
{
id: 4,
name: '二级小区4'
}
] //模拟数据
var multiArray = self.data.multiArray //取出原有数据准备进行操作
for (var i in myData) {
flag.push(myData[i].name)
}
if (flag.length == 0) {
flag.push('无数据')
}
multiArray[1] = flag //写入二级地区数据
self.setData({
multiArray: multiArray,
itemMultiArray: flag,
objectItemMultiArray: myData
})
},

/**
* 地区改变事件
*/
bindMultiPickerChange: function(e) {
var objectMultiArray = this.data.objectMultiArray
var objectItemMultiArray = this.data.objectItemMultiArray
var index = e.detail.value
var select1 = objectMultiArray[index[0]]
var select2 = objectItemMultiArray[index[1]]
if ((select1 != null && select1 != undefined) && (select2 != null && select2 != undefined)) {
this.data.select1 = select1
this.data.select2 = select2

} else {
wx.showToast({
title: '请选择完整地点',
icon: 'none',
duration: 2500
})
}
//处理bindMultiPickerColumnChange默认直接确认不刷新文本
if (objectItemMultiArray != null) {
if (objectItemMultiArray[index[1]] != undefined) {
this.setData({
selectText: '选择地区: ' + objectMultiArray[index[0]].name + '-' + objectItemMultiArray[index[1]].name
})
} else {
this.setData({
selectText: '选择地区: ' + objectMultiArray[index[0]].name + '-' + ''
})
}
}
},

/**
* 地区列表项改变时的联动
*/
bindMultiPickerColumnChange: function(e) {
//console.log('被修改的列:' + e.detail.column + '值为:' + e.detail.value)
//修改第一列,获取第二列数据
if (e.detail.column == 0) {
//先置空数据
this.setData({
itemMultiArray: [],
objectItemMultiArray: null
})
var currentData = this.data.objectMultiArray[e.detail.value] //获取当前选中的数据
this.getNextRegion(currentData.id)
this.data.index[0] = e.detail.value
}
this.data.index[1] = 0 //没有选择第二列时默认使用第一个
//修改第二列...
if (e.detail.column == 1) {
// var currentData = this.data.objectItemMultiArray[e.detail.value]//获取当前选中的数据
// this.getRecycleBin()
this.data.index[1] = e.detail.value
//console.log(this.data.select)
}
var objectMultiArray = this.data.objectMultiArray
var objectItemMultiArray = this.data.objectItemMultiArray
var index = this.data.index
if (objectItemMultiArray != null) {
if (objectItemMultiArray[index[1]] != undefined) {
this.setData({
selectText: '选择地区: ' + objectMultiArray[index[0]].name + '-' + objectItemMultiArray[index[1]].name
})
} else {
this.setData({
selectText: '选择地区: ' + objectMultiArray[index[0]].name + '-' + ''
})
}
}
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.getTapData()
},


/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
//还原部分数据
this.data.index = [0, 0]
this.data.select1 = null
this.data.select2 = null
this.data.hwg = [],
this.data.hwg_select = null
},

})

实现还是比较简单的,不过改变显示文本之类的细节确实要细心点来写,这个小例子可能存在很多不合理的地方,比较我是直接从自己实际需求里扣出来的==
还是把实际需求也放出来吧

app.myRequest()是仿照jquery的ajax格式简单写的一个小方法,就不贴了格式和ajax差不多,

实际需求中的HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<view class='myContainer'>
<view class='formbox'>

<view class='row_area_wrap'>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" range="{{multiArray}}">
<view class='select' bindtap='stratSelect'>
{{selectText}}
</view>
</picker>
</view>
<view class='mySeparate'></view>

<view class='row_area_wrap'>
<picker bindcolumnchange="" range="{{hwg}}" bindchange='hwgPickerChange' bindcolumnchange='pickerColumnChange'>
<view class='select' bindtap='clickHwgHander'>
{{hwgSelectText}}
</view>
</picker>
</view>

<view class='mySeparate'></view>

<view class='row_area_wrap'>
<view class='row_head'> 情况描述:</view>
<view class='row_body'>
<textarea type='text' placeholder='填写描述(可选)' bindinput='remarksChangeHander' style='height:500rpx;'></textarea>
</view>

</view>
</view>

<button type='primary' bindtap='submitHander' class='btn'>立刻上报</button>
</view>

实际需求中的JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
remarks: '',
selectText: '选择地区:',
hwgSelectText: '选择处理人: ',
multiArray: [], //地区数据
objectMultiArray: null, //详细地区数据
itemMultiArray: [], //二级地区数据
objectItemMultiArray: null, //详细二级地区数据
recycleBinArray: [], //回收站数据
objectRecycleBinArray: null, //详细回收站数据
index: [0, 0], //选择索引
select: null, //选择的第一项(区)
select1: null, //选择的第一项(区)
select2: null, //第二项(小区)
hwg: [], //环卫工列表
hwgObject: null, //环卫工详细
hwg_select: null //选择的环卫工
},


/**
* 备注文本改变
*/
remarksChangeHander: function(e) {
this.setData({
remarks: e.detail.value
})
},
/**
* 点击地区按钮开始选择(准备数据)
*/
stratSelect: function(e) {

},

/**
* 获取最上级地区数据
*/
getTapData: function() {
const _this = this

app.myRequest2(app.globalData.url + 'weixin/sysDeptXQ', {}, null, function(result) {
if (result.statusCode == 200) {
var multiArray = []
var flag = []
for (var i in result.data) {
flag.push(result.data[i].name)
}
if (flag.length == 0) {
flag.push('无数据')
}
multiArray.push(flag)
multiArray.push(['--'])
_this.setData({
multiArray: multiArray,
objectMultiArray: result.data
})
var objectItemMultiArray = _this.data.objectItemMultiArray
if (objectItemMultiArray == null) {
_this.getNextRegion(result.data[0].id)

}

} else {
wx.showModal({
title: '提示',
content: '获取数据失败,请重试',
confirmText: '重新连接',
success: function(res) {
if (res.confirm) {
_this.getTapData()
}
}
})
}
}, function(result) {
wx.showModal({
title: '提示',
content: '获取数据失败,请重试',
confirmText: '重新连接',
success: function(res) {
if (res.confirm) {
_this.getTapData()
}
}
})
})

},

/**
* 取出下一级地区并加入到选项
* parentId 父级id
*/
getNextRegion: function(parentId) {
const _this = this
app.myRequest2(app.globalData.url + 'weixin/fjId', {
id: parentId
}, null, function(result) {
if (result.statusCode == 200) {
//console.log(result.data)
var multiArray = _this.data.multiArray //取出原有数据准备进行操作
var flag = []
for (var i in result.data) {
flag.push(result.data[i].name)
}
if (flag.length == 0) {
flag.push('无数据')
}
multiArray[1] = flag //写入二级地区数据
_this.setData({
multiArray: multiArray,
itemMultiArray: flag,
objectItemMultiArray: result.data
})

} else {
wx.showModal({
title: '提示',
content: '获取数据失败,请重试',
confirmText: '重新连接',
success: function(res) {
if (res.confirm) {
_this.getNextRegion()
}
}
})
}
}, function(result) {
wx.showModal({
title: '提示',
content: '获取数据失败,请重试',
confirmText: '重新连接',
success: function(res) {
if (res.confirm) {
_this.getNextRegion()
}
}
})
})
},

/**
* 根据地区获取对应的环卫工
*/
getHwg: function(deptId) {
const _this = this
wx.showLoading({
title: '加载中',
mask: true
})
app.myRequest2(app.globalData.url + 'weixin/hwqyid', {
id: deptId
}, null, function(result) {
if (result.statusCode == 200) {
//console.log(result.data)
var data = result.data
if (data != null) {
var flag = []
for (var i in data) {
flag.push(data[i].name)
}
_this.setData({
hwgObject: data,
hwg: flag
})
wx.hideLoading()
}
} else {
wx.hideLoading()
wx.showModal({
title: '提示',
content: '获取数据失败,请重试',
confirmText: '重新连接',
success: function(res) {
if (res.confirm) {
_this.getRecycleBin()
}

}
})
}
}, function(result) {
wx.hideLoading()
wx.showModal({
title: '提示',
content: '获取数据失败,请重试',
confirmText: '重新连接',
success: function(res) {
if (res.confirm) {
_this.getRecycleBin()
}
}
})
})
},
/**
* 地区改变事件
*/
bindMultiPickerChange: function(e) {
var objectMultiArray = this.data.objectMultiArray
var objectItemMultiArray = this.data.objectItemMultiArray
var index = e.detail.value
var select1 = objectMultiArray[index[0]]
var select2 = objectItemMultiArray[index[1]]
if ((select1 != null && select1 != undefined) && (select2 != null && select2 != undefined)) {
this.data.select1 = select1
this.data.select2 = select2

//清空先前的选择
this.setData({
hwg_select: null,
hwg: [], //环卫工列表
hwgObject: null, //环卫工详细
hwgSelectText: '选择处理人:'
})
this.getHwg(select2.id)
} else {
wx.showToast({
title: '请选择完整地点',
icon: 'none',
duration: 2500
})
}
//处理bindMultiPickerColumnChange默认直接确认不刷新文本
if (objectItemMultiArray != null) {
if (objectItemMultiArray[index[1]] != undefined) {
this.setData({
selectText: '选择地区: ' + objectMultiArray[index[0]].name + '-' + objectItemMultiArray[index[1]].name
})
} else {
this.setData({
selectText: '选择地区: ' + objectMultiArray[index[0]].name + '-' + ''
})
}
}


},

/**
* 地区列表项改变时的联动
*/
bindMultiPickerColumnChange: function(e) {
//console.log('被修改的列:' + e.detail.column + '值为:' + e.detail.value)
//修改第一列,获取第二列数据
if (e.detail.column == 0) {
//先置空数据
this.setData({
itemMultiArray: [],
objectItemMultiArray: null
})
var currentData = this.data.objectMultiArray[e.detail.value] //获取当前选中的数据
this.getNextRegion(currentData.id)
this.data.index[0] = e.detail.value
}
this.data.index[1] = 0 //没有选择第二列时默认使用第一个
//修改第二列...
if (e.detail.column == 1) {
// var currentData = this.data.objectItemMultiArray[e.detail.value]//获取当前选中的数据
// this.getRecycleBin()
this.data.index[1] = e.detail.value
//console.log(this.data.select)
}
var objectMultiArray = this.data.objectMultiArray
var objectItemMultiArray = this.data.objectItemMultiArray
var index = this.data.index
if (objectItemMultiArray != null) {
if (objectItemMultiArray[index[1]] != undefined) {
this.setData({
selectText: '选择地区: ' + objectMultiArray[index[0]].name + '-' + objectItemMultiArray[index[1]].name
})
} else {
this.setData({
selectText: '选择地区: ' + objectMultiArray[index[0]].name + '-' + ''
})
}
}
},

/**
* 环卫工改变事件
*/
hwgPickerChange: function(e) {
var index = e.detail.value
var hwgObject = this.data.hwgObject
if ((hwgObject != null) && (hwgObject.length > 0)) {
this.data.hwg_select = hwgObject[index]
this.setData({
hwgSelectText: '选择处理人: ' + hwgObject[index].name
})
}
},
/**
* 点击选择环卫工事件(确认是否选择了前置的地点)
*/
clickHwgHander: function(e) {
var hwgObject = this.data.hwgObject
if (hwgObject == null) {
wx.showToast({
title: '请先选择地点后操作',
icon: 'none'
})
return false
}
},
submitHander: function(e) {
wx.showLoading({
title: '操作中'
})
var select1 = this.data.select1
var select2 = this.data.select2
if (select1 != null && select2 != null) {
var hwg = this.data.hwg_select
if (hwg != null && hwg != undefined) {
var remarks = this.data.remarks
//console.log(hwg)
app.myRequest2(app.globalData.url + 'weixin/hwtsxx', {
qyid: select2.id,
hwid: hwg.id,
tslr: remarks,
ydyid: app.globalData.userModel.id
}, null, function(result) {
if (result.statusCode == 200) {
wx.hideLoading()
if (result) {
wx.switchTab({
url: '../index/index'
})
wx.showToast({
title: '成功'
})
}
} else {
wx.hideLoading()
wx.showModal({
title: '提示',
content: '连接服务器出现问题,请重试',
showCancel: false
})
}
}, function(result) {
wx.hideLoading()
wx.showModal({
title: '提示',
content: '网络出现问题,请重试',
showCancel: false
})
})
} else {
wx.showToast({
title: '请选择处理人',
icon: 'none',
duration: 2500
})
}
} else {
wx.showToast({
title: '请先选择地点',
icon: 'none',
duration: 2500
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.getTapData()
//this.getNextRegion() //默认先选择第一条数据
},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function() {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
//还原部分数据
this.data.index = [0, 0]
this.data.select1 = null
this.data.select2 = null
this.data.hwg = [],
this.data.hwg_select = null
},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {

}
})

效果图:
demo

仅方便以后自己好抄