在项目中需要使用到省市区联动选择,联动插件使用的是MobileSelect,本来没啥问题,把数据往里一填完事。
后面发现,省市区的数据居然很老,于是在github上,想找到更新的数据,于是找到了:
https://xiangyuecn.github.io/AreaCity-JsSpider-StatsGov/
但比较遗憾的是,它生成的数据,要么是使用区号作为key,要么只是一个数组,而不是一个树型结构,因此无法在MobileSelect直接使用。见下图:
然后萌发了通过它的源数据,即上图左上角的数据,进行直接转换为树形数据的想法,说干就干,然后就有了下面这段代码:
扁平数组转树形结构
var array=[
{"name":"一级","id":1,"pid":0},
{"name":"一级子级1","id":11,"pid":1},
{"name":"一级子级2","id":12,"pid":1},
{"name":"二级","id":2,"pid":0},
{"name":"二级子级1","id":21,"pid":2},
{"name":"二级子级2","id":22,"pid":2},
{"name":"三级","id":3,"pid":0},
{"name":"三级子级1","id":31,"pid":3}];
function arrayToTree(array) {
var map = {}; //存着每一个层级的引用,以id为key,方便查找
var result = [];
for(var i = 0; i < array.length; i++) {
var obj = array[i];
var clone = JSON.parse(JSON.stringify(obj));
//如果需要改字段名,请在这里添加代码进行修改
if(obj.pid == 0) {
result.push(clone);
}
map[clone.id] = clone;
if(map[clone.pid]) {
if(!map[clone.pid].sub) map[clone.pid].sub = [];
map[clone.pid].sub.push(clone);
}
}
return result;
}
console.log(JSON.stringify(arrayToTree(array), null, 2));
树形结构转扁平数组
var treeData = [
{"name":"一级","id":1,"pid":0,"sub":[{"name":"一级子级1","id":11,"pid":1},{"name":"一级子级2","id":12,"pid":1}]},
{"name":"二级","id":2,"pid":0,"sub":[{"name":"二级子级1","id":21,"pid":2},{"name":"二级子级2","id":22,"pid":2}]},
{"name":"三级","id":3,"pid":0,"sub":[{"name":"三级子级1","id":31,"pid":3}]}];
//field 定义children字段名称
function treeToArray(treeData, field) {
var result = [];
if(!field) field = "children";
for(var key in treeData) {
var obj = treeData[key];
var clone = JSON.parse(JSON.stringify(obj));
delete clone[field];
result.push(clone);
//
if(obj[field]) {
var tmp = treeToArray(obj[field], field);
result = result.concat(tmp);
}
}
return result;
}
console.log(JSON.stringify(treeToArray(treeData, "sub"), null, 2));