<（树组件）搜索功能
layui版本：2.5.4
layui官⽹在2.5.0版本后才将树组件⽂档公布出来，实现⽅式和数据结构与之前的版本有了较⼤的改变。使⽤时发现搜索功能还未展⽰到⽂档中，参考 ⾃⼰改动了下。
效果演⽰
主体实现
// treeId: tree所在的容器的id
// filter: 对应的搜索框的selector或者dom对象
// callback: 回调参数(树节点jquery对象, 输⼊框对象, 匹配到的节点数量)
tree.syncLayuiTreeFilter=function(treeId, filter, callback){
let treeElem =$('#'+ treeId), filterElem =$(filter);
if(!filterElem.length ||!filterElem.length){
return;
}
// 搜索框的监听事件按实际需求来
filterElem.unbind('change').change(function(){
let that =this;//this;
let value =$(that).val().trim();
let HIDE='layui-hide';
let hintClass ='search_hit';
// 先恢复现场
treeElem.find('.'+HIDE).removeClass(HIDE);
treeElem.find('.'+ hintClass).removeClass(hintClass)
// 如果有值筛选开始
if(value){
$.each(treeElem.find('.layui-tree-txt'),function(index, elem){
jquery是什么功能组件elem =$(elem);
let textTemp = ();
if(textTemp.indexOf(value)===-1){
// 不存在就隐藏
elem.closest('.layui-tree-set').addClass(HIDE)
}else{
// 命中就添加⼀个class
elem.addClass(hintClass)
}
});
$.each(treeElem.find('.'+ hintClass),function(index, elem){
elem =$(elem);
/
/ 取消隐藏所有⽗节点
elem.parents('.layui-tree-set').removeClass(HIDE);
// 展开所有⽗节点
elem.parents('.layui-tree-set').each(function(i, item){
if(!$(item).hasClass('layui-tree-spread')){
$(item).find('.layui-tree-iconClick :first').click();
}
});
});
}
typeof callback ==='function'&& callback.call(that, treeElem, filterElem, treeElem.find('.'+ hintClass).length); });
};
tree.syncLayuiTreeFilter('test1','#search',function(treeElem, filterElem, hitNumbers){
console.log('hitNumbers', hitNumbers);
layer.msg('到'+ hitNumbers +'个节点');
});
树的初始化、点击⾏样式修改
layui.use('tree',function(){
let tree = ,
$ = layui.$;
// 测试数据
const data =[{
title:'湖北'//⼀级菜单
, children:[{
title:'武汉'//⼆级菜单
, children:[{
title:'江汉区'//三级菜单
},{
title:'洪⼭区'//三级菜单
},{
title:'江岸区'//三级菜单
},{
title:'汉阳区'//三级菜单
}]
}]
},{
title:'浙江'//⼀级菜单
, children:[{
title:'杭州'//⼆级菜单
, children:[{
title:'西湖区'//三级菜单
},{
title:'上城区'//三级菜单
},{
title:'下城区'//三级菜单
},{
title:'滨江区'//三级菜单
}]
}]
},{
title:'陕西'//⼀级菜单
, children:[{
title:'西安'//⼆级菜单
}]
}];
/
/渲染
elem:'#test1'//绑定元素
, data: data
, onlyIconControl:true
, click:function(obj){
layer.msg(obj.data.title);
}
});
// 树点击样式修改
$("body").on("click",".layui-tree-txt",function(){
$(".layui-tree-entry").removeClass("current");
$(this).parent().parent().addClass("current");
});
});
点击修改样式其实只是加了个背景⾊，可按⾃⼰需要定义
<style>
.current{background-color: #dbeef5}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。