最近开发项目有个关于省市县联动的小功能,引用mui中的picker选择器,根据文档操作来并不难,关键问题在于setData()中传的json数据的问题,折磨了我好久…
一般来说,Mui的picker选择器中传的数据都是一个city.js文件,里面的数据是json格式,百度了好多关于picker选择器的用法,数据都是如出一辙的某个文件—“city.js”,如下图: 那么问题来了,这个文件的数据都是死数据啊,虽说中国行政区划基本不会有变,但如果应用在其他功能的三级联动中,数据不一定就是亘古不变的了。
因此公司要求这里的数据都必须从后台数据库的接口中传过来,接口大概传参和功能是下图这样子的:
传参一共是两个参数,level(省1市2县3,必需字段),parentcode(父级字段,非必填,level为1时不填),返回的结果是下图的格式:
[{iid: 1, code: "110000", parentcode: "", level: 1, name: "北京市", …},
{iid: 18, code: "120000", parentcode: "", level: 1, name: "天津市", …},
3: {iid: 215, code: "140000", parentcode: "", level: 1, name: "山西省", …}
4: {iid: 344, code: "150000", parentcode: "", level: 1, name: "内蒙古自治区", …}
5: {iid: 460, code: "210000", parentcode: "", level: 1, name: "辽宁省", …}
6: {iid: 575, code: "220000", parentcode: "", level: 1, name: "吉林省", …}
7: {iid: 645, code: "230000", parentcode: "", level: 1, name: "黑龙江省", …}
8: {iid: 780, code: "310000", parentcode: "", level: 1, name: "上海市", …}
9: {iid: 797, code: "320000", parentcode: "", level: 1, name: "江苏省", …}
10: {iid: 908, code: "330000", parentcode: "", level: 1, name: "浙江省", …}
11: {iid: 1009, code: "340000", parentcode: "", level: 1, name: "安徽省", …}
12: {iid: 1131, code: "350000", parentcode: "", level: 1, name: "福建省", …}
13: {iid: 1226, code: "360000", parentcode: "", level: 1, name: "江西省", …}
14: {iid: 1338, code: "370000", parentcode: "", level: 1, name: "山东省", …}
15: {iid: 1492, code: "410000", parentcode: "", level: 1, name: "河南省", …}
16: {iid: 1668, code: "420000", parentcode: "", level: 1, name: "湖北省", …}
17: {iid: 1785, code: "430000", parentcode: "", level: 1, name: "湖南省", …}
18: {iid: 1922, code: "440000", parentcode: "", level: 1, name: "广东省", …}
19: {iid: 2066, code: "450000", parentcode: "", level: 1, name: "广西壮族自治区", …}
20: {iid: 2192, code: "460000", parentcode: "", level: 1, name: "海南省", …}
21: {iid: 2220, code: "500000", parentcode: "", level: 1, name: "重庆市", …}
22: {iid: 2260, code: "510000", parentcode: "", level: 1, name: "四川省", …}
23: {iid: 2465, code: "520000", parentcode: "", level: 1, name: "贵州省", …}
24: {iid: 2563, code: "530000", parentcode: "", level: 1, name: "云南省", …}
25: {iid: 2709, code: "540000", parentcode: "", level: 1, name: "西藏自治区", …}
26: {iid: 2791, code: "610000", parentcode: "", level: 1, name: "陕西省", …}
27: {iid: 2909, code: "620000", parentcode: "", level: 1, name: "甘肃省", …}
28: {iid: 3010, code: "630000", parentcode: "", level: 1, name: "青海省", …}
29: {iid: 3063, code: "640000", parentcode: "", level: 1, name: "宁夏回族自治区", …}
30: {iid: 3091, code: "650000", parentcode: "", level: 1, name: "新疆维吾尔自治区", …}
31: {iid: 3211, code: "710000", parentcode: "", level: 1, name: "台湾省", …}
32: {iid: 3212, code: "810000", parentcode: "", level: 1, name: "香港特别行政区", …}
33: {iid: 3213, code: "820000", parentcode: "", level: 1, name: "澳门特别行政区", …}]
但是在Mui的picker选择器中,setData所需要的值是如第一张图的json代码,text、value、children字段都是不能变的,因此这里需要将自己从接口中获取的数据转化成picker能用的数据。
以上赘述了这么多,是时候放出自己的代码了,琢磨了老半天,可能还有更好更快更方便的方法,还请各位多多指教,如下:
//先获取一级数据(34个省、直辖市)
$.function({
var code = "";
var parentcode = '';
var listArray = [];
$.ajax({
url: 'http://103.66.33.30/if/area/code.do',
data: {
parentcode: '',
level: 1
},
async: false,
type: "POST",
dataType: "json", //数据类型为json
success: function (data) {
console.dir(data);
for (var i = 0; i < data.length; i++) {
var fenl = {} //定义一个空对象,作为每个一级数据对象
fenl.text = data[i].name//text: "北京市"
fenl.value = data[i].code//value: "110000",
listArray.push(fenl)
//这里的listArray是所有一级对象所组成的数组集合
var parentcode = listArray[i].value//把一级数据的value值作为二级数据请求的入参
//开始请求二级数据
$.ajax({
url: 'http://103.66.33.30/if/area/code.do',
data: {
parentcode: parentcode,
level: 2
},
async: false,
type: "POST",
dataType: "json", //数据类型为json
success: function (data) {
// console.log(data);
listArray2 = [];
//这里很关键,每次请求下一个一级数据的子数据前,都要把上一个一级数据的子数据清空,要不然每个省都会拥有全国所有的市
for (var j = 0; j < data.length; j++) {
var fen2 = {} //定义一个空对象,作为每个二级数据对象
fen2.text = data[j].name
fen2.value = data[j].code
// console.log(fenl)
listArray2.push(fen2)
//这里的listArray是所有一级对象所组成的数组集合
}
}
})
//最后将每个子数据对象所组成的数组集合插入到其对应的父级的children值中
listArray[i].children = listArray2
}
//这里的listArray就是我们所需要的的json格式对象啦,功能和city.js文件一样!
console.log(listArray)
}
})
//所属行政区
shxzqPicker.setData(listArray);
..........
..........
})
最终,完美解决了city.js文件中死数据的问题…我简直是个天才