easyUi中的一段漂亮代码之将list转换成tree.
2023-09-11 14:22:24 时间
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 });
相关文章
- abp(net core)+easyui+efcore实现仓储管理系统——模块管理升级(六十)
- abp(net core)+easyui+efcore实现仓储管理系统——入库管理之十(四十六)
- abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之八(三十四)
- abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之七(三十三)
- abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之一(二十七)
- abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理三 (二十一)
- 工作总结 用, 隔开数据 后台不可以用 List<string> 接收 get请求直接通过浏览器发请求传数组或者list到后台
- 基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码
- easyui datagrid隔行变色
- List分割:等分成n个list;指定元素个数n等分
- Easyui表单,文本框,下拉菜单三级联动练习代码
- 《jQuery EasyUI开发指南》——1.9 搭建jQuery EasyUI开发环境
- easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大
- Jquery Easyui验证扩展,Easyui验证,Easyui校验,js正则表达式
- SwiftUI List基础之如何从列表list中删除多行(教程含源码)
- List does not exist. The page you selected contains a list that does not exist. It may have been deleted by another user
- jquery 中$.post获取MVC Controller中JsonResult返回包含LIst<Model>类型的子List<Model>的高级使用方法
- easyui 多行文本框 Multiline TextBox
- easyui 判断密码是否输入一致
- EasyUI入门:怎样引入及简单使用