Layui框架tree添加数据并获取选中节点数据,实现选中节点高亮显示(改变文本颜色)
使用Layui框架的手风琴树形结构,给树添加数据(比较笨的一种方式循环遍历二级菜单)
获取的数据首先是一个json字符串,经过字符串的截取生成数据的形式([{"id":"","title":"","children":[{"id":"","title":"","children":[]},{"id":"","title":"","children":[]}] }])就是这种形式的数据
1 /// <summary> 2 /// //获取主节点 3 /// </summary> 4 /// <returns></returns> 5 public string GetTrees(HttpContext context) 6 { 7 string jsonData = ""; 8 SysUser sys = null; 9 if (context.Session["sysUser"] != null) { 10 sys = (SysUser)context.Session["sysUser"]; 11 } 12 string strFuncParent = context.Request["funcCode"].ToString(); 13 TreeViewRoot root = new TreeViewRoot(); 14 Bll_FunctranAametree bll = new Bll_FunctranAametree(sys.Id.ToString()); 15 DataTable dt = bll.GetTreeList(strFuncParent.Trim('\'')).Tables[0]; 16 if (dt != null && dt.Rows.Count > 0) 17 { 18 List<TreeViewModel> listTree = new List<TreeViewModel>(); 19 for (int i = 0; i < dt.Rows.Count; i++) 20 { 21 TreeViewModel treeViewModel = new TreeViewModel(); 22 treeViewModel.id = dt.Rows[i]["func_code"].ToString(); 23 treeViewModel.title = dt.Rows[i]["func_name"].ToString(); 24 treeViewModel.href = dt.Rows[i]["func_url_bs"].ToString(); 25 listTree.Add(treeViewModel); 26 //查询子菜单 27 List<ChildrenItem> childrenTree = new List<ChildrenItem>(); 28 DataTable ds1 = bll.GetchindTreeList(treeViewModel.id).Tables[0]; 29 if (ds1 != null && ds1.Rows.Count > 0) 30 { 31 for (int a = 0; a < ds1.Rows.Count; a++) 32 { 33 ChildrenItem children = new ChildrenItem(); 34 children.id = ds1.Rows[a]["func_code"].ToString(); 35 children.title = ds1.Rows[a]["func_name"].ToString(); 36 children.href = ds1.Rows[a]["func_url_bs"].ToString(); 37 childrenTree.Add(children); 38 } 39 } 40 treeViewModel.children = childrenTree; 41 } 42 root.treeList = listTree; 43 StringBuilder sb = new StringBuilder(); 44 jsonData = JsonConvert.SerializeObject(root); 45 Console.WriteLine(jsonData); 46 } 47 return jsonData.Substring(12, jsonData.Length - 13); 48 }
JS主要是给tree添加数据和为每个节点添加点击事件获取节点数据选中节点高亮显示(这里只获取了子节点,父节点全部剔除掉)如果要获取多个节点的数据都是可以的,一个套路,代码如下:
1 //加载树
2 $.ajax({ 3 type: 'POST', 4 url: 'handler/Common.ashx?flag=2', 5 data: { "funcCode": "" }, 6 success: function (data) { 7 var data2 = JSON.parse(data);//获取到数据库的数据 8 layui.use(['tree', 'util'], function () { 9 var $ = layui.$; 10 var tree = layui.tree 11 , layer = layui.layer 12 , util = layui.util 13 14 //手风琴风格 15 tree.render({ 16 elem: '#company_tree' 17 , data: data2 18 , accordion: true 19 , click: function (obj) { //节点选中状态改变事件监听,全选框有自己的监听事件 20 var nodes = document.getElementsByClassName("layui-tree-txt"); 21 for (var i = 0; i < nodes.length; i++) { 22 if (nodes[i].innerHTML === obj.data.title) {
// if(obj.data.children){} //判断当前节点是否有子节点 23 if (obj.data.children == null || obj.data.children.length==0) {//判断是不是子节点(父节点对应的children不为空,且有的父节点长度为0也可代表子节点) 24 nodes[i].style.color = "yellow";//黄色高亮显示 25 // alert(obj.data.id); //弹出id值 26 //alert(obj.data.title); //弹出title值 27 layer.msg('您选中了:' + obj.data.title); 28 //将选中的值存储在Session 29 $.ajax({ 30 type: 'POST', 31 url: 'handler/Common.ashx?flag=3', 32 data: { "CompanyQK": obj.data.title }, 33 success: function (data) { 34 //可以不返回数据 35 } 36 }); 37 } else 38 { 39 nodes[i].style.color = "#fff";//白色 40 } 41 42 } else 43 { 44 nodes[i].style.color = "#fff";//白色 45 } 46 } 47 } 48 }); 49 }); 50 } 51 });