树形结构 - layui.tree_layui 树形结构搜索-CSDN博客

本文链接：https://blog.csdn.net/weixin_41916005/article/details/81131438

最近公司项目有点多一段时间没有更新，刚完成的一个项目用到了tree树形结构有一些使用心得分享一下.

开始是想使用zTree -- jQuery 控件，后来还是选用了基于layui的树形控件，因为项目后台管理界面都是用到layui，风格上统一一下感觉会好点（有点强迫症- -!）,废话不多说上菜。。

需要引用四个文件jquery，layui.css，layui.js，layui-xtree.js，这几个文件可以在下面码云获取

一引用文件

<link rel="stylesheet" href="css/layui.css">
		<script src="layui-xtree.js"></script>
		<script src="layui.js"></script>
		<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css">
		form {
			width: 500px;
			margin: 10px auto;
		}
		
		h1,
		h2,
		h3 {
			padding: 10px 0;
		}
		
		a {
			text-align: right;
			font-size: 18px;
			color: #1C86EE;
		}
		
		.xtree_contianer {
			width: 500px;
			border: 1px solid #9C9C9C;
			overflow: auto;
			margin-bottom: 30px;
			background-color: #fff;
			padding: 10px 0 25px 5px;
		}
		
		.div-btns {
			margin: 20px 0;
		}
		
		.layui-form-label {
			width: 60px !important;
		}
	</style>

二设置tree容器

<body>
		<form class="layui-form">
			<div id="YQtree" class="xtree_contianer"></div>
			<button lay-submit lay-filter="*">提交</button>
		</form>

	</body>

三初始化

使用layui要先use模块初始化，不然会报错

<script type="text/javascript">
		var json = [{
			"title": "后台管理",
			"value": "R000001",
			"checked": false,
			"disabled": false,
			"data": []
		}, {
			"title": "退出",
			"value": "R000002",
			"checked": false,
			"disabled": false,
			"data": []
		}, {
			"title": "前台",
			"value": "R000003",
			"checked": true,
			"disabled": false,
			"data": []
		}, {
			"title": "云数码管理",
			"value": "R000004",
			"checked": true,
			"disabled": false,
			"data": []
		}, {
			"title": "网站注册",
			"value": "R000005",
			"checked": false,
			"disabled": false,
			"data": []
		}, {
			"title": "用户信息管理",
			"value": "R000006",
			"checked": false,
			"disabled": false,
			"data": []
		}, {
			"title": "设置",
			"value": "R000007",
			"checked": false,
			"disabled": false,
			"data": [{
				"title": "菜单管理",
				"value": "R000008",
				"checked": false,
				"disabled": false,
				"data": []
			}, {
				"title": "角色管理",
				"value": "R000009",
				"checked": false,
				"disabled": false,
				"data": []
			}, {
				"title": "页面管理",
				"value": "R000010",
				"checked": false,
				"disabled": false,
				"data": []
			}]
		}];

		layui.use(['form'], function() {
			var form = layui.form;
			var formData;
			form.on('submit(*)', function(data) {
				debugger;
				console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
			var xtree = new layuiXtree({
				elem: 'YQtree',
				form: form //(必填) layui 的 from
					,
				data: json //(必填) json数据
					,
				isopen: false //加载完后关闭
					,
				ckall: true,
				ckallback: function(data) {
					debugger;
					console.log(1)
				},
				click: function(data) { //节点选中状态改变事件监听，全选框有自己的监听事件
					console.log(data.elem); //得到checkbox原始DOM对象
					console.log(data.elem.checked); //开关是否开启，true或者false
					console.log(data.value); //开关value值，也可以通过data.elem.value得到
					console.log(data.othis); //得到美化后的DOM对象
				},
				icon: { //三种图标样式，更改几个都可以，用的是layui的图标
					open: "&#xe7a0;" //节点打开的图标
						,
					close: "&#xe622;" //节点关闭的图标
						,
					end: "&#xe621;" //末尾节点的图标
				},
				color: { //三种图标颜色，独立配色，更改几个都可以
					open: "#EE9A00" //节点图标打开的颜色
						,
					close: "#EEC591" //节点图标关闭的颜色
						,
					end: "#828282" //末级节点图标的颜色
				}

			});

			//获取全部[选中的][末级节点]原checkbox DOM对象，返回Array

			$("#btn1").click(function() {
				debugger;
				var oCks = xtree.GetChecked(); //这是方法

				for(var i = 0; i < oCks.length; i++) {
					console.log(oCks[i].value);
				}
			})

			//获取全部原checkbox DOM对象，返回Array
			$("#btn1").click(function() {
				debugger;
				var oCks = xtree.GetAllCheckBox(); //这是方法

				for(var i = 0; i < oCks.length; i++) {
					console.log(oCks[i].value);
				}
			})

			//更新数据，重新渲染
			$("#btn1").click(function() {
				debugger;
				xtree.render();
			})

			//通过value值找父级DOM对象，顶级节点与错误值均返回null
			$("#btn1").click(function() {
				debugger;
				var oCks = xtree.GetParent(document.getElementById('txt1').value); //这是方法

				if(oCks != null) { //如果返回的对象不为null，则获取到父节点了，如果为null，说明这个值对应的节点是一级节点或是值错误
					console.log(oCks.value);
				} else {
					console.log('无父级节点或value值错误');
				}

			})

		});
	</script>

参数的一些介绍： elem:body定义容器的id,
data：可以静态的放置json，也可以放入获取数据的端口,
disabled：bool 是否可选（json结构）,
checked：bool 默认选中状态（json结构）,
click:节点选中状态改变事件监听,
icon:设置样式图标,
color:设置图标颜色，

保存提交状态，首先创建一个数组然后调用封装好的GetChecked（）方法，获取到所有选中的checked，遍历得到的这些选中checked，然后push到数组里提交。

恶霸先生趟过的一个坑：

这个控件json的数据结构过于简单，试着尝试能否添加一些结构，发现比较麻烦需要重新定义编写（恶霸先生太懒- -！），又尝试在value里面定义对象需要进一步解析和定义差不多了，最简单的暴力的方法直接value对应的值以字符串拼接的形式存入需要用时在进行截取。

接触这个控件时间太仓促，暂时没有找到更好的方法，大家有更好的方法可以留言，后续找到也会进行更新，欢迎大家指教学习共同进步。