当前位置： 移动技术网 > IT编程>开发语言>JavaScript > zTree的核心处理逻辑

zTree的核心处理逻辑

2019年03月31日  | 移动技术网IT编程  | 我要评论

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

今天就这样

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网