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 相关文章推荐
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
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 常用字符串函数总结
2008/03/15 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
JavaScript 指导方针
2007/04/05 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
vscode 远程调试python的方法
2017/12/01 Python
浅析Python数据处理
2018/05/02 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
python Paramiko使用示例
2020/09/21 Python
客房主管岗位职责
2013/12/09 职场文书
青春演讲稿范文
2014/05/08 职场文书
村党支部书记承诺书
2014/05/29 职场文书
留学生求职信
2014/06/03 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
学校德育工作总结2015
2015/05/11 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
导游词之千岛湖
2019/09/23 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js