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 });