.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();
    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 = "",
            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();
}

这样就搞定了！