zTree的核心处理逻辑

Posted 2021-11-23 human-nature

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值根据自己的需要修改。

今天就这样