Layui框架tree添加数据并获取选中节点数据，实现选中节点⾼亮显
⽰（改变⽂本颜⾊）
使⽤Layui框架的⼿风琴树形结构，给树添加数据（⽐较笨的⼀种⽅式循环遍历⼆级菜单）
获取的数据⾸先是⼀个json字符串，经过字符串的截取⽣成数据的形式（[{"id":"","title":"","children":[{"id":"","title":"","children":[]}, {"id":"","title":"","children":[]}] }]）就是这种形式的数据
1///<summary>
2/// //获取主节点
3///</summary>
4///<returns></returns>
5public string GetTrees(HttpContext context)
6 {
7string jsonData = "";
8 SysUser sys = null;
9if (context.Session["sysUser"] != null) {
10 sys = (SysUser)context.Session["sysUser"];
11 }
12string 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];
16if (dt != null && dt.Rows.Count > 0)
17 {
18 List<TreeViewModel> listTree = new List<TreeViewModel>();
19for (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];
29if (ds1 != null && ds1.Rows.Count > 0)
30 {
31for (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 List = listTree;
43 StringBuilder sb = new StringBuilder();
view ui框架44 jsonData = JsonConvert.SerializeObject(root);
45 Console.WriteLine(jsonData);
46 }
47return 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 () {
9var $ = layui.$;
10var tree =
11 , layer = layui.layer
12 , util = layui.util
13
14//⼿风琴风格
15 der({
16 elem: '#company_tree'
17 , data: data2
18 , accordion: true
19 , click: function (obj) { //节点选中状态改变事件监听，全选框有⾃⼰的监听事件
20var nodes = ElementsByClassName("layui-tree-txt");
21for (var i = 0; i < nodes.length; i++) {
22if (nodes[i].innerHTML === obj.data.title) {
// if(obj.data.children){} //判断当前节点是否有⼦节点
23if (obj.data.children == null || obj.data.children.length==0) {//判断是不是⼦节点（⽗节点对应的childre
n不为空，且有的⽗节点长度为0也可代表⼦节点）24 nodes[i].lor = "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].lor = "#fff";//⽩⾊
40 }
41
42 } else
43 {
44 nodes[i].lor = "#fff";//⽩⾊
45 }
46 }
47 }
48 });
49 });
50 }
51 });
发表评论