[转]easyui tree 模仿ztree 使用扁平化加载json

时间：2023-03-08 20:03:03

原文地址：http://my.oschina.net/acitiviti/blog/349377

参考文章：http://www.jeasyuicn.com/demo/treeloadfilter.html

一、扩展原因

ztree使用了一种扁平化的数据加载方式，就是id（自身id）,pid（父id）的方式，参考http://www.ztree.me/v3/demo.php#_102，于是扩展easyui tree 也使用这种亲民的方式；

二、基本方法

1，载入扩展文件

2，在JS中实例化TREE

三、具体方法（easyui1.4.1下测试可用）

1，载入扩展JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//作者孙宇
//自定义loadFilter的实现
$.fn.tree.defaults.loadFilter = function (data, parent) {
    var opt = $(this).data().tree.options;
    var idFiled,
    textFiled,
    parentField;
    if (opt.parentField) {
        idFiled = opt.idFiled || 'id';
        textFiled = opt.textFiled || 'text';
        parentField = opt.parentField;
         
        var i,
        l,
        treeData = [],
        tmpMap = [];
         
        for (i = 0, l = data.length; i < l; i++) {
            tmpMap[data[i][idFiled]] = data[i];
        }
         
        for (i = 0, l = data.length; i < l; i++) {
            if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {
                if (!tmpMap[data[i][parentField]]['children'])
                    tmpMap[data[i][parentField]]['children'] = [];
                data[i]['text'] = data[i][textFiled];
                tmpMap[data[i][parentField]]['children'].push(data[i]);
            } else {
                data[i]['text'] = data[i][textFiled];
                treeData.push(data[i]);
            }
        }
        return treeData;
    }
    return data;
};

2，实例化

1
2
3
4
5
6
7
8
9
10
//实例化。这里增加了三个属性，可以指定idFiled，textFiled和parentField。所以这里的simpleData可以不严格转换成tree的数据格式。
$(function(){
    $('#tt3').tree({
        checkbox: true,
        url: 'tree_data_simp.json',
        parentField:"pid",
        textFiled:"name",
        idFiled:"key"
    });
});

json文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
[
    {
        "key": 1,
        "name": "Folder1",
        "iconCls": "icon-ok"
    },
    {
        "key": 2,
        "pid": 1,
        "name": "File1",
        "checked": true
    },
    {
        "key": 3,
        "pid": 1,
        "name": "Folder2",
        "state": "open"
    },
    {
        "key": 4,
        "pid": 3,
        "name": "File3",
        "attributes": {
            "p1": "value1",
            "p2": "value2"
        },
        "checked": true,
        "iconCls": "icon-reload"
    },
    {
        "key": 8,
        "pid": 3,
        "name": "Async Folder"
    },
    {
        "key": 9,
        "name": "language",
        "state": "closed"
    },
    {
        "key": "j1",
        "pid": 9,
        "name": "Java"
    },
    {
        "key": "j2",
        "pid": 9,
        "name": "C#"
    }
]

3，效果：

[转]easyui tree 模仿ztree 使用扁平化加载json

相关文章