dtree 树形组件 dtree - layui 第三方组件平台

文档

文档：
组件功能较多，已整理出了专门的文档发布在独立的服务器上，
详细请看： http://www.wisdomelon.com/DTreeHelper/ （最好用Chrome浏览器打开）（点击左侧来源可直接查看）
文档源码：点击左侧下载，可以去gitee或github下载
QQ群：867324214（添加时请备注layui交流。）

目录结构：
├─layui /layui 基础框架
│─layui_exts //存放第三方组件的目录
└─dist/ 组件的压缩后的js存在的地方
└─dtree/ 组件模块名
├─dtree.js //组件核心 JS
├─font //组件核心图标库，库中携带了dtreefont.css文件，在使用树时需要引入该文件
└─dtree.css //组件 CSS 库

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

简单url加载示例（更多示例请查看文档）：
// 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));
	});
});

//部分结果展示

// 异步数据示例，使用url属性时返回内容，其中
//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"
		}]
	}]
}

简单data加载示例（更多示例请查看文档）：
// 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",  //绑定元素
	  data: demoData  //数据
	});

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

//部分结果展示

// data数据示例，其中
//checkArr：该字段是作为开启复选框后的必填项，如无，则复选框不显示
//basicData：该字段是作为用户自定义节点内容时的字段，如不需要自定义节点内容的话，可以无该字段

var demoData  =  [{
		"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"
		}]
	}]；

下载

立即下载去码云下载去 GitHub 下载

该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。