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