码迷,mamicode.com
首页 > 其他好文 > 详细

easyUi中的一段漂亮代码之将list转换成tree.

时间:2015-08-04 15:20:30      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:

 1     function convert(rows){
 2         function exists(rows, parentId){
 3             for(var i=0; i<rows.length; i++){
 4                 if (rows[i].id == parentId) return true;
 5             }
 6             return false;
 7         }
 8         
 9         var nodes = [];
10         // get the top level nodes
11         for(var i=0; i<rows.length; i++){
12             var row = rows[i];
13             if (!exists(rows, row.parentId)){
14                 nodes.push({
15                     id:row.id,
16                     text:row.name
17                 });
18             }
19         }
20         
21         var toDo = [];
22         for(var i=0; i<nodes.length; i++){
23             toDo.push(nodes[i]);
24         }
25         while(toDo.length){
26             var node = toDo.shift();    // the parent node
27             // get the children nodes
28             for(var i=0; i<rows.length; i++){
29                 var row = rows[i];
30                 if (row.parentId == node.id){
31                     var child = {id:row.id,text:row.name};
32                     if (node.children){
33                         node.children.push(child);
34                     } else {
35                         node.children = [child];
36                     }
37                     toDo.push(child);
38                 }
39             }
40         }
41         return nodes;
42     }

list数据:

 1     [
 2     {"id":1,"parendId":0,"name":"Foods"},
 3     {"id":2,"parentId":1,"name":"Fruits"},
 4     {"id":3,"parentId":1,"name":"Vegetables"},
 5     {"id":4,"parentId":2,"name":"apple"},
 6     {"id":5,"parentId":2,"name":"orange"},
 7     {"id":6,"parentId":3,"name":"tomato"},
 8     {"id":7,"parentId":3,"name":"carrot"},
 9     {"id":8,"parentId":3,"name":"cabbage"},
10     {"id":9,"parentId":3,"name":"potato"},
11     {"id":10,"parentId":3,"name":"lettuce"}
12     ]

以上只是一棵树当中的一些基本数据.

实际上我们经常会用tree老左菜单,但是如何来添加一个连接呢.

给上面的list添加一个url字段.

 1 [
 2  {"id":1,"parendId":0,"name":"系统管理","url":"chart/list1.html"},
 3  {"id":2,"parentId":1,"name":"Fruits","url":"chart/list1.html"},
 4  {"id":3,"parentId":1,"name":"Vegetables"},
 5  {"id":4,"parentId":2,"name":"apple"},
 6  {"id":5,"parentId":2,"name":"orange","url":"chart/list1.html"},
 7  {"id":6,"parentId":3,"name":"tomato"},
 8  {"id":7,"parentId":3,"name":"carrot"},
 9  {"id":8,"parentId":3,"name":"cabbage"},
10  {"id":9,"parentId":3,"name":"potato"},
11  {"id":10,"parentId":3,"name":"lettuce"}
12  ]

那么如何将url添加到tree中呢?

对上面的convers做一点修改

 1 function convert(rows){
 2         function exists(rows, parentId){
 3             for(var i=0; i<rows.length; i++){
 4                 if (rows[i].id == parentId) return true;
 5             }
 6             return false;
 7         }
 8         
 9         var nodes = [];
10         // 获取顶级的node
11         for(var i=0; i<rows.length; i++){
12             var row = rows[i];
13             if (!exists(rows, row.parentId)){
14                 /**
15                 gys    给顶层添加链接
16                 **/
17                 var topNode={id:row.id,text:row.name,url:row.url};                
18                 nodes.push(topNode);
19                 
20                 /* nodes.push({
21                     id:row.id,
22                     text:row.name
23                 }); */
24             }
25         }
26         
27         var toDo = [];
28         for(var i=0; i<nodes.length; i++){
29             toDo.push(nodes[i]);
30         }
31         while(toDo.length){//循环toDo当toDo长度为零时停止
32             var node = toDo.shift();//删除第一个元素,然后返回第一个元素,改变数组长度    
33             // 获取子节点
34             for(var i=0; i<rows.length; i++){
35                 var row = rows[i];
36                 if (row.parentId == node.id){
37                     var child = {id:row.id,text:row.name};
38                     /**
39                     gys 添加链接
40                     **/
41                     if(row.url){
42                         child.url=row.url;
43                     }
44                     if (node.children){
45                         node.children.push(child);
46                     } else {
47                         node.children = [child];
48                     }
49                     toDo.push(child);
50                 }
51             }
52         }
53         return nodes;
54     }

在页面中生成一个树,并且赋予一个点击事件.

1 <ul id="menuTree1" class="easyui-tree"></ul>

 

 1     $("#menuTree1").tree({
 2                 onClick: function(node) {
 3                     alert(node.text+";"+node.url);
 4                 },
 5                 url: ‘static/eui/data/menu1.txt‘,
 6                 method: ‘get‘,
 7                 animate: true,
 8                 lines: true,
 9                 loadFilter:function(rows){
10                     return convert(rows);
11                 }
12         });

 

easyUi中的一段漂亮代码之将list转换成tree.

标签:

原文地址:http://www.cnblogs.com/guoyansi19900907/p/4701746.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!