利用layui完成树状图

开发工具与关键技术：Visual Studio 2015   layui
作者：孙水兵
撰写时间：2019年7月17

一、 达到的效果

二、 涉及的表格
用户类型表（SYS_UserType）、权限表（PW_Jurisdiction）、详细模块表（SYS_DetailModular）、模块表（SYS_Modular）。其中详细模块表中包含的是模块下面的一些子页面的名称。而权限表是用来连接用户表和详细模块表的。

三、 注意
layui 2.5 版本之前的 tree，它将不被兼容，需更换成2.5之后的版本。
四、 代码
HTML代码
HTML代码在所需要放置树状图的地方放一个div中并写一个id即可。

JS代码（参考：https://blog.csdn.net/qq_41657790/article/details/93777024 ）
在页面加载事件中先加载layui中树形组件的模块：tree。因为我这里是需要根据用户类型查询出对应的权限，因此需要获取到对应的用户类型ID，而刚开始加载树形图的时候没有选中用户类型，因此，让用户类型ID等于0。然后用post提交将用户类型ID提交到控制器，然后到控制器获取对应的数据源。然后加载树状图。elem表示的是HTML中对应的id，data：要显示的数据源，showCheckbox：是否显示复选框。accordion：是否开启手风琴模式，默认 false。

 $(function () {
            layui.use(['layer', 'table', 'tree'], function () {
                layer = layui.layer;
                layuiTable = layui.table;
                layuiTree = layui.tree;
                var UserTypeID = 0;
                //树形图显示
                $.post("/SetSystem/UserTypeManagement/SelectTree", { UserTypeID, UserTypeID}, function (data) {
                    layuiTree.render({
                        elem: '#treeModular',  //绑定元素
                        data: data,//返回的数据
                        showCheckbox: true,
                        accordion: true,//手风琴模式
                    });
            })
        });

控制器代码
先创建一个方法用来接收页面传过来的用户类型ID（UserTypeID）并将获取到的树状图的数据源返回。在该方法中调用方法GetTree()来获取树状图的数据源，并传入0和用户ID。将数据源以json格式返回。

 public ActionResult SelectTree(int UserTypeID)
        {
            //调用获取数据方法从0（上级id）开始
            List<Dictionary<string, object>> data = GetTree(0, UserTypeID);
            return Json(data, JsonRequestBehavior.AllowGet);

        }

方法：GetTree()
在该方法中接收前面传递过来的两个数据。然后在方法中创建一个字典集合jsonList。然后在模块表中查询出所有数据（一级节点的所有数据）。然后foreach循环查询出来的数据并用dr接收。然后在foreach循环中创建一个字典json。然后添加一级节点的标题（title）为查询出来的模块的名称，id为模块的ID。子节点（children）则调用方法getChildren()来获取，并将模块ID，和用户类型传入方法。然后将字典json放入字典集合jsonList中，然后在foreach循环外返回字典集合。

 public List<Dictionary<string, object>> GetTree(int id,int UserTypeID)
        {
            //创建一个字典集合
            List<Dictionary<string, object>> jsonoList = new List<Dictionary<string, object>>();
            //查询出表的所有数据
            var treeList = myModels.SYS_Modular.Select(m => m).ToList();

            foreach (SYS_Modular dr in treeList)//foreach循环遍历
            {
                //创建字典，将所需的字段和值添加进去
                Dictionary<string, object> json = new Dictionary<string, object>();
                json.Add("title", dr.ModularName);//标题
                json.Add("id", dr.ModularID);//上级id

                json.Add("children", getChildren(dr.ModularID,UserTypeID));
                jsonoList.Add(json);//将字典添加进字典集合
            }

            return jsonoList;//返回字典集合
        }

方法：getChildren()
和方法GetTree()类似，接收前面传入的两个ID。然后创建一个字典集合。然后在详细模块表中查询出与模块表中对应的详细模块用treeList接收。然后再到权限表中查询出该用户类型对应的权限数据用checkDetailModularID来接收。foreach循环treeList。在循环中创建一个字典。然后与方法GetTree()一样，将需要的字段和值添加进去。然后再判断该用户类型是否有对应的权限。有的话，foreach循环checkDetailModularID，然后判断他们的详细模块ID是否相等，相等的话说明该用户有该权限，然后勾选。然后将字典json放入字典集合jsonList中，然后在foreach循环外返回字典集合。

 public List<Dictionary<string, object>> getChildren(int id,int UserTypeID)
        {
            //创建一个字典集合
            List<Dictionary<string, object>> jsonoList = new List<Dictionary<string, object>>();
            //查询出表的所有数据
            var treeList = myModels.SYS_DetailModular.Where(m => m.ModularID == id).Select(m => m).ToList();

            //查询选中的权限
            var checkDetailModularID = myModels.PW__Jurisdiction.Where(m => m.UserTypeID == UserTypeID).Select(m => m).ToList();

            foreach (SYS_DetailModular dr in treeList)//foreach循环遍历
            {
                //创建字典，将所需的字段和值添加进去
                Dictionary<string, object> json = new Dictionary<string, object>();
                json.Add("title", dr.DetailModularName);//标题
                json.Add("id", dr.DetailModularID);

                if (checkDetailModularID.Count() > 0)
                {
                    foreach (PW__Jurisdiction item in checkDetailModularID)
                    {
                        if (item.DetailModularID == dr.DetailModularID)
                        {
                            json.Add("checked", true);//复选框勾选
                            json.Add("id_jurisdiction", item.JdtionID);
                        }

                    }

                }
                jsonoList.Add(json);//将字典添加进字典集合
            }
            return jsonoList;//返回字典集合
        }