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

来源：互联网发布：韩顺平js视频教程下载编辑：程序博客网时间：2024/05/19 19:15

一、扩展原因

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#"    }]

0 0