自定义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);//折叠根节点
					}
				}
			}

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

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ASP.NET MVC EasyUI-Tree 是一种用于在ASP.NET MVC应用程序实现树状结构的开源插件。它基于EasyUI框架,为开发人员提供了一种简单而强大的方式来展示和操作树形数据。 使用ASP.NET MVC EasyUI-Tree可以实现以下功能: 1. 数据展示:可以将树状数据以层级结构展示出来,帮助用户更直观地理解数据之间的关系。 2. 数据操作:可以对树状数据进行增加、编辑和删除等操作,使用户可以方便地对树节点进行维护和管理。 3. 数据筛选:可以通过设置过滤条件实现对树状数据的快速筛选,只显示符合条件的节点。 4. 数据排序:可以对树状数据进行排序,按照特定字段的升序或降序排列。 5. 数据搜索:可以通过关键字搜索来快速定位包含特定内容的节点。 6. 数据导入/导出:可以将树状数据导入到Excel等格式文件,或者将外部数据导入到树状结构。 7. 数据异步加载:对于大量数据,可以采用异步加载的方式实现分页加载,提升性能和用户体验。 使用ASP.NET MVC EasyUI-Tree需要进行一些配置和编写代码,但整体来说相对容易上手。它提供了丰富的API和事件以供开发人员自定义和扩展,能够满足不同需求的应用场景。 总而言之,ASP.NET MVC EasyUI-Tree是一个强大而易用的工具,能够帮助开发人员在ASP.NET MVC应用程序轻松地实现树状结构的展示和操作。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值