@[toc]
layui-Dtree树结构
看效果
一、Dtree的下载
https://www.wisdomelon.com/DTreeHelper/
二、数据格式
2.1 标准格式
dtree.render({
elem: "#dataTree1",
url: "../../../json/case/dataTree.json"
});
json的数据格式
{
"status":{
"code":200,"message":"操作成功"},
"data": [
{
"id":"001","title": "湖南省","parentId": "0","children":[]},
{
"id":"002","title": "湖北省","parentId": "0","children":[]},
{
"id":"003","title": "广东省","parentId": "0","children":[]},
{
"id":"004","title": "浙江省","parentId": "0","children":[]},
{
"id":"005","title": "福建省","parentId": "0","children":[]}
]
}
2.2 list类型
dtree.render({
elem: "#dataTree2",
url: "../../../json/case/dataTree2.json",
dataFormat: "list", //配置data的风格为list
checkbar:true //开启复选框
});
json格式
{
"status":{
"code":200,"message":"操作成功"},
"data": [
{
"id":"001","title": "湖南省","checkArr": "0","parentId": "0"},
{
"id":"002","title": "湖北省","checkArr": "0","parentId": "0"},
{
"id":"003","title": "广东省","checkArr": "0","parentId": "0"},
{
"id":"004","title": "浙江省","checkArr": "0","parentId": "0"},
{
"id":"005","title": "福建省","checkArr": "0","parentId": "0"},
{
"id":"001001","title": "长沙市","checkArr": "0","parentId": "001"},
{
"id":"001002","title": "株洲市","checkArr": "0","parentId": "001"},
{
"id":"001003","title": "湘潭市","checkArr": "0","parentId": "001"},
{
"id":"001004","title": "衡阳市","checkArr": "0","parentId": "001"},
{
"id":"001005","title": "郴州市","checkArr": "0","iconClass": "dtree-icon-caidan_xunzhang","parentId": "001"}
]
}
2.3 layui+list集合数据格式
dtree.render({
elem: "#dataTree3",
url: "../../../json/case/dataTree2.json",
dataStyle: "layuiStyle", //使用layui风格的数据格式
dataFormat: "list", //配置data的风格为list
response:{
message:"msg",statusCode:0}, //修改response中返回数据的定义
checkbar:true //开启复选框
});
json格式
{
"code":0,
"msg":"操作成功",
"data": [
{
"id":"001","title": "湖南省","checkArr": "0","parentId": "0"},
{
"id":"002","title": "湖北省","checkArr": "0","parentId": "0"},
{
"id":"003","title": "广东省","checkArr": "0","parentId": "0"},
{
"id":"004","title": "浙江省","checkArr": "0","parentId": "0"},
{
"id":"005","title": "福建省","checkArr": "0","parentId": "0"},
{
"id":"001001","title": "长沙市","checkArr": "0","parentId": "001"},
{
"id":"001002","title": "株洲市","checkArr": "0","parentId": "001"},
{
"id":"001003","title": "湘潭市","checkArr": "0","parentId": "001"},
{
"id":"001004","title": "衡阳市","checkArr": "0","parentId": "001"},
{
"id":"001005","title": "郴州市","checkArr": "0","iconClass": "dtree-icon-caidan_xunzhang","parentId": "001"}
]
}
三 、代码实现
<%@ 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="resourse/layui/css/layui.css" media="all">
<link rel="stylesheet" href="resourse/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="resourse/layui_ext/dtree/font/dtreefont.css">
</head>
<body>
<ul id="dataTree3" class="dtree" data-id="0" ></ul>
<script src="resourse/layui/layui.js"></script>
<script>
layui.extend({
dtree:'resourse/layui_ext/dist/dtree'
}).use([ 'dtree', 'laydate','jquery','layer','form' ], function() {
var $=layui.jquery;
var table = layui.table;
var form=layui.form;
var dtree=layui.dtree;
var laydate = layui.laydate;
//初始化树-基本数据格式
<!--
var DemoTree = dtree.render({
elem: "#demoTree",
url: "resourse/layui_ext/json/case/asyncTree1.json" ,// 使用url加载（可与data加载同时存在）
});
-->
//list类型
<!--
dtree.render({
elem: "#dataTree2",
url: "resourse/layui_ext/json/case/asyncTree2.json",
dataFormat: "list", //配置data的风格为list
checkbar:true //开启复选框
});
-->
//layui+list集合数据格式
dtree.render({
elem: "#dataTree3",
url: "resourse/layui_ext/json/case/asyncTree3.json",
dataStyle: "layuiStyle", //使用layui风格的数据格式
dataFormat: "list", //配置data的风格为list
response:{
message:"msg",statusCode:0}, //修改response中返回数据的定义
checkbar:true //开启复选框
});
});
</script>
</body>
</html>
四、Dtree的事件监听
4.1 图标监听
dtree.on("changeTree('dataTree2')" ,function(obj){
console.log(obj.param); // 点击当前节点传递的参数
console.log(obj.dom); // 当前节点的jquery对象
console.log(obj.show); // 节点展开为true，关闭为false
});
4.2 节点监听（重点）
dtree.on("node('dataTree2')" ,function(obj){
console.log(obj.param); // 点击当前节点传递的参数
console.log(obj.dom); // 当前节点的jquery对象
console.log(obj.childParams); // 当前节点的所有子节点参数
console.log(obj.parentParam); // 当前节点的父节点参数
});
4.3 节点双击事件
dtree.on("nodedblclick('dataTree2')" ,function(obj){
console.log(obj.param); // 点击当前节点传递的参数
console.log(obj.dom); // 当前节点的jquery对象
console.log(obj.childParams); // 当前节点的所有子节点参数
console.log(obj.parentParam); // 当前节点的父节点参数
});
五、带有复选框的Dtree
$("#requestValue").click(function () {
var params = dtree.getCheckbarNodesParam("dataTree2"); //获取复选框的值
layer.alert(JSON.stringify(params),{
title:'提交信息'
});
});
好了，今天的分享就到这里了哦
