layui表格数据重载


Posted in Javascript onJuly 27, 2019

本文实例为大家分享了layui表格数据重载,供大家参考,具体内容如下

html代码

<div class="wrap-container clearfix">
 <div class="column-content-detail">
 <form class="layui-form" action="">
  <div class="layui-form-item" style="margin-left:350px;">
  <div class="layui-inline">
  <input type="text" id="userName" name="userName" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
 </div>
 <button class="layui-btn layui-btn-normal" onclick="return false;" data-type="reload" id="selectbyCondition" >搜索</button>
 <button class="layui-btn layui-btn-normal" onclick="insert()">添加</button>
  </div>
 </form>
 <div class="layui-form" id="table-list">
 <table class="layui-table" lay-skin="nob" id="userTable"></table>
 </div>
  </div>
 </div>

js代码

layui.use('table', function(){
 var table = layui.table;
 table.render({
  elem: '#userTable',
  url:'${HPath}/sUser/SelectUserTable',
  cellMinWidth: 80,
  cols: [[
  {field:'userID', title: '用户ID', sort: true},
  {field:'userName', title: '用户名称'},
  {field:'powerName', title: '权限名称'},
  {field:'mailbox', title: '邮箱'},
  {field:'operatUsers', title: '操作', templet: function(d){
  var html = '';
  html += '<button class="layui-btn layui-btn-warm layui-btn-sm" onclick="updateBtn(' + d.userID + ')">修改</button>';
  html += '<button class="layui-btn layui-btn-danger layui-btn-sm" onclick="deleteBtn(' + d.userID + ')">删除</button>';
   return html
  }, fixed: 'right', width: 130
  }
  ]],
  id:'userTableReload',
  limit: 10,
  page:true
 });
 
 //根据条件查询表格数据重新加载
 var $ = layui.$, active = {
  reload: function(){
  //获取用户名
  var demoReload = $('#userName');
  //执行重载
  table.reload('userTableReload', {
   page: {
   curr: 1 //重新从第 1 页开始
  }
  //根据条件查询
   ,where: {
   userName:demoReload.val()
   }
  });
  }
 };
 //点击搜索按钮根据用户名称查询
 $('#selectbyCondition').on('click',
   function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
   });
 });

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

Javascript 相关文章推荐
用js实现随机返回数组的一个元素
Aug 13 Javascript
js用图作提交按钮或超连接
Mar 26 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
jquery 简单的进度条实现代码
Mar 11 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
Javascript动画效果(2)
Oct 11 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
JSONP 的原理、理解 与 实例分析
May 16 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 #Javascript
微信小程序 如何获取网络状态
Jul 26 #Javascript
layui使用数据表格实现购物车功能
Jul 26 #Javascript
layui实现数据表格点击搜索功能
Mar 26 #Javascript
vue eslint简要配置教程详解
Jul 26 #Javascript
vue移动端城市三级联动组件使用详解
Jul 26 #Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 #Javascript
You might like
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
PHP添加MySQL数据记录代码
2008/06/07 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
javascript几个易错点记录
2014/11/26 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
Python中使用PDB库调试程序
2015/04/05 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
python实现点对点聊天程序
2018/07/28 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
python 列表推导式使用详解
2019/08/29 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
一篇.NET面试题
2014/09/29 面试题
市场营销个人求职信范文
2014/02/02 职场文书
企业节能减排实施方案
2014/03/19 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
win10下go mod配置方式
2021/04/25 Golang
PHP使用QR Code生成二维码实例
2021/07/07 PHP
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫