easyui tree支持扁平、简单数据结构扩展
easyui的tree组件支持的数据结构是嵌套模型的，如下
[{"id":1,"text":"text1","children":[{"id":4,"text":"text1_1","pid":1}]},
{"id":2,"text":"text2"},
{"id":3,"text":"text3"}]
如果easyui tree想加载类型ztree的简单数据结构（扁平数据结构，依据parentId来确定父子关系的数据结构），需要自己扩展loadFilter来将简单/扁平数据结构处理为嵌套格式的数据才行。
扁平数据结构示例
[{"id":1,"text":"text1"},
{"id":4,"text":"text1_1","pid":1},
{"id":2,"text":"text2"},
{"id":3,"text":"text3"}]
相对于嵌套数据结构，服务器生成还是比较麻烦的，不如扁平数据结构好生成，所以网上有人写了个扩展将返回的扁平数据结构处理为easyui tree需要的嵌套数据结构。
easyui tree支持扁平、简单数据结构扩展示例如下
注意：easyui版本需要1.2.6+以上，才支持loadFilter配置
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script> $.fn.tree.defaults.loadFilter = function (data, parent) {//扩展，注意导入循序，一定要放在easyui框架下面
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;
};
</script>
</head>
<body>
<script>
$(function () {//只需要配置parentField为你生成的扁平数据中的父id键名称即可。
$('#tree').tree({ url: 'data.txt', parentField: 'pid', method: 'get' });
});
</script>
<ul id="tree"></ul>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：easyui tree支持扁平、简单数据结构扩展