Layui Tree树节点：模糊查询高亮，获取选中节点，增删改

layui一般用于权限管理比较多，但不管博客们使用在哪个方向上，这里给你们一套完整的组件方便直接使用。

一：Layui官网还是有很多案例树形组件- 在线演示 - Layui，想了解的可以点进去了解一下。

 二：现在开始记录完整组件，首先展示HTML代码

	


搜索



确定

三：css样式的话 直接引入layui.css就可以了，可以去官网下载。

四：js功能的实现：

不加任何功能操作：data1的数据可以从官网copy一份过来

模糊查询，搜索框且绑定键盘Enetr

        // 绑定键盘Enter
				$("#tree_name").keydown(function(e) { //当按下按键时
					if (e.keyCode == 13) { //.which属性判断按下的是哪个键，回车键的键位序号为13
						$("#btn_query").trigger("click"); //触发搜索按钮的点击事件
						switchThing()
					}
				});
				// 点击搜索查询
				$('#btn_query').click(function() {
					switchThing()
				});
				// 封装搜索功能
				function switchThing() {
					var value = $("#tree_name").val();
					//console.log('value:', value);
					if (value) {
						//首选应将文本的颜色恢复正常
						var node = $("#test1");
						node.find('.layui-tree-txt').css('color', '');

						tree.reload('demoId', {}); //重载树，使得之前展开的记录全部折叠起来
						$.each(node.find('.layui-tree-txt'), function(index, elem) {
							elem = $(elem);
							let textTemp = elem.text();
							if (textTemp.indexOf(value) !== -1) { //查询相当于模糊查找
								elem.addClass("tree-txt-active");
								console.log('elem:', elem);
								elem.filter(':contains(' + value + ')').css('color',
									'#FFB800'); //搜索文本并设置标志颜色
							}
						});

						$.each($("#test1").find('.tree-txt-active'), function(index, elem) {
							elem = $(elem);
							// 展开所有父节点
							elem.parents('.layui-tree-set').each(function(i, item) {
								if (!$(item).hasClass('layui-tree-spread')) {
									$(item).find('.layui-tree-iconClick:first').click();
								}
							});
						});
					}
				}

获取选中的值

	            $("#sub").click(function() {
					//获取所有选中节点id数组
					var checkedData = tree.getChecked('demoId'); //获取选中节点的数据
					console.log(checkedData)
					var nodeIds = new Array();
					nodeIds = getCheckedId(checkedData);
					console.log(nodeIds);
				});


        // 获取所有选中的节点id
			function getCheckedId(data) {
				var id = "";
				$.each(data, function(index, item) {
					if (id != "") {
						id = id + "," + item.id;
					} else {
						id = item.id;
					}
					//item 没有children属性
					if (item.children != null) {
						var i = getCheckedId(item.children);
						if (i != "") {
							id = id + "," + i;
						}
					}
				});
				return id;
			}

五，组件完整代码，运行的时候，注意自己本地引入的地址：

	
		
		
		
		
		
		
	
	
		

			
		
		搜索
		

		确定
		
	

六：完整版效果图