layui - dtree插件
Dtree
Dtree基本使用:
- 下载dtree相关js插件
https://gitee.com/miniwatermelon/DTreeHelper/repository/archive/master.zip
https://fly.layui.com/extend/dtree/#download
-
在页面中引入dtree插件
<link rel="stylesheet" href="layui/css/layui.css"> <link rel="stylesheet" href="layui_ext/dtree/dtree.css"> <link rel="stylesheet" href="layui_ext/dtree/font/dtreefont.css"> <script type="text/javascript" src="layui/layui.js""></script"> -
初始化dtree组件
<script type="text/javascript"> layui.extend({ dtree: '{/}layui_ext/dtree/dtree' }).use(['dtree','layer','jquery'],function(){ //初始化组件 var dtree = layui.dtree; var layer = layui.layer; var $ = layui.jquery; }); </script> -
创建dtree容器
<!-- 树形结构的容器 --> <ul id="demoTree" class="dtree" data-id="0"></ul> -
初始化树形结构
<script type="text/javascript"> layui.extend({ dtree: '{/}layui_ext/dtree/dtree' }).use(['dtree','layer','jquery'],function(){ // 初始化组件 var dtree = layui.dtree; var layer = layui.layer; var $ = layui.jquery; /* 原始数据结构 */ dtree.render({ elem: "#demoTree",// dtree的容器 url: "json/test/test.json" // 使用url加载（可与data加载同时存在） 动态数据接口 }); }); </script>
Dtree的数据格式
dtree数据格式主要分为2类:父子节点结构及list结构,默认是父子节点结构,需要json中必须存在children属性,即其子节点.而list结构则只需要数据是一个list数组即可,使用parentId进行数据关联.自动进行层级分类.]
原生Dtree数据格式8
{
"status":{"code":200,"message":"操作成功"},
"data":[{
"id":"001",
"title": "湖南省",
"last": false,
"level": "1",
"parentId": "001",
"checkArr": "",
"children":[{
"id":"001001",
"title": "长沙市",
"last":true,
"hide":true,
"parentId": "001",
"checkArr": [{"type": "0", "checked": "0"}],
"level": "2"
},{
"id":"001002",
"title": "株洲市",
"last":true,
"parentId": "001",
"checkArr": [{"type": "0", "checked": "0"}],
"level": "2"
}]
}]
}
list风格数据格式
{
"status":{"code":200,"message":"操作成功"},
"data":[
{"id":"001","title":"供水东区","waterSup":"79040.0 ","waterSold":"58625.7 ","rateProAndMark":"25.8 ","parentId":"0"},
{"id":"001001","title":"祥居家纺","waterSup":"12742.6 ","waterSold":"11725.9 ","rateProAndMark":"8.0 ","parentId":"001"},
{"id":"001002","title":"天通锦绣城","waterSup":"5496.6 ","waterSold":"4246.0 ","rateProAndMark":"22.8 ","parentId":"001"}
]
}
dtree的数据风格也分为2类,即原生的风格和layui风格.原生风格中,status标识数据的状态,其中包含业务码和业务信息,code即业务码,默认:200.当code不为200时,数据无法进行解析.data是具体的业务数据。layui风格,是code,msg,data,在同一级,且code正确值是0,只有0时才会进行数据解析,可以通过:
response:{message:"msg",statusCode:200}
list与layui组合格式
{
"code":200,
"msg":"操作成功",
"data":[
{"id":"001","title":"供水东区","waterSup":"79040.0 ","waterSold":"58625.7 ","rateProAndMark":"25.8 ","parentId":"0"},
{"id":"001001","title":"祥居家纺","waterSup":"12742.6 ","waterSold":"11725.9 ","rateProAndMark":"8.0 ","parentId":"001"}
]
}
<script type="text/javascript">
layui.extend({
dtree: '{/}layui_ext/dtree/dtree'
}).use(['dtree','layer','jquery'],function(){
//初始化组件
var dtree = layui.dtree;
var layer = layui.layer;
var $ = layui.jquery;
/* list结构 + layui 风格 */
dtree.render({
elem: "#dataTree3",// dtree的容器
dataStyle: "layuiStyle",//指定风格 layui 风格
dataFormat: "list",// 指定数据格式 list 格式
response:{message:"msg",statusCode:200}, //指定响应数据的 状态码
url: "json/test/test2.json", // 使用url加载（可与data加载同时存在） 动态数据接口
checkbar: true,// 开启复选框
checkbarType: "all", // all
initLevel:2,// 展开层级关系
});
});
</script>
核心方法
| 方法名 | 描述 |
|---|---|
| render | 初始化 |
| reload | 重新加载 |
| click | 模拟单击事件 |
| getNowParam | 获取当前选中的值 |
| getParam | 获取指定的节点选中的值 |
| getParentParam | 获取上级节点 |
| getAllParentParam | 获取全部上级节点 |
| getChildParam | 获取子节点 |
| changeCheckbarNodes | 判断复选框状态是否发生改变(选中/不选中) |
| dataInit | 初始化选中的节点 |
| chooseDataInit | 初始化被选中的复选框 |
| getCheckbarNodesParam | 获取复选框被选中的值 |
| changeTree | 监听菜单的展开和收缩 |
| node | 监听节点的单击 |
| chooseDone | 监听复选框被点击 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="layui_ext/dtree/font/dtreefont.css">
</head>
<body>
<!-- 树形结构的容器 -->
<ul id="demoTree" class="dtree" data-id="0"></ul>
<p>
<button id="getNowParamBtn">获取当前选中的值</button>
<button id="getParamBtn">获取指定节点的值</button>
<button id="getParentParamBtn">获取父节点</button>
<button id="getAllParentParamBtn">获取所有的父节点</button>
<button id="getChildParamBtn">获取所有的子节点</button>
<button id="changeCheckbarNodesBtn">判断复选框状态是否改变</button>
<button id="dataInitBtn">初始化选中的值</button>
<button id="chooseDataInitBtn">初始化选中的复选框</button>
<button id="getCheckbarNodesParamBtn">获取复选框被选中的值</button>
</p>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
layui.extend({
dtree: '{/}layui_ext/dtree/dtree'
}).use(['dtree','layer','jquery'],function(){
//初始化组件
var dtree = layui.dtree;
var layer = layui.layer;
var $ = layui.jquery;
/* list结构 + layui 风格 */
var DemoTree = dtree.render({
elem: "#demoTree",// dtree的容器
dataStyle: "layuiStyle",//指定风格 layui 风格
dataFormat: "list",// 指定数据格式 list 格式
response:{message:"msg",statusCode:200}, //指定响应数据的 状态码
url: "json/test/test2.json", // 使用url加载（可与data加载同时存在） 动态数据接口
checkbar: true,// 开启复选框
checkbarType: "all", // all
initLevel:2,// 展开层级关系
done:function(res,$obj){
//点击 对应节点
var params = dtree.chooseDataInit("demoTree", "001,002,003");
}
});
// dtree 点击事件
dtree.on("node('demoTree')" ,function(obj){
console.log("单击事件");
console.log(obj.param); // 点击当前节点传递的参数
console.log(obj.dom); // 当前节点的jquery对象
console.log(obj.childParams); // 当前节点的所有子节点参数
console.log(obj.parentParam); // 当前节点的父节点参数
});
//获取当前被选中的值
$("#getNowParamBtn").click(function(){
var param = dtree.getNowParam(DemoTree);
console.log(param);
});
//获取指定的节点值
$("#getParamBtn").click(function(){
var param = dtree.getParam("demoTree","001");
console.log(param);
});
//获取父节点
$("#getParentParamBtn").click(function(){
var param = dtree.getParentParam(DemoTree,"001001");
console.log(param);
});
//获取所有的父节点
$("#getAllParentParamBtn").click(function(){
var param = dtree.getAllParentParam(DemoTree,"001001");
console.log(param);
});
//获取子节点
$("#getChildParamBtn").click(function(){
var param = dtree.getChildParam(DemoTree,"001");
console.log(param);
});
//判断是否存在复选框被选中
$("#changeCheckbarNodesBtn").click(function(){
var flag = dtree.changeCheckbarNodes("demoTree");
console.log(flag);
});
//初始化选中的值
$("#dataInitBtn").click(function(){
var params = dtree.dataInit("demoTree", "001");
});
//初始化选中的复选框
$("#chooseDataInitBtn").click(function(){
var params = dtree.chooseDataInit("demoTree", "001,002,003");
});
//获取复选框被选中的值
$("#getCheckbarNodesParamBtn").click(function(){
var params = dtree.getCheckbarNodesParam("demoTree");
console.log(params);
});
//监听菜单展开收缩状态
dtree.on("changeTree(demoTree)",function(obj){
console.log(obj.param); // 点击当前节点传递的参数
console.log(obj.dom); // 当前节点的jquery对象
console.log(obj.show); // 节点展开为true，关闭为false
});
//监听复选框被点击
dtree.on("chooseDone(demoTree)",function(d){
console.log($(this));
//d 选中状态的节点
console.log(d);
console.log(d.checkbarParams);
});
});
</script>
</body>
</html>
