标签:树形结构 逻辑 处理 for 方法 今天 重点 数据 amp
zTree 是一个前端树形结构的插件。
使用起来很简单,我们重点关注一下插件的核心代码。
首先,zTree需要如下的数据结构:
let areaData = [ { "id": "1", "pId": "0", "name": " 河南省", "sort": "0" }, { "id": "2", "pId": "1", "name": "鹤壁", "sort": "10" }, { "id": "3", "pId": "2", "name": "市场部", "sort": "10" }, { "id": "4", "pId": "2", "name": "网运部", "sort": "20" } ];
然后zTree 会根据里面的id以及parentId 把这种扁平化的数据变成嵌套的树形结构,如下:
var afterAreaData = [{ "id": "1", "pId": "0", "name": " 河南省", "sort": "0", "children": [{ "id": "2", "pId": "1", "name": "鹤壁", "sort": "10", "children": [{ "id": "3", "pId": "2", "name": "市场部", "sort": "10" }, { "id": "4", "pId": "2", "name": "网运部", "sort": "20" }] }] }];
是不是很好看,很面向对象。这种理想的数据结构看起来很直观。
核心代码如下:
function transformTozTreeFormat(sNodes){ var i,l, key = ‘id‘, parentKey = ‘pId‘, childKey = ‘children‘; if (!key || key=="" || !sNodes) return []; if (Object.prototype.toString.apply(sNodes) === "[object Array]") { var r = []; var tmpMap = []; for (i=0, l=sNodes.length; i<l; i++) { tmpMap[sNodes[i][key]] = sNodes[i]; } for (i=0, l=sNodes.length; i<l; i++) { if (tmpMap[sNodes[i][parentKey]] && sNodes[i][key] != sNodes[i][parentKey]) { if (!tmpMap[sNodes[i][parentKey]][childKey]) tmpMap[sNodes[i][parentKey]][childKey] = []; tmpMap[sNodes[i][parentKey]][childKey].push(sNodes[i]); } else { r.push(sNodes[i]); } } return r; }else { return [sNodes]; } }
方法里面的key值根据自己的需要修改。
今天就这样
标签:树形结构 逻辑 处理 for 方法 今天 重点 数据 amp
原文地址:https://www.cnblogs.com/Human-nature/p/10625323.html