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代码
Jan 22 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
JS请求servlet功能示例
Jun 01 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 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
Yii实现文章列表置顶功能示例
2016/10/18 PHP
PHP重载基础知识回顾
2020/09/10 PHP
ejs v9 javascript模板系统
2012/03/21 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
用实例解释Python中的继承和多态的概念
2015/04/27 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
如何实现一个自定义类的序列化
2012/05/22 面试题
临床医师专业个人自我评价范文
2013/11/07 职场文书
校园演讲稿汇总
2014/05/21 职场文书
企业人事任命书
2014/06/05 职场文书
运动员口号
2014/06/09 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
Golang 入门 之url 包
2022/05/04 Golang
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript