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

     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 = [];
         // 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.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();    // 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.id,text:row.name};
                     if (node.children){
                         node.children.push(child);
                     } else {
                         node.children = [child];
                     }
                     toDo.push(child);
                 }
             }
         }
         return nodes;
     }

list数据:

     [
     {"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老左菜单,但是如何来添加一个连接呢.

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

 [
  {"id":1,"parendId":0,"name":"系统管理","url":"chart/list1.html"},
  {"id":2,"parentId":1,"name":"Fruits","url":"chart/list1.html"},
  {"id":3,"parentId":1,"name":"Vegetables"},
  {"id":4,"parentId":2,"name":"apple"},
  {"id":5,"parentId":2,"name":"orange","url":"chart/list1.html"},
  {"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"}
  ]

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

对上面的convers做一点修改

 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 = [];
         // 获取顶级的node
         for(var i=0; i<rows.length; i++){
             var row = rows[i];
             if (!exists(rows, row.parentId)){
                 /**
                 gys    给顶层添加链接
                 **/
                 var topNode={id:row.id,text:row.name,url:row.url};
                 nodes.push(topNode);

                 /* 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){//循环toDo当toDo长度为零时停止
             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};
                     /**
                     gys 添加链接
                     **/
                     if(row.url){
                         child.url=row.url;
                     }
                     if (node.children){
                         node.children.push(child);
                     } else {
                         node.children = [child];
                     }
                     toDo.push(child);
                 }
             }
         }
         return nodes;
     }

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

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

     $("#menuTree1").tree({
                 onClick: function(node) {
                     alert(node.text+";"+node.url);
                 },
                 url: 'static/eui/data/menu1.txt',
                 method: 'get',
                 animate: true,
                 lines: true,
                 loadFilter:function(rows){
                     return convert(rows);
                 }
         });