码迷,mamicode.com
首页 > 其他好文 > 详细

zTree的核心处理逻辑

时间:2019-03-30 10:47:22      阅读:268      评论:0      收藏:0      [点我收藏+]

标签:树形结构   逻辑   处理   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值根据自己的需要修改。

今天就这样

zTree的核心处理逻辑

标签:树形结构   逻辑   处理   for   方法   今天   重点   数据   amp   

原文地址:https://www.cnblogs.com/Human-nature/p/10625323.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!