首页 > 代码库 > easyui tree 模仿ztree 使用扁平化加载json
easyui tree 模仿ztree 使用扁平化加载json
参考文章: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,效果:
easyui tree 模仿ztree 使用扁平化加载json
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。