layui

Dtree

Dtree基本使用:

  1. 下载dtree相关js插件

    https://gitee.com/miniwatermelon/DTreeHelper/repository/archive/master.zip

    https://fly.layui.com/extend/dtree/#download

  1. 在页面中引入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">

  2. 初始化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>

  3. 创建dtree容器

     <!-- 树形结构的容器 --> 
 <ul id="demoTree" class="dtree" data-id="0"></ul>

  4. 初始化树形结构

    <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>&nbsp;
  	
  	<button id="getParamBtn">获取指定节点的值</button>&nbsp;
  	<button id="getParentParamBtn">获取父节点</button>&nbsp;
  	<button id="getAllParentParamBtn">获取所有的父节点</button>&nbsp;
  	<button id="getChildParamBtn">获取所有的子节点</button>&nbsp;
  	<button id="changeCheckbarNodesBtn">判断复选框状态是否改变</button>&nbsp;
  	<button id="dataInitBtn">初始化选中的值</button>&nbsp;
  	<button id="chooseDataInitBtn">初始化选中的复选框</button>&nbsp;
  	<button id="getCheckbarNodesParamBtn">获取复选框被选中的值</button>&nbsp;
  
  </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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/lyang-a/p/15079056.html