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>