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 滚动条设置问题解决
滚动条定位可以根据自己需要调整
结束
layui-treeTable v2.0添加搜索功能的更多相关文章
- lucene3.6笔记添加搜索功能
lucene为程序添加搜索功能,此功能基于已创建好的文档的索引之上.这里我已经为一些文档建立了索引,并保存到硬盘上.下面开始针对这些索引,添加搜索功能. 1.简单的TermQuery搜索 Java代码 ...
- 011.Adding Search to an ASP.NET Core MVC app --【给程序添加搜索功能】
Adding Search to an ASP.NET Core MVC app 给程序添加搜索功能 2017-3-7 7 分钟阅读时长 作者 本文内容 1.Adding Search by genr ...
- dgango中admin下添加搜索功能
admin下添加搜索功能: 在表单中加入search_fields = ['ip','hostname'] 可模糊匹配 当有人在管理搜索框中进行搜索时,Django将搜索查询分解成单词,并返回包含 ...
- 给 hugo 博客添加搜索功能
起因 我的博客使用了 hugo 作为静态生成工具,自带的主题里也没有附带搜索功能.看来,还是得自己给博客添加一个搜索功能. 经过多方查找,从 Hugo Fast Search · GitHub 找到一 ...
- ZKEACMS添加搜索功能,搜索插件说明
ZKEACMS默认是不支持搜索功能的.但是搜索功能是比较常用的一个功能,使用这个搜索插件,可以让CMS支持搜索: 如下图所示: 数据库 Microstft Sql Server 2008R2 以上 页 ...
- html中layui+jfinal模板实现前端搜索功能
<input type="text" id="campus" class="layui-input" onkeyup="ck ...
- WinForm------给GridControl添加搜索功能
//按钮点击事件 private void Btn_Search_Click(object sender, EventArgs e) { //获取编辑框的值 string text = this.te ...
- 给jekyll博客添加搜索功能
使用SWIFTYPE为jekyll博客添加搜索引擎 步骤 1.首先去swiftype注册一个账号 2.接着添加自己想要配置的网站地址并为新设定的引擎添加一个名字(非会员只能设置一个引擎). 3.收到验 ...
- 生鲜配送管理系统_升鲜宝V2.0 价格组功能 操作说明_15382353715
价格组功能是B端供应链系统,必不可少的一个功能,其主要实现不同的客户不同的价格,B端系统有一个最大的不同就是,有些商品后台下单人员能看到的.有些商品在销售的那一瞬间,还不知道价格.所以这些商品只有后台 ...
随机推荐
- php strtok()函数 语法
php strtok()函数 语法 作用:逐一分割字符串大理石构件 语法:strtok(string,split) 参数: 参数 描述 string 必需.规定要分割的字符串. split 必需.规定 ...
- php nl2br()函数 语法
php nl2br()函数 语法 作用:在字符串中的新行(\n)之前插入换行符dd马达 语法:nl2br(string,xhtml) 参数: 参数 描述 string 必须.规定要检查的字符串. xh ...
- Android Studio使用tips
安装位置:C:\Users\xxx\AppData\Local\Android\sdk https://developer.android.com/topic/libraries/support-li ...
- [CSP-S模拟测试]:attack(支配树+LCA+bitset)
题目传送门(内部题55) 输入格式 第一行,包含两个整数:$n,m,q$,表示敌军城市数.路数和情报数.接下来$m$行,每行包含两个整数:$u,v$,表示从$u$到$v$包含一条单向道路.接下来$q$ ...
- centOS不显示ipv4地址的解决办法
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/lx_Frolf/article/deta ...
- SQL语句:随机取3条不重复的记录
随机取3条不重复的记录 [Access]select top 3 * from tablename order by rnd(id); [SqlServer]select top 3 * from t ...
- laravel 简单应用 redis
1.连接配置 database.php 中 测试用 都没做修改 2.创建测试路由及控制器 //添加路由 Route::get('testRedis','RedisController@testRedi ...
- linux的echo命令整理
linux的echo命令, 在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的, 因此有必要了解下echo的用法 echo命令的功能是在显示器上显示一段文字,一般起到一个提示 ...
- HDFS 工具类
读取HDFS上文件数据 import java.io.File; import java.io.FileInputStream; import java.io.IOException; import ...
- 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...