layui tree 节点搜索,dom

form.on('submit(searchUnit)', function(params){
	var treeElem = $('#treeList'), filterElem = $('[name="keyword"]');
	        if (!filterElem.length || !filterElem.length) {
	            return;
	        }
	
	        var value = filterElem.val();
	        var HIDE = 'layui-hide';
	        var hintClass = 'search_hit';
	        // 先恢复现场
	        treeElem.find('.' + HIDE).removeClass(HIDE);
	        treeElem.find('.' + hintClass).removeClass(hintClass).each(function (index, item) {
	            item = $(item);
	            item.html(item.data('textOld')).data('textOld', null);
	        });
	        // 如果有值筛选开始
	        if (value) {
	            layui.each(treeElem.find('.layui-tree-entry'), function (index, treeElem) {
	                var elem = $(treeElem);
	
	                console.dir(elem);
	
	                var textTemp = elem.text();
	
	                if (textTemp.indexOf(value) === -1) {
	                    // 不存在就隐藏
	                    elem.closest('div').addClass(HIDE);
	                } else {
	                    // 命中就添加一个class
	                    elem.find('.layui-tree-txt').addClass(hintClass)
	                        .data('textOld', textTemp)
	                        .html(textTemp.replace(new RegExp(value, 'g'), '<span class="search_hint_text">' + value + '</span>'));
	                }
	            });
	
	            layui.each(treeElem.find('.' + hintClass), function (index, treeElem) {
	                var elem = $(treeElem);
	                var parentElem=elem.parents('div').parent('div').prev();
	                //展示父节点
	                parentElem.removeClass(HIDE);
	                //展示子节点     //在搜索值为中间级别的时候,搜索结果会导致叶子节点的图标变成"+",未解决
	                elem.parents('div').parent('div').next().children('div').children('div').removeClass(HIDE);
	
	                console.log(parentElem.find(".layui-icon-addition"));
	            });
	        }
})

大佬们,如果有前端对数据搜索的可以交流,查了好多只能对DOM 操作

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值