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/