layUI实现列表查询功能


Posted in Javascript onJuly 27, 2019

layUI可以直接使用本地的json文件进行列表数据渲染,但,我们会发现,官网ctr+c ctr+v 过来的代码在做查询时每次看起来都有列表刷新的动作,但实际操作无效,百度了一大圈也没找到具体的原因,无奈继续回去看官网,后面总结出只有一点,也是大家比较容易忽略的一点:

layUI实现列表查询功能

官网说在查询时的url必须设置异步接口,so,如果我们不借助后台看起来这个效果好像是单靠前端是出不来,但,为了本地演示,这里写了一个很low的方法,单靠show()hide()方法来实现查询效果(效果演示可以单不建议实际开发中使用该方法)

以下代码粘贴复制便可直接使用:

<div class="demoTable">
 搜索ID:
 <div class="layui-inline">
 <input class="layui-input" name="id" id="demoReload" autocomplete="off">
 </div>
 <button class="layui-btn" data-type="reload">搜索</button>
</div>

<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
<script src="js/layui/layui.js" charset="utf-8"></script>
<script>
 layui.use('table', function(){
 var table = layui.table;
 //方法级渲染
 var tabins = table.render({
  elem: '#LAY_table_user'
  ,url: 'new_file.json'
  ,cols: [[
  {checkbox: true, fixed: true}
  ,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
  ,{field:'username', title: '用户名', width:80}
  ,{field:'sex', title: '性别', width:80, sort: true}
  ,{field:'city', title: '城市', width:80}
  ,{field:'sign', title: '签名'}
  ,{field:'experience', title: '积分', sort: true, width:80}
  ,{field:'score', title: '评分', sort: true, width:80}
  ,{field:'classify', title: '职业', width:80}
  ,{field:'wealth', title: '财富', sort: true, width:135}
  ]]
  ,id: 'testReload'
  ,page: true
  ,height: 315
  ,done:function(res){
  }
 });

 var $ = layui.$, active = {
  reload: function(){
  var demoReload = $('#demoReload');

  //执行重载
  table.reload('testReload', {
   page: {
   curr: 1 //重新从第 1 页开始
   }
   ,where: {
   key: {
    id: demoReload.val()
   }
   }
  });
  }
 };
 $('.demoTable .layui-btn').on('click', function(){
  search = $('#demoReload').val();
  $('.layui-table-fixed tbody tr').each(function(i){
   var id = $(this).children('td').eq(1).children('div').html();
   if(id.indexOf(search)>=0){
   $(this).show()
   $('.layui-table-main tbody tr').eq(i).show()
   }else{
   $('.layui-table-main tbody tr').eq(i).hide()
   $(this).hide();
   }
  });
 });

 });
</script>

</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
基于jQuery实现的菜单切换效果
Oct 16 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 Javascript
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
Layui实现带查询条件的分页
Jul 27 #Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 #Javascript
layui表格数据重载
Jul 27 #Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 #Javascript
微信小程序 如何获取网络状态
Jul 26 #Javascript
layui使用数据表格实现购物车功能
Jul 26 #Javascript
layui实现数据表格点击搜索功能
Mar 26 #Javascript
You might like
php中Swoole的热更新实现代码实例
2021/03/04 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
枚举JavaScript对象的函数
2006/12/22 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python实现在IDLE中输入多行的方法
2018/04/19 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
PyTorch中的C++扩展实现
2020/04/02 Python
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
如何进行有效的自我评价
2013/09/27 职场文书
护理实习自我鉴定
2013/12/14 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
资料员岗位职责
2015/02/10 职场文书
安全第一课观后感
2015/06/18 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
Java版 单机五子棋
2022/05/04 Java/Android