[Turn]easyui tree mimic ztree use flatten to load JSON

Original address: http://my.oschina.net/acitiviti/blog/349377

Reference article:http://www.jeasyuicn.com/demo/treeloadfilter.html

One, the reason for expansion

Ztree uses a flat method of data loading, that is, the ID (self-ID), PID (parent ID) way, referring to http://www.ztree.me/v3/demo.php#_102, so the extension Easyui tree also use this way of the people;

Ii. Basic Methods

1, Loading extension files

2, instantiate the tree in JS

Third, the specific method (easyui1.4.1 test is available)

1, Load Extension JS

?

123456789101112131415161718192021222324252627282930313233343536

//作者孙宇//自定义loadFilter的实现$.fn.tree.defaults.loadFilter = function(data, parent) {    varopt = $(this).data().tree.options;    varidFiled,    textFiled,    parentField;    if(opt.parentField) {        idFiled = opt.idFiled || ‘id‘;        textFiled = opt.textFiled || ‘text‘;        parentField = opt.parentField;                vari,        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]);            }        }        returntreeData;    }    returndata;};

2, instantiation

?

12345678910

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

JSON file:

?

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950

[    {        "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, Effect:

[Turn]easyui tree mimic ztree use flatten to load JSON