山东11选5计划软件

layui表格数据重载

 更新时间:2019年07月27日 11:04:20   山东11选5:斜阳雨墨   我要评论

这篇文章主要为大家详细介绍了layui表格数据重载,根据条件查询,监听按钮事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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) : '';
   });
 }); 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持山东11选5计划软件。

相关文章

  • js网页实时倒计时精确到秒级

    js网页实时倒计时精确到秒级

    网页实时倒计时,精确到秒级,和天数倒计时原理一样,需要的朋友可以参考下
    2014-02-02
  • 用Javascript获取页面元素的具体位置

    用Javascript获取页面元素的具体位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置,在接下来的文章中为大家介绍下使用js是如何实现的
    2013-12-12
  • csdn 论坛技术区平均给分功能

    csdn 论坛技术区平均给分功能

    看论坛里技术区没有平均给分的功能,感觉散分很不方便,就写了一个:IE8,FF3.5下测试ok
    2009-11-11
  • js post提交调用方法

    js post提交调用方法

    这篇文章主要介绍了js post提交调用方法,需要的朋友可以参考下
    2014-02-02
  • 教你使用javascript简单写一个页面模板引擎

    教你使用javascript简单写一个页面模板引擎

    不知道你有木有听说过一个基于Javascript的Web页面预处理器,叫做AbsurdJS。只是打算写一个CSS的预处理器,后来扩展到了CSS和HTML,可以用来把Javascript代码转成CSS和HTML代码。当然,由于可以生成HTML代码,你也可以把它当成一个模板引擎,用于在标记语言中填充数据。
    2015-05-05
  • javascript中如何处理引号编码&#034;

    javascript中如何处理引号编码&#034;

    本文为大家介绍下javascript中如何处理引号编码,具体如下,感兴趣的朋友可以参考下
    2013-08-08
  • js 创建书签小工具之理论

    js 创建书签小工具之理论

    书签小工具(Bookmarklets)是一个非常棒的javascript代码小片断伪装成的小应用,它驻留在你的浏览器里并为网页提供额外的功能。这里我们将研究如何从头开始创建一个书签小工具及一些最佳实践的建议。
    2011-02-02
  • js二级地域选择的实现方法

    js二级地域选择的实现方法

    js二级地域选择的实现方法,需要的朋友可以参考一下
    2013-06-06
  • JavaScript使用享元模式实现文件上传优化操作示例

    JavaScript使用享元模式实现文件上传优化操作示例

    这篇文章主要介绍了JavaScript使用享元模式实现文件上传优化操作,结合实例形式分析了javascript基于享元模式进行文件上传优化操作的原理、步骤及相关使用技巧,需要的朋友可以参考下
    2018-08-08
  • Bootstrap实现导航栏的2种方式

    Bootstrap实现导航栏的2种方式

    这篇文章主要为大家详细介绍了Bootstrap实现导航栏的2种方式,一是利用按钮组实现、二是Bootstrap专门做了相应的css类,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11

最新评论

众盈彩票网址 - 杭可科技 新生彩票娱乐平台网址 好乐多彩票平台网址 - 长乐市工艺美术协会