layui 第三方组件平台

返回首页 发布组件

基于layui2.4.5的树形组件,初始版本具备的功能有:基础数据展现、异步加载、缓存、多级复选框、菜单栏、工具栏、点击节点加载iframe、数据回调、数据反选、异步返回数据自定义等功能,内部引用了'layer','element','form'等模块。

文档

文档:
组件功能较多,已整理出了专门的文档发布在独立的服务器上,详细请看:(最好用Chrome浏览器打开)
http://47.105.168.195/DTreeHelper/

更新预告:
1.toolbar取消按钮的显示,开始绑定右键点击事件。
2.toolbar模块新增一个属性:toolbarScroll 用于绑定树的上级div容器,让树可以显示滚动条的div容器,右键菜单绑定必填项。
3.toolbar模块新增编辑页数据回显功能。
4.更新文档示例。
(以上内容将在layui发布下一版本时发布,敬请期待!)

版本说明(倒序,新的版本表示提供的zip压缩包有更新,请下载最新的哦):
v2.4.5(2018/11/09)【优化】:更新了图标库,精简了图标(60个)
v2.4.5(2018/11/09)【初始】:dtree组件,初始版本具备的功能有:基础数据展现、异步加载、缓存、多级复选框、菜单栏、工具栏、点击节点加载iframe、数据回调、数据反选、异步返回数据自定义等功能。


目录结构:
├─layui /layui 基础框架
│─layui_exts //存放第三方组件的目录
└─dtree/ 组件模块名
├─dtree.js //组件核心 JS 库
├─font //组件核心图标库
└─dtree.css //组件 CSS 库

使用方式:
将压缩包解压后放置在项目的任意路径,根据layui引入模块的方式将dtree.js文件引入即可使用;
在页面中,使用组件则需要引入两个class:
layui_exts/dtree/dtree.css
layui_exts/dtree/font/iconfont.css


简单示例(更多示例请查看文档):
// html代码
<ul id="demoTree1" class="dtree" data-id="0"></ul>
// js代码
layui.config({
base: '../js/layui_exts/dtree' //配置 layui 第三方扩展组件存放的基础目录
}).extend({
dtree: 'dtree' //定义该组件模块名
}).use(['element','layer', 'dtree'], function(){
var layer = layui.layer,
dtree = layui.dtree,
$ = layui.$;


dtree.render({
elem: "#demoTree1", //绑定元素
url: "../json/case/demoTree1.json" //异步接口
});

//单击节点 监听事件
dtree.on("node('demoTree1')" ,function(param){
layer.msg(JSON.stringify(param));
});
});
//部分结果展示


// 异步数据示例,如果是使用data属性,请只复制"data"中的内容,其中
//checkArr:该字段是作为开启复选框后的必填项,如无,则复选框不显示
//basicData: 该字段是作为用户自定义节点内容时的字段,如不需要自定义节点内容的话,可以无该字段
{
"status":{"code":200,"message":"操作成功"},
"data":[{
"id":"001",
"title": "湖南省",
"isLast": false,
"level": "1",
"parentId": "0",
"checkArr": [{"type": "0", "isChecked": "0"}],
"basicData": {"data1": "自定义数据111", "data2": "自定义数据222", "data3": "自定义'我带了单引号'333"},
"children":[{
"id":"001001",
"title": "长沙市",
"isLast":true,
"parentId": "001",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
},{
"id":"001002",
"title": "株洲市",
"isLast":true,
"parentId": "001",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
},{
"id":"001003",
"title": "湘潭市",
"isLast":true,
"parentId": "001",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
},{
"id":"001004",
"title": "衡阳市",
"isLast":true,
"parentId": "001",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
},{
"id":"001005",
"title": "郴州市",
"isLast":true,
"parentId": "001",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
}]
},{
"id":"002",
"title": "湖北省",
"isLast": false,
"parentId": "0",
"level": "1",
"checkArr": [{"type": "0", "isChecked": "0"}],
"children":[{
"id":"002001",
"title": "武汉市",
"isLast":true,
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
},{
"id":"002002",
"title": "黄冈市",
"checkArr": [{"type": "0", "isChecked": "0"}],
"isLast":true,
"parentId": "002",
"level": "2"
},{
"id":"002003",
"title": "潜江市",
"isLast":true,
"parentId": "002",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
},{
"id":"002004",
"title": "荆州市",
"isLast":true,
"parentId": "002",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
},{
"id":"002005",
"title": "襄阳市",
"isLast":true,
"parentId": "002",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
}]
},{
"id":"003",
"title": "广东省",
"isLast": false,
"parentId": "0",
"level": "1",
"checkArr": [{"type": "0", "isChecked": "0"}],
"children":[{
"id":"003001",
"title": "广州市",
"isLast":false,
"parentId": "003",
"level": "2",
"checkArr": [{"type": "0", "isChecked": "0"}],
"children":[{
"id":"003001001",
"title": "天河区",
"isLast":true,
"parentId": "003001",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "3"
},{
"id":"003001002",
"title": "花都区",
"isLast":true,
"parentId": "003001",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "3"
}]
},{
"id":"003002",
"title": "深圳市",
"isLast":true,
"parentId": "003",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
},{
"id":"003003",
"title": "中山市",
"isLast":true,
"parentId": "003",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
},{
"id":"003004",
"title": "东莞市",
"isLast":true,
"parentId": "003",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
},{
"id":"003005",
"title": "珠海市",
"isLast":true,
"parentId": "003",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
},{
"id":"003006",
"title": "韶关市",
"isLast":true,
"parentId": "003",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
}]
},{
"id":"004",
"title": "浙江省",
"isLast": false,
"level": "1",
"parentId": "0",
"checkArr": [{"type": "0", "isChecked": "0"}],
"children":[{
"id":"004001",
"title": "杭州市",
"isLast":true,
"parentId": "004",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
},{
"id":"004002",
"title": "温州市",
"isLast":true,
"parentId": "004",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
},{
"id":"004003",
"title": "绍兴市",
"isLast":true,
"parentId": "004",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
},{
"id":"004004",
"title": "金华市",
"isLast":true,
"parentId": "004",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
},{
"id":"004005",
"title": "义乌市",
"isLast":true,
"parentId": "004",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
}]
},{
"id":"005",
"title": "福建省",
"isLast": false,
"parentId": "0",
"level": "1",
"checkArr": [{"type": "0", "isChecked": "0"}],
"children":[{
"id":"005001",
"title": "厦门市",
"isLast":true,
"parentId": "005",
"checkArr": [{"type": "0", "isChecked": "0"}],
"level": "2"
}]
}]
}