改造layui-树(tree)组件支持树的关键字搜索操作

效果如下:

一个不支持关键字搜索的树不是一个德智体美全面发展的好树,看了layui源码后发现官方其实提供了tree的搜索功能

找到tree.js文件在基础配置这里发现showSearch,原来官方把这里注释掉了,放开注释就行(我下的版本里是注释掉的,可以看看自己的版本如果没有可以自己加上就行)

接下来我们在当前页面搜showSearch字段找到如下

可以看到在树上面自己添加了一个搜索框,所以当我们showSearch设为true的时候不用自己写搜索框

然后全局搜layui-tree-search找到监听搜索输入框输入的方法

官方自己写的方法我做了调整,因为我们希望搜索完成后树自动展开,所以我自己加了几行代码使结果树展开

下面是修改后的所有代码

//搜索
		that.elem.find('.layui-tree-search').on('keyup', function() {
			var input = $(this),
				val = input.val(),
				pack = input.nextAll(),
				arr = [];
			//遍历所有的值
			pack.find('.' + ELEM_TEXT).each(function() {
				var entry = $(this).parents('.' + ELEM_ENTRY);
				//若值匹配,加一个类以作标识
				if ($(this).html().indexOf(val) != -1) {
					arr.push($(this).parent());
					var parentNode = $(pack).find('.layui-icon.layui-icon-addition');

					if (parentNode.length > 0) {
						parentNode.each(function() {
							$(this).attr('class', 'layui-icon layui-icon-subtraction');
						})
					}
					var select = function(div) {
						div.addClass('layui-tree-searchShow layui-tree-spread');
						$(div.parent('.' + ELEM_PACK)[0]).css('display', 'block');
						//向上父节点渲染
						if (div.parent('.' + ELEM_PACK)[0]) {
							select(div.parent('.' + ELEM_PACK).parent('.' + ELEM_SET));
						};
					};
					select(entry.parent('.' + ELEM_SET));
				};
			});

			//根据标志剔除
			pack.find('.' + ELEM_ENTRY).each(function() {
				var parent = $(this).parent('.' + ELEM_SET);
				if (!parent.hasClass('layui-tree-searchShow')) {
					parent.addClass(HIDE);
				};
			});
			if (pack[0].className.indexOf('layui-tree-searchShow') == -1 && pack.find('.layui-tree-searchShow').length == 0) {
				that.elem.append(that.elemNone);
			};
			//节点过滤的回调
			options.onsearch && options.onsearch({
				elem: arr
			});
		});

		//还原搜索初始状态
		that.elem.find('.layui-tree-search').on('keydown', function() {
			$(this).nextAll().find('.' + ELEM_ENTRY).each(function() {
				var parent = $(this).parent('.' + ELEM_SET);
				parent.removeClass('layui-tree-searchShow ' + HIDE);
			});
			if ($('.layui-tree-emptyText')[0]) $('.layui-tree-emptyText').remove();
		});

原代码我改过也没保存大概就是这个区域的代码,可以自行对比区别

使用:最后只要在初始化树的时候设置showSearch为true

猜你喜欢

转载自blog.csdn.net/liona_koukou/article/details/100513917