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

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

结束

转载于:https://www.cnblogs.com/zktww/p/11557654.html

layui-treeTable v2.0添加搜索功能相关推荐

PMCAFF | 锤子科技产品经理朱萧木介绍 Smartisan OS 2.0 语音搜索功能
在锤子科技他的工号是0001 他是罗永浩招聘的第一位员工他31岁个头高挑蓄着马尾像个艺术家他是锤子科技的产品总监他叫朱萧木朱萧木介绍 Smartisan OS 2.0 语音搜索功能昨 ...
迷你播放器--第一阶段（5）--添加搜索功能--autoCompleteBox的使用
迷你播放器--第一阶段(5) 添加搜索功能--autoCompleteBox的使用; 本文章为CSDN作者原创,转载请保留出处:http://blog.csdn.net/lrs0304/article ...
android开发访问百度搜索,Android开发如何添加搜索功能———大神求救啊
该楼层疑似违规已被系统折叠隐藏此楼查看此楼网上的添加搜索功能没有给全代码,反正这些代码在我的程序里就出错下面上代码- - searchable.xml 放在res/xml里的 android=& ...
HEXO博客系统添加搜索功能
Hexo 可以通过接入第三方搜索引擎来为博客添加搜索功能.这里给出一种基于 Algolia 搜索引擎的实现方式. 流程 Algolia 是一家搜索解决方案提供商,提供强大的搜索服务和 API 接口.在 ...
微信小程序添加搜索功能
小程序添加搜索功能
Hexo博客添加搜索功能
当文件慢慢变多的时候,分类和标签已经不能快速找到所需要的文章,我们需要添加本站的搜索功能. 安装插件在博客根目录执行命令 npm install hexo-generator-searchdb -- ...
jQuery EasyUI使用教程之在数据网格中添加搜索功能
2019独角兽企业重金招聘Python工程师标准>>> <jQuery EasyUI最新版下载> 在本教程中,我们将向你展示如何从数据库中获取数据,并将其显示到数据网格中 ...
element导航菜单添加搜索功能
element官方文档中他是一个树状结构的菜单,这个菜单没有属性可以去对他进行菜单的搜索,或者模糊查询我自己给这个菜单封装了一个查询功能,下面是代码: 布局代码: //index.vue的代码 & ...
spice 0.14.0添加新功能
目前spice 0.14.0需要修改传输方式,把TCP协议传输方式改为QUIC传输方式,QUIC是一个静态库,需要修改spice代码及依赖这个静态库,为了使spice支持QUIC功能可配置,这就需要修 ...
关于最新版本listen1 (2.24.0)(添加下载功能)
首先更改 navigation.js文件 115 行下边添加: // 下面是我改的$scope.download_music = (song) => {const strs =song.url. ...

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

LayuiAdmin 滚动条设置问题解决

layui-treeTable v2.0添加搜索功能相关推荐

最新文章

热门文章