layui-treeTable v2.0添加搜索功能

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 滚动条设置问题解决

滚动条定位可以根据自己需要调整


结束

上一篇:dgango中admin下添加搜索功能


下一篇:android中广播的使用