C# layui组件Dtree简单使用

1.由于使用的是layuiAdmin，因此需要将DTree集成到框架中。

　　（1）将dtree.js增加到lib/extend目录下。

　　　　

　　（2）在layuiadmin的config.js中的extend下增加dtree项。

　　　　

　　（3）将下载到的tree的相关font整个文件夹包括在项目路径下。

　　　　（此处随意放置在哪处计科，只需要在后续的引用中使用正确的路径即可）

　　　　将dtree.css包括在项目中。

　　　　

　　（4）在需要使用的页面增加关于两个css的引入

<link href="~/static/layuiadmin/layui/font/dtreefont/dtreefont.css" rel="stylesheet" />
<link href="~/static/layuiadmin/layui/css/dtree.css" rel="stylesheet" />

　　（5）在需要使用的页面增加以下代码：

layui.config({
        base: '../../Static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        dtree: 'lib/dtree'
    });

 2.本处采用layui+list集合数据格式（dataStyle + dataFormat）。代码如下：

//数据Model
 public class DtreeDataModel
    {
        public string id { get; set; }
        public string title { get; set; }
        public string checkArr { get; set; }
        public string parentId { get; set; }
    }

　　由于layui+list集合数据格式格式的json最前放需要code等数据信息，方便操作，增加以下类

public class LayUIDtreeDtos<T> where T : class
    {
        public int code { get; set; }
        public string msg { get; set; }
        public List<T> data { get; set; }

        public static LayUIDtreeDtos<T> Create()
        {
            return new LayUIDtreeDtos<T>()
            {
                code = 0,
                msg = string.Empty,
                data = new List<T>()
            };
        }


    }

3.前台调用：

　　（1）HTML代码：

 <div style="height: 400px;overflow: auto;">
                            <ul id="dataTree2" class="dtree" data-id="0"></ul>
</div>

　　（2）JS代码：

 dtree.render({
            elem: "#dataTree2",
            url: "../json",
            dataFormat: "list",  //配置data的风格为list
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            response: { message: "msg", statusCode: 0 },  //修改response中返回数据的定义
            checkbar: true //开启复选框
            , checkbarLoad:"leaf"//只显示最后一级节点的复选框
        });

参考文档：1.LayuiDtree文档 http://www.wisdomelon.com/DTreeHelper/