layui-dtree插件

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

layui-dtree插件
Dtree
Dtree基本使⽤:
1. 下载dtree相关js插件
2. 在页⾯中引⼊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">
3. 初始化dtree组件
<script type="text/javascript">
layui.extend({
dtree: '{/}layui_ext/dtree/dtree'
}).use(['dtree','layer','jquery'],function(){
//初始化组件
var dtree = layui.dtree;
var layer = yer;
var $ = layui.jquery;
});
</script>
4. 创建dtree容器

<ul id="demoTree" class="dtree" data-id="0"></ul>
5. 初始化树形结构
<script type="text/javascript">
layui.extend({
dtree: '{/}layui_ext/dtree/dtree'
}).use(['dtree','layer','jquery'],function(){
// 初始化组件
var dtree = layui.dtree;
var layer = yer;
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 = yer;
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 = yer;
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>。