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