[转]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

?

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