自定义easyui中tree搜索展示

本文介绍了一种在树形结构中进行模糊搜索的方法,通过递归遍历树节点并高亮显示匹配项,实现了对复杂树状数据的快速定位与筛选。此方法适用于前端开发中的动态树结构展示与交互。
			/*  只返回目标节点的第一级子节点,具体的用法和getChildren方法是一样的 */
			$.extend($.fn.tree.methods, {
				getLeafChildren: function(jq, params) {
					var nodes = [];
					$(params).next().children().children("div.tree-node").each(function() {
						nodes.push($(jq[0]).tree('getNode', this));
					});
					return nodes;
				}
			});

			function getSelectedone() {
				var search = $("#search").val(); //获取输入框内容
				var roots = $('#tt').tree('getRoots'); //获取根节点数组
				for (var i = 0; i < roots.length; i++) { //循环根节点数组
					var LeafChildrenone = $('#tt').tree('getLeafChildren', roots[i].target); //获取第一级子节点
					var Childrenone = $('#tt').tree('getChildren', roots[i].target); //获取根下所有子节点
					if (LeafChildrenone.length > 0) { //判断节点不为空
						var flagi = 0;//定义判断根节点是否折叠标识
						for (var k = 0; k < LeafChildrenone.length; k++) { //循环第一级节点
							var flag = true; //定义判断第一级节点是否折叠标识
							var Childrentwo = $('#tt').tree('getChildren', LeafChildrenone[k].target); //获取第一级下所有子节点
							if (Childrentwo.length > 0) {//判断有第二级节点进入
								for (var j = 0; j < Childrentwo.length; j++) { //循环第二级节点
									if (Childrentwo[j].text.indexOf(search) >= 0) {//模糊匹配,匹配进入
										flag = false;
										flagi += 1;
										$('#tt').tree('expand', roots[i].target);//展开根节点
										$('#tt').tree('expand', LeafChildrenone[k].target);//展开第一级节点
										$(Childrentwo[j].target).css("background-color", "yellow");//赋值样式
									}
								}
								if (flag) {//判断是否折叠第一级节点
									$('#tt').tree('collapse', LeafChildrenone[k].target);///折叠第一级节点
								}
							} else {//判断没有第二级节点进入
								if (LeafChildrenone[k].text.indexOf(search) >= 0) {//模糊匹配,匹配进入
									flagi += 1;
									$('#tt').tree('expand', roots[i].target);//展开根节点
									$(LeafChildrenone[k].target).css("background-color", "yellow");//赋值样式
								}
							}
							if (flagi == 0) {
								$('#tt').tree('collapse', roots[i].target);//折叠根节点
							}
						}
					} else {
						$('#tt').tree('collapse', roots[i].target);//折叠根节点
					}
				}
			}

效果图在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值