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 相关文章推荐
JS数学函数Exp使用说明
Aug 09 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
webpack之devtool详解
Feb 10 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 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
77A一级收信机修理记
2021/03/02 无线电
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
PHP类的特性实例分析
2016/09/28 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
vue实现固定位置显示功能
2019/05/30 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
Python打印输出数组中全部元素
2018/03/13 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
Otel.com:折扣酒店预订
2017/08/24 全球购物
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
毕业生就业自荐书
2013/12/15 职场文书
幼教简历自我评价
2014/01/28 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
2014年营销工作总结
2014/11/22 职场文书