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