Easyui-树(Tree)
来源:互联网 发布:东西的知乎 编辑:程序博客网 时间:2024/06/08 09:28
这个主要的拿到的json数组不是标准的tree的命名格式,然后实现重新转换
1.获取的数据样式
var testdata=[{"nodeId":"1001","parendId":"apple","nodeName":"水果"},{"nodeId":"1002","parentId":"1001","nodeName":"苹果"},{"nodeId":"1003","parentId":"1001","nodeName":"梨"},{"nodeId":"1004","parentId":"1002","nodeName":"红富士"},{"nodeId":"1005","parentId":"1002","nodeName":"花牛"},{"nodeId":"1006","parentId":"1002","nodeName":"黄元帅"},{"nodeId":"1007","parentId":"1002","nodeName":"澳洲青苹"},{"nodeId":"1008","parentId":"1002","nodeName":"嘎啦果"},{"nodeId":"1009","parentId":"1003","nodeName":"苹果梨"},{"nodeId":"2000","parentId":"1003","nodeName":"酥梨"},{"nodeId":"2001","parentId":"1003","nodeName":"雪花梨"},{"nodeId":"2002","parentId":"1003","nodeName":"鸭梨"},{"nodeId":"2003","parentId":"1003","nodeName":"香梨"},{"nodeId":"2003","parentId":"1001","nodeName":"香蕉"},{"nodeId":"2003","parentId":"1001","nodeName":"芒果"},{"nodeId":"2003","parentId":"1001","nodeName":"猕猴桃"}];
2.转换方法
$("#tree_test").tree({ data:testdata, loadFilter: function(rows){ return convert(rows); }, //点击事件 onClick: function(node){ alert(node.text); // alert node text property when clicked }}); function convert(rows){ function exists(rows, parentId){ for(var i=0; i<rows.length; i++){ if (rows[i].nodeId == parentId) return true; } return false; } var nodes = []; // get the top level nodes for(var i=0; i<rows.length; i++){ var row = rows[i]; if (!exists(rows, row.parentId)){ nodes.push({ id:row.nodeId, text:row.nodeName }); } } var toDo = []; for(var i=0; i<nodes.length; i++){ toDo.push(nodes[i]); } while(toDo.length){ var node = toDo.shift(); // the parent node // get the children nodes for(var i=0; i<rows.length; i++){ var row = rows[i]; if (row.parentId == node.id){ var child = {id:row.nodeId,text:row.nodeName}; if (node.children){ node.children.push(child); } else { node.children = [child]; } toDo.push(child); } } } return nodes;};
3.标准数据格式
数据格式:
var testdata2=[{ "id":1, "text":"Folder1", "iconCls":"icon-save", "children":[{ "text":"File1", "checked":true },{ "text":"Books", "state":"open", "attributes":{ "url":"/demo/book/abc", "price":100 }, "children":[{ "text":"PhotoShop", "checked":true },{ "id": 8, "text":"Sub Bookds", "state":"closed" }] }]},{ "text":"Languages", "state":"closed", "children":[{ "text":"Java" },{ "text":"C#" }]}];
js代码:
$("#tree_test2").tree({ data:testdata2});
阅读全文
0 0
- Easyui-树(Tree)
- easyui tree 检索树节点(3)
- EasyUI Tree 树
- EasyUI tree加载树
- easyui tree树
- EasyUI Tree 树
- EasyUI Tree 树
- 【项目实战】EasyUI Tree树
- easyui 学习(2) --tree
- easyui ---tree
- easyUI Tree
- easyui Tree
- easyui-tree
- easyui tree
- easyUI-tree
- EasyUI-Tree
- easyUI-tree
- easyui-tree
- 1365:E. 最大连续子序列和 (改编)
- JS判断是PC还是移动端浏览器,并根据不同的终端跳转到不同的网址
- Java学习这一部分其实也算是今天的重点
- 【莫比乌斯反演】BZOJ2820 YY的GCD
- Multi-Object Tracking with Quadruplet Convolutional Neural Networks
- Easyui-树(Tree)
- 第二章 类与对象2
- MYeclipse 快捷鍵大全
- 构建单页面应用
- 线程的状态
- 关于半衰期
- JQuery(4)---使用mousedown和mouseup简单判断鼠标按下与释放位置是否相同
- linux — 进程PCB详解
- java实现3个线程轮流打印A、B、C,达到“ABBCCCAAAABBBBBCCCCCC”,打印200个字符停止,并在控制台打印出A、B、C各打印了多少个