.Net MVC 动态生成LayUI tree

.Net MVC 动态生成LayUI tree

最近在做项目的过程中需要用到Tree插件，所以找了一堆Tree发现LayUI的Tree样式比较好看，所以开始搞！

1.Layui部分

　　1.1 首先引用文件是必不可少的：（依赖于Jquery）

<link type="text/css" rel="Stylesheet" href="~/Content/js/plugins/layui-v2.5.4/layui-v2.5.4/layui/css/layui.css" />
<script type="text/javascript" src="~/Content/js/plugins/layui-v2.5.4/layui-v2.5.4/layui/layui.js"></script>

 　　1.2 Js部分

//这里我用的是Ajax 动态加载
这里有个坑是 ajax 接收到的数据需要用 JSON.parse(result) 不然渲染不上去 会出现 这样的情况

 

function SetTree() {
        layui.use('tree', function () {//初始化Tree
            var tree = layui.tree;
            $.ajax({
                type: "POST",
                url: "/CmdSite/GetTreeEntity",
                data: {},
                success: function (result) {
                    var inst1 = tree.render({
                        elem: '#menuTree',
                        id: 'tree',
                        data: JSON.parse(result),
                        isJump: true,//以下配置项参考Layui Tree 官方文档
                        showLine: true,
                        onlyIconControl: true,
                        accordion:false,
                        click: function (obj) {
                            var data = JSON.stringify(obj.data);//这里是点击获得数据
                            var jsonData = JSON.parse(data);
                        }
                    });
                },
                error: function (e) {
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        });
    }

　　1.3 Html部分

 <div id="menuTree" class="demo-tree-more"></div>
这就很省事了！

2. .Net部分

　　2.1 你得有个实体类 

　　　　　//这里面字段最好对应文档里面的
　　　　　public class treeEntity
        {
            /// <summary>
            /// 主键ID
            /// </summary>
            public int id { get; set; }
            /// <summary>
            /// 父ID
            /// </summary>
            public string pid { get; set; }
            /// <summary>
            /// 名称
            /// </summary>
            public string title { get; set; }
            /// <summary>
            /// 图标
            /// </summary>
            public string icon { get; set; }
            /// <summary>
            /// 链接
            /// </summary>
            public string url { get; set; }
            /// <summary>
            /// 排序
            /// </summary>
            public string sort { get; set; }
            /// <summary>
            /// 是否展开
            /// </summary>
            public bool spread { get;set;}
            /// <summary>
            /// 子节点
            /// </summary>
            public List<treeEntity> children { get; set; }

        }

 

　　2.2 遍历拼接

　　

　　　　　　/// <summary>
        /// 获得Tree实体（我只做了二级的 有需要的可以自己改成递归）
        /// </summary>
        /// <returns></returns>
        public static string GetTreeEntityJson()
        {
            var CategoryList = Dao.BLL.MenuCategory.QueryListByFMcid(0);
            var menuList = new List<treeEntity>();
            foreach (var item in CategoryList)
            {
                treeEntity tree = new treeEntity
                {
                    icon = item.icon,
                    id = item.mcid,
                    title = item.name,
                    sort = item.sort.ToString(),
                    pid = "0",
                    url = "",
                    spread=true,
                };
                var menuEntityList = Dao.BLL.Menu.QueryListByMcid(item.mcid);
                var childrenList = new List<treeEntity>();
                foreach (var ChildItem in menuEntityList)
                {
                    treeEntity ChindrenTree = new treeEntity
                    {
                        icon = "fa fa-diamond",
                        id = (int)ChildItem.menu,
                        title = ChildItem.name,
                        sort = ChildItem.sort.ToString(),
                        pid = ChildItem.mcid.ToString(),
                        url = "",
                        children=null,
                        spread = true,
                    };
                    childrenList.Add(ChindrenTree);
                }
                tree.children = childrenList;
                menuList.Add(tree);
            }
            var menuJson = Newtonsoft.Json.JsonConvert.SerializeObject(menuList);
            return menuJson;

　　2.3 返回Json

　

    public string GetTreeEntity()
        {
            return JQLY.Helper.MenuHelper.GetTreeEntityJson();
        }

 

这样就搞定了！

 

LayUI地址：https://www.layui.com