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/