layui-treeTable 添加搜索功能
在树形表格头部加一个input框:
<div class="layui-inline">
<input class="layui-input" id="edt-search" value="" placeholder="输入关键字">
</div>
<button class="layui-btn" id="btn-search" type="button">搜索</button>
js中添加代码
//搜索
$(document).on("click","#btn-search",function() {
treeTable.openAll(dataTable);
setTimeout(function(){
select();
},200);//延迟搜索,因为树状列表展开与查询渲染存在冲突
});
function select(){
var keyword = $('#edt-search').val();
var searchCount = 0;
$('#auth-table').find('tbody tr td').each(
function() {
$(this).css('background-color','transparent');
var text = $(this).text();
if (keyword != ''&& text.indexOf(keyword) >= 0) {
$(this).css('background-color','rgba(250,230,160,0.5)');
if (searchCount == 0) {
$("#scrolldiv").animate({"scrollTop":$(this).offset().top - 50},500);
}
searchCount++;
}
});
if(searchCount == 0){
layer.msg("无匹配", {
icon : 4
});
}
if (keyword == '') {
layer.msg("请输入搜索内容", {
icon : 5
});
}
}
其中scrolldiv来源请看:
LayuiAdmin 滚动条设置问题解决
滚动条定位可以根据自己需要调整
结束