layui-Dtree树结构_layui dtree-CSDN博客

本文链接：https://blog.csdn.net/qq_48164590/article/details/122232614

本文详细介绍了layui Dtree组件的下载、数据格式（包括标准、list和layui风格），并展示了如何通过代码实现树结构、节点监听和带复选框的树。涵盖了事件处理和常见应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

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:'提交信息'
					});
		        	});