效果如下:
一个不支持关键字搜索的树不是一个德智体美全面发展的好树,看了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