微信小程序，自定义三级picker选择器，从java后台远程获取数据源
文章目录
- 最终目的
- 基本原理
- 具体实现
- 小程序前端
- java后端
- 说明
最终目的
- 远程获取选项数据
- 实现正常picker功能
- 获得所选项对应id
基本原理
其实就仔细研读一下官方文档，搞懂它就好实现了。
虽然没有专门介绍多列选择器multiSelector ，但在官方示例代码中有示例。
主要要搞清楚每个属性的含义、multiArray、multiIndex。别把自己绕晕了~
具体实现
小程序前端
把示例代码中多列选择器部分摘出来，适当修改
picker.wxml
<view>
<view>多列选择器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" range-key='name'>
<view class="picker">
当前选择：{{multiArray[0][multiIndex[0]].name}}，{{multiArray[1][multiIndex[1]].name}}，{{multiArray[2][multiIndex[2]].name}}
</view>
</picker>
</view>
注：
- 由于我们需要id和显示的name对应起来，所以range="{{multiArray}}"中multiArray是object array。于是需要设置range-key
- 这里的value是指每一列所选项的下标index，不能和我们的id完全对应。
picker.js
Page({
data: {
//这个数组是picker每一列的数据,multiArray[[],[],[]]。例如，multiArray[0]就是第一列的数据
multiArray: [
[
{
"disease_id": 1,
"name": "内科"
},
{
"disease_id": 2,
"name": "外科"
},
{
"disease_id": 3,
"name": "儿科"
}
],
[
{
"disease_id": 6,
"name": "神经内科"
},
{
"disease_id": 7,
"name": "心血管内科"
},
{
"disease_id": 8,
"name": "呼吸内科"
},
{
"disease_id": 9,
"name": "消化内科"
},
{
"disease_id": 10,
"name": "血液内科"
}
],
[
{
"disease_id": 24,
"name": "脑血栓"
},
{
"disease_id": 25,
"name": "脑出血"
}
]
],
//数据源，这里是通过接口获取的。为方便测试，直接写在这里。实际过程中可以调接口，再setData
//注意格式，三级结构，这里id是disease_id。低一级放在高一级的nextList中，每一级的字段名是一样的（range-key设置为
//‘name’）。后台的数据返回必须是这种格式的。
objectArrayDiseaseData: [
{
"disease_id": 1, //第一级
"name": "内科",
"nextList": [
{
"disease_id": 6, //第二级
"name": "神经内科",
"nextList": [
{
"disease_id": 24, //第三级
"name": "脑血栓"
},
{
"disease_id": 25,
"name": "脑出血"
}
]
},
{
"disease_id": 7,
"name": "心血管内科",
"nextList": [
{
"disease_id": 26,
"name": "冠心病"
},
{
"disease_id": 27,
"name": "高血压"
},
{
"disease_id": 28,
"name": "心脏病"
}
]
},
{
"disease_id": 8,
"name": "呼吸内科",
"nextList": [
{
"disease_id": 29,
"name": "肺气肿"
},
{
"disease_id": 30,
"name": "哮喘"
},
{
"disease_id": 31,
"name": "肺结核"
}
]
},
{
"disease_id": 9,
"name": "消化内科",
"nextList": [
{
"disease_id": 32,
"name": "胃炎"
},
{
"disease_id": 33,
"name": "消化不良"
}
]
},
{
"disease_id": 10,
"name": "血液内科",
"nextList": [
{
"disease_id": 34,
"name": "白血病"
},
{
"disease_id": 35,
"name": "血友病"
},
{
"disease_id": 36,
"name": "白细胞减少症"
}
]
}
]
},
{
"disease_id": 2,
"name": "外科",
"nextList": [
{
"disease_id": 12,
"name": "神经外科",
"nextList": [
{
"disease_id": 37,
"name": "三叉神经痛"
},
{
"disease_id": 38,
"name": "脑积水"
}
]
},
{
"disease_id": 13,
"name": "心血管外科",
"nextList": [
{
"disease_id": 39,
"name": "心律失常"
},
{
"disease_id": 40,
"name": "心脏搭桥"
},
{
"disease_id": 41,
"name": "冠心病"
}
]
},
{
"disease_id": 14,
"name": "胸外科",
"nextList": [
{
"disease_id": 42,
"name": "肺癌"
},
{
"disease_id": 43,
"name": "食管疾病"
}
]
},
{
"disease_id": 15,
"name": "普通外科",
"nextList": [
{
"disease_id": 44,
"name": "胃溃疡"
},
{
"disease_id": 45,
"name": "发烧"
}
]
}
]
},
{
"disease_id": 3,
"name": "儿科",
"nextList": [
{
"disease_id": 18,
"name": "儿科综合",
"nextList": [
{
"disease_id": 46,
"name": "小儿哮喘"
},
{
"disease_id": 47,
"name": "多动症"
},
{
"disease_id": 48,
"name": "小儿厌食症"
}
]
},
{
"disease_id": 19,
"name": "小儿内科",
"nextList": [
{
"disease_id": 49,
"name": "自闭症"
},
{
"disease_id": 50,
"name": "小儿脑瘫"
}
]
},
{
"disease_id": 20,
"name": "小儿外科",
"nextList": [
{
"disease_id": 51,
"name": "小儿神经外科"
},
{
"disease_id": 52,
"name": "小儿普外科"
}
]
}
]
}
],
//这个数组是指每一列所选值的下标index。例如，multiIndex: [0, 0, 0]是指第一列选第一个，第二列选第一个，第三列选第一个
multiIndex: [0, 0, 0]
},
//这个事件并没有什么用，因为这里的value并不是我们想要的id。而且我们想要改变选项即改变所选id。
bindMultiPickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
},
//这个是主要的，改变选项即会触发
bindMultiPickerColumnChange: function (e) {
console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
var multiArray = this.data.multiArray;
var multiIndex = this.data.multiIndex;
multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0: //改变第一列
console.log(multiIndex);
multiIndex[1] = 0; //将二、三列的index设为0，即第一个值
multiIndex[2] = 0;
//设置二、三列的列表
multiArray[1] = this.data.objectArrayDiseaseData[multiIndex[0]].nextList;
multiArray[2] = this.data.objectArrayDiseaseData[multiIndex[0]].nextList[0].nextList;
console.log(multiIndex);
break;
case 1: //改变第二列
console.log(multiIndex);
multiIndex[2] = 0;
//设置第三列列表
multiArray[2] = this.data.objectArrayDiseaseData[multiIndex[0]].nextList[multiIndex[1]].nextList;
console.log(multiIndex);
break;
}
this.setData({ //将设置好的列表和选项index赋值
multiArray: multiArray,
multiIndex: multiIndex,
//disease_id: this.data.objectArrayDiseaseData[multiIndex[0]].nextList[multiIndex[1]].nextList[multiIndex[2]].disease_id
});
//这里可以获取到最后一列选项对应的disease_id
console.log(this.data.objectArrayDiseaseData[multiIndex[0]].nextList[multiIndex[1]].nextList[multiIndex[2]].disease_id)
}
})
最终版代码片段
java后端
数据库
实体类DiseaseConstant的子类DiseaseConstantCustom
package com.test.platform.entity;
import com.test.platform.entity.base.DiseaseConstant;
import java.util.List;
public class DiseaseConstantCustom extends DiseaseConstant {
public List<DiseaseConstantCustom> nextList;
public List<DiseaseConstantCustom> getNextList() {
return nextList;
}
public void setNextList(List<DiseaseConstantCustom> nextList) {
this.nextList = nextList;
}
}
service.impl
@Override
public Map<String, Object> getDiseaseConstant() {
Map<String, Object> responseData = new HashMap<>();
//获取第一级
List<DiseaseConstantCustom> diseaseConstantList = testMapper.getDisease(1,null);
for (int i = 0; i < diseaseConstantList.size(); i++) {
//获取第二级
List<DiseaseConstantCustom> list = testMapper.getDisease(2,diseaseConstantList.get(i).getDisease_id());
for (int j = 0; j < list.size(); j++) {
//获取第三级
list.get(j).setNextList(testMapper.getDisease(3,list.get(j).getDisease_id()));
}
diseaseConstantList.get(i).setNextList(list);
}
responseData.put("list",diseaseConstantList);
return ResponseData.success(responseData);
}
mapper.java
public interface TestMapper {
List<DiseaseConstantCustom> getDisease(@Param("rank")Integer rank,@Param("belong_id") Integer belong_id);
}
mapper.xml
<select id="getDisease" resultType="com.test.platform.entity.DiseaseConstantCustom">
select disease_id,name from disease_constant
where `rank` =#{rank}
<if test="belong_id != null">
and belong_id =#{belong_id}
if>
select>
说明
在小程序开发工具的模拟器里滚动选择会出现bug。
如：在官方示例下，选择脊柱动物→爬行动物→龟→无脊柱动物。发现没问题，那就再来一遍~发现第三列定位在吸血虫，显示的是猪肉绦虫（实际也是猪肉绦虫）。
但是问题不大，在手机上测试没有发现问题。