layui 树的操作

最新推荐文章于 2024-05-23 12:27:27 发布
最新推荐文章于 2024-05-23 12:27:27 发布
阅读量1.5k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41532872/article/details/95764171
版权

1，下载
在这里插入图片描述
在这里插入图片描述
1，关于json
使用list类型的json

{
	"code":0,
	"msg":"操作成功",
	"data":[{
		"id":"001",
		"title": "湖南省",
		"checkArr": [{"type": "0", "isChecked": "0"}],
		"parentId": null
	},{
		"id":"002",
		"title": "湖北省",
		"checkArr": [{"type": "0", "isChecked": "0"}],
		"parentId": null
	},{
		"id":"003",
		"title": "广东省",
		"checkArr": [{"type": "0", "isChecked": "0"}],
		"parentId": null
	},{
		"id":"004",
		"title": "浙江省",
		"checkArr": [{"type": "0", "isChecked": "0"}],
		"parentId": null
	},{
		"id":"005",
		"title": "福建省",
		"checkArr": [{"type": "0", "isChecked": "0"}],
		"parentId": null
	},{
		"id":"001001",
		"title": "长沙市",
		"checkArr": [{"type": "0", "isChecked": "0"}],
		"parentId": "001"
	},{
		"id":"001002",
		"title": "株洲市",
		"checkArr": [{"type": "0", "isChecked": "0"}],
		"parentId": "001"
	},{
		"id":"001003",
		"title": "湘潭市",
		"checkArr": [{"type": "0", "isChecked": "0"}],
		"parentId": "001"
	},{
		"id":"001004",
		"title": "衡阳市",
		"checkArr": [{"type": "0", "isChecked": "0"}],
		"parentId": "001"
	},{
		"id":"001005",
		"title": "郴州市",
		"checkArr": [{"type": "0", "isChecked": "0"}],
		"parentId": "001"
	}]
}

1，普通树

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dTree</title>
<!-- 引入样式 -->
<link href="/resources/layui/css/layui.css" rel="stylesheet" type="text/css">
<link href="/resources/layui/layui-ext/dtree/dtree.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="/resources/layui/layui-ext/dtree/font/dtreefont.css">

</head>
<body style="margin: 10px">



<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript" src="/resources/layui/layui-ext/dtree/dtree.js"></script>
</body>

<ul id="demoTree" class="dtree"></ul>

<script type="text/javascript">
layui.extend({
    dtree: '{/}resources/layui/layui-ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
  }).use(['dtree','layer','jquery'], function(){
    var dtree = layui.dtree, layer = layui.layer, $ = layui.jquery;
   $.get("/json/dtree3_list.json",function(obj){
	   var demoTree = dtree.render({
		      elem: "#demoTree",
		      data: obj.data,
		      dataFormat: "list",
		      initLevel: 1
		    });
   })
    
    dtree.on("node('demoTree')" ,function(obj){
      layer.msg(JSON.stringify(obj.param));
    });
  });
</script>

</html>

2，下拉树

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dTree</title>
<!-- 引入样式 -->
<link href="/resources/layui/css/layui.css" rel="stylesheet" type="text/css">
<link href="/resources/layui/layui-ext/dtree/dtree.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="/resources/layui/layui-ext/dtree/font/dtreefont.css">
<style type="text/css">
#test{position: absolute;max-height: 500px;height: 350px;overflow: auto;width: 100%;z-index: 123;display: none;border:1px solid silver;top: 42px;}
.layui-show{display: block!important;}
</style>
</head>
<body style="margin: 10px">


<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript" src="/resources/layui/layui-ext/dtree/dtree.js"></script>
</body>

<fieldset class="layui-elem-field layui-field-title" id="csk">
					<legend>下拉框树的简易实现</legend>
					<div class="layui-field-box">
						<div class="layui-row layui-col-space10" style="margin-top: 10px;">
							<div class="layui-col-lg12">
								<div class="layui-form layui-form-panel">
									<div class="layui-form-item">
										<label class="layui-form-label">城市：</label>
										<div class="layui-input-block">
											<div class="layui-unselect layui-form-select" id="city">
												<div class="layui-select-title">
													<input type="hidden" name="city_id" id="city_id">
													<input type="text" name="city" id="input_city" placeholder="请选择" readonly="" class="layui-input layui-unselect">
													<i class="layui-edge"></i>
												</div>
											</div>
											<div class="layui-card" id="test">
												<div class="layui-card-body">
													<div id="toolbarDiv"><ul id="slTree" class="dtree"  style="width: 100%;"></ul></div>
												</div>
											</div>
											
										</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label">备注：</label>
										<div class="layui-input-block">
											<input type="text" id="level" name="level" class="layui-input"/>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</fieldset>
				
				<input type="button" value="得到值" id="getValue" >

<script type="text/javascript">
layui.extend({
    dtree: '{/}resources/layui/layui-ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
  }).use(['dtree','layer','jquery'], function(){
    var dtree = layui.dtree, layer = layui.layer, $ = layui.jquery;
   $.get("/json/dtree3_list.json",function(obj){
	   var demoTree = dtree.render({
		      elem: "#slTree",
		      data: obj.data,
		      dataFormat: "list",
		      initLevel: 1,
		      accordion:true,
		      
		    });
   })
   $("#city").on("click",function(){
			$(this).toggleClass("layui-form-selected");
			$("#test").toggleClass("layui-show layui-anim layui-anim-upbit");
	});
   	 dtree.on("node(slTree)", function(obj){
			$("#input_city").val(obj.param.context);
			console.log(obj);
			$("#city_id").val(obj.param.nodeId);
			$("#city").toggleClass("layui-form-selected");
			$("#test").toggleClass("layui-show layui-anim layui-anim-upbit");
		});
   	 
   	 $("#getValue").click(function(){
   		var node=$("#city_id").val();
   		alert(node);
   	 });
  });
</script>

</html>

3，复选树
要求json里面必须有
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dTree</title>
<!-- 引入样式 -->
<link href="/resources/layui/css/layui.css" rel="stylesheet" type="text/css">
<link href="/resources/layui/layui-ext/dtree/dtree.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="/resources/layui/layui-ext/dtree/font/dtreefont.css">

</head>
<body style="margin: 10px">



<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript" src="/resources/layui/layui-ext/dtree/dtree.js"></script>
</body>

<ul id="demoTree" class="dtree"></ul>

<input type="button" value="得到选中值" id="getValue">
<script type="text/javascript">
layui.extend({
    dtree: '{/}resources/layui/layui-ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
  }).use(['dtree','layer','jquery'], function(){
    var dtree = layui.dtree, layer = layui.layer, $ = layui.jquery;
   $.get("/json/dtree3_list.json",function(obj){
	   var demoTree = dtree.render({
		      elem: "#demoTree",
		      data: obj.data,
		      initLevel: 1,
		      dataFormat: "list",
		      checkbar:true
		    });
   })
    
    dtree.on("node('demoTree')" ,function(obj){
      layer.msg(JSON.stringify(obj.param));
    });
   
   $("#getValue").click(function(){
	   var params = dtree.getCheckbarNodesParam("demoTree");
	   for(var i=0;i<params.length;i++){
		   alert(JSON.stringify(params[i]));
	   }
   })
  });
</script>

</html>
司天宏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui dtree树形结构
03-15
layui dtree树形结构，点击文本框显示下拉树结构。
layui.dtree下拉树踩坑
halele131的博客
07-15 2203
提示：针对dtree版本v2.5.7 文章目录前言-下拉树实现描述一、单击选中bug二、使用reload()重新加载数据（data方式）三、实现reload，严格控制reload在init后，否则会出现“方法获取失败，请检查ID或对象传递是否正确”。 前言-下拉树实现描述 该需求应用于手机端页面展示，为了使页面样式加载平衡，使页面元素尽可能接近原生客户端效果，避免其他表单元素加载完成但下拉框加载慢导致的短暂空白块造成不好的用户体验。因此设计逻辑为进入页面先加载下拉框，然后获取数据再重新渲染下拉树。 $(f
SpringBoot+layuimini实现角色权限菜单增删改查（layui扩展组件 dtree）
最新发布
m0_46590717的博客
05-23 668
SpingBoot 加layui实现角色资源菜单管理
layui-Dtree树结构
code袁的博客
12-30 5124
layui-Dtree树结构 看效果 一、Dtree的下载 https://www.wisdomelon.com/DTreeHelper/
Layui第三方Dtree的使用——简单记录
qq_20741133的博客
10-25 9159
一、 最近使用layui做了个项目，由于合同额小，也不需要太多繁琐复杂的处理，于是前端选用的layui。但是用到layui的树时，layui对树支持的不太好，后来找到了Dtree这个第三方插件。 二、 官网：http://www.wisdomelon.com/DTreeHelper/ 里面有很多示例和使用帮助，我要实现的是，点一个input标签，然后打开一个树页面，选取一个节点，然后把选中的节点信...
layui中使用Dtree,引入checkbar属性后仍不显示复选框（解决办法）
weixin_38345306的博客
11-30 791
layui中使用Dtree,引入checkbar属性后仍不显示复选框（解决办法）
layuidtree — dtree
羽渡尘的博客
04-04 4289
layuidtree — dtree
layui树形下拉菜单
07-30
二、layui树形下拉菜单的核心概念 1. Tree组件：layui的Tree组件用于展示具有层级关系的数据，可以方便地进行展开、折叠、选择等操作。 2. 下拉菜单：在HTML中，下拉菜单通常由`<select>`和`<option>`元素组成，但在...
基于layui实现树形穿梭框
05-22
- 数据格式要求：layui树形穿梭框的数据格式通常为数组，每个元素包含id、pid（父节点ID）、name等字段。 - 错误处理：处理可能出现的网络错误、数据格式错误等问题，提供友好的用户体验。 - 兼容性：虽然layui...
Layui树形表格.rar
06-11
2. **复选框联动(半选)**：在多选操作中，Layui树形表格提供了复选框功能，支持全选、反选以及半选状态。当父节点被选中时，其所有子节点都会被选中；反之，如果所有子节点都选中，父节点也会被自动选中。这种联动...
Layui的树形表格treeTable
06-20
在Layui中，树形表格（treeTable）是一种非常实用的功能，它将传统的表格与树状结构相结合，适用于展示具有层级关系的数据，如部门结构、文件目录等。下面我们将深入探讨Layui的treeTable，以及如何实现无限层级的树...
layui树形下拉菜单完整实例
10-31
在“layui树形下拉菜单完整实例”中，我们主要关注的是如何将tree组件与下拉菜单相结合，实现如初始化、动态赋值以及获取选中值等关键功能。 首先，让我们了解layui的tree组件。tree组件是layui提供的一种用于展示...
Layui之动态树(树形菜单)详解
ChatYU的博客
07-12 3353
树形菜单的展示及编写，菜单栏的级别
【layui2.8 tree组件】点击(click)节点名 实现 勾选 / 取消 状态
aadnf的博客
01-05 996
【layui2.8 tree组件】点击 节点(click)实现 勾选 / 取消 状态
Layui踩坑记录
Januea的博客
12-09 447
layui踩坑记录
dtree.js 树结构点击父节点异步加载子节点数据
wan小小冰的博客
11-24 4196
由于此次项目开发框架使用layui，里面的树结构自然想到了使用dtree,功能需求是选择省份下的企业，由于企业数据达到上万家，一次性将所有的数据加载出来会造成页面卡顿，由此想到先加载行政区划再根据点击事件获取 ...
Layui Tree树节点：模糊查询高亮，获取选中节点，增删改
qq_45904018的博客
04-06 2002
layui一般用于权限管理比较多，但不管博客们使用在哪个方向上，这里给你们一套完整的组件方便直接使用。Layui官网还是有很多案例。
layui-dTree显示不出来且前台报错
高等游民の博客
12-12 1081
layui-dTree显示不出来且前台报错 Cannot read property 'parents' of null 检查过后发现layer并没有使用到，找不到任何办法解决。 最后删除了response中的statusCode:0 树组件显示出来了。 正确的代码如下 // 初始化树 deptTree= dtree.render({ ...
layui dtree使用时的坑
眼睛
03-23 3043
在使用layui dtree的过程中，初始化树时，后台可以拿到数据，数据的格式多次确定是无误的， 看了多次的文档 ，将文档中的复制粘贴，可是依然无法在前台页面显示树的结构。 我尝试了将 dataFormat: "list", 这个去掉，发现数据显示出来了，可是不是层级的显示。 找了多次的数据，才发现，不是我的代码有错误。 我在仔细看我请求出来的数据时，总节点的父节点是null， ...
layui 树行table 下载
09-01
Layui是一种简单易用的前端框架，可用于快速构建网页界面。而Layui树形表格则是Layui框架中的一个功能强大的组件，可以方便地实现可展开、收缩的树状结构，并且与表格数据进行结合，实现数据的展示与操作。 要实现Layui树形表格的下载功能，我们可以按照以下步骤进行操作： 1. 引入Layui框架和Layui树形表格插件。在HTML文件的头部中引入Layui的核心库layui.js和样式文件layui.css，以及Layui树形表格插件layui.treeGrid.js。 2. 创建一个包含树形表格的容器。在HTML文件中，通过一个div元素来创建一个容器，设置一个唯一的id，用于后续的渲染。 3. 使用JavaScript代码渲染树形表格。在JavaScript代码中，通过调用layui.treeGrid的render()方法，传入容器的id和相应的配置项，来渲染树形表格。 4. 设置下载按钮。在HTML文件中，创建一个下载按钮，通过点击按钮触发下载操作。 5. 编写下载操作的JavaScript代码。通过JavaScript代码，监听下载按钮的点击事件，获取表格数据，并将数据进行处理，生成需要下载的文件（如Excel文件），再通过浏览器下载的方式将文件保存到本地。 最后，通过以上步骤的操作，就可以实现Layui树形表格的下载功能了。这样用户可以方便地将表格数据以文件的形式保存到本地，方便后续的查看和处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值