easyUI 加载parent/child节点到tree 转换tree标准格式数据
2012-08-13 17:09
483 查看
@author YHC
通常的方式代表一个树节点就是存储一个parentid 在每一个节点,这个也被称为邻表模型,直接加载这些数据到tree是不允许的,但是我们可以转换它到标准tree数据格式在tree加载之前.tree插件提供一个'loadFilter'
选项函数它可以做到这个功能.提供一个机会去改变一个任何的进入数据,这个教程向你展示如何使用 'loadFilter'函数加载 parent/child节点到tree.
查看
Demo
$('#tt').tree({
url: 'data/tree6_data.json',
loadFilter: function(rows){
return convert(rows);
}
});
easyui-tree-demo.zip
通常的方式代表一个树节点就是存储一个parentid 在每一个节点,这个也被称为邻表模型,直接加载这些数据到tree是不允许的,但是我们可以转换它到标准tree数据格式在tree加载之前.tree插件提供一个'loadFilter'
选项函数它可以做到这个功能.提供一个机会去改变一个任何的进入数据,这个教程向你展示如何使用 'loadFilter'函数加载 parent/child节点到tree.
查看
Demo
parent/child 节点原始数据(这个不是标准的tree数据格式)
[ {"id":1,"parendId":0,"name":"Foods"}, {"id":2,"parentId":1,"name":"Fruits"}, {"id":3,"parentId":1,"name":"Vegetables"}, {"id":4,"parentId":2,"name":"apple"}, {"id":5,"parentId":2,"name":"orange"}, {"id":6,"parentId":3,"name":"tomato"}, {"id":7,"parentId":3,"name":"carrot"}, {"id":8,"parentId":3,"name":"cabbage"}, {"id":9,"parentId":3,"name":"potato"}, {"id":10,"parentId":3,"name":"lettuce"} ]
创建 Tree 使用 'loadFilter'
$('#tt').tree({url: 'data/tree6_data.json',
loadFilter: function(rows){
return convert(rows);
}
});
转换的实现
function convert(rows){ function exists(rows, parentId){ for(var i=0; i<rows.length; i++){ if (rows[i].id == parentId) return true; } return false; } var nodes = []; // 得到顶层节点 for(var i=0; i<rows.length; i++){ var row = rows[i]; if (!exists(rows, row.parentId)){ nodes.push({ id:row.id, text:row.name }); } } var toDo = []; for(var i=0; i<nodes.length; i++){ toDo.push(nodes[i]); } while(toDo.length){ var node = toDo.shift(); // 父节点 // 得到子节点 for(var i=0; i<rows.length; i++){ var row = rows[i]; if (row.parentId == node.id){ var child = {id:row.id,text:row.name}; if (node.children){ node.children.push(child); } else { node.children = [child]; } toDo.push(child); } } } return nodes; }
下载 EasyUI 示例代码:
easyui-tree-demo.zip
相关文章推荐
- easyui 扩展 之 Tree的simpleData加载/修改tree数据格式,不一定非是text
- 使用EasyUI的tree组件,叶子节点下会加载所有节点数据,形成死循环......
- easyui中tree使用simpleData的形式加载数据
- jQuery EasyUI treegrid异步加载数据
- java 将数据库中的数据转化为easyUI treegrid json格式
- easyui+.net mvc(tree数据格式)
- EasyUI-tree和combotree异步加载数据自定义查询参数
- 【原创】c#讲数据库数据转换为json格式(使用extjs,easyui中的datagrid)
- easyui的tree加载数据过滤匹配
- 扩展了一棵jquery的树插件SimpleTree,加上了json格式数据异步加载能力
- 玩转Web之easyui(二)-----easy ui 异步加载生成树节点(Tree),点击树生成tab(选项卡)
- 使用jacksonjava对象转换成标准的json格式,便于与easyui...
- asp.net:easyui tree控件加载url数据
- EXTjs 从Java后端传来的Data数据 grid动态转换为标准格式的时间
- (转)jQuery EasyUI Tree - TreeGrid动态加载子节点
- 玩转Web之easyui(二)-----easy ui 异步加载生成树节点(Tree),点击树生成tab(选项卡)
- C#将datatable生成easyui的绑定tree 的json数据格式
- EASYUI TREEGRID异步加载数据
- Easyui Tree + Asp.net加载数据
- EASYUI TREEGRID异步加载数据实现方法