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

原文地址：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

//作者孙宇
//自定义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，实例化

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

json文件：

[
    {
        "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，效果：