layui表格数据重载

本文实例为大家分享了Java实现图片旋转、指定图像大小、水平翻转,供大家参考,具体内容如下

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) : '';
     });
  }); 

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

(0)

相关推荐

  • layui数据表格实现重载数据表格功能(搜索功能)

    layui数据表格实现重载数据表格功能,以搜索功能为例 加载数据表格 实现搜索功能和数据表格重载 全部代码 加载数据表格 按照layui官方文档示例 HTML部分 <table id="demo" lay-filter="test"></table> JavaScript部分 var table = layui.table; //执行渲染 table.render({ elem: '#demo' //指定原始表格元素选择器(推荐id选择器)

  • layui表格数据重载

    本文实例为大家分享了Java实现图片旋转.指定图像大小.水平翻转,供大家参考,具体内容如下 html代码 <div class="wrap-container clearfix"> <div class="column-content-detail"> <form class="layui-form" action=""> <div class="layui-form-ite

  • layui表格数据复选框回显设置方法

    layui2.3版本,本身并不带有复选框回显功能,那么需要从源头解决此事,F12代码调试,找到与复选框关联的地方发现: 我们只需要在渲染数据回调时找到每个复选框根据数据的不同来设置回显. layui这里有一个坑,设置class属性后会造成二次点击效果,千万不要手动修改class属性,那么应该怎么办呢? 每次**点击**其中一个复选框时都会增加一个class属性,第二次点击又会给删除: table.render({ elem: '#LAY_table_topic', url: '/admin/to

  • Layui给数据表格动态添加一行并跳转到添加行所在页的方法

    Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现. 笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格最后动态添加一行.上述功能官方并没有给出实现,需要自己手动解决. 解决思路及方案 简单分析:根据需求--动态添加一行,首先想到的是利用JS/jQuery操作DOM对象实现在数据表格table中手动添加一个tr,但由于数据表格的每一行的每一个单元格都有其样式,因此,要想动态添加的一行与Layui数据表格渲染出来的每一行

  • layui使用数据表格实现购物车功能

    本文实例为大家分享了layui使用数据表格实现购物车功能的具体代码,供大家参考,具体内容如下 html部分 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>layui数据表格实现类购物车功能</title> <link rel="stylesheet" type="

  • layui的数据表格+springmvc实现搜索功能的例子

    如下所示: 主要在前端页面加: <div class="demoTable"> 搜索ID: <div class="layui-inline"> <input class="layui-input" name="keyWord" id="keyWord" autocomplete="off"> </div> <span class=&

  • layui实现数据表格点击搜索功能

    本文实例为大家分享了layui实现数据表格点击搜索的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>更正地址</title> <style> </style> <link rel="stylesheet" href=&q

  • layui实现数据表格table分页功能(ajax异步)

    layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询. 一.引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css" rel="external nofollow" > <script src="${ctxPath}/vender/layui/layui.js" charset=&quo

  • layui表格 返回的数据状态异常的解决方法

    最近用到了layui表格组件,结果发现数据返回状态异常 在网上查询了下是因为需要转成固定个格式 然而layui的table默认返回的数据格式为: response: { //定义后端 json 格式,详细参见官方文档 code: 0, msg: "", count: 1000, data: [] } 网上看了有些方法是转成json数据 JSONObject obj=new JSONObject(); //前台通过key值获得对应的value值 obj.put("code&qu

  • Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法

    如下所示: var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '<%=path%>/partyMember/getPartyMembersByOrgCode', //width : 1500, height : 'full', cols : [ [ //标题栏 {checkbox : true,LAY_CHECKED : false,filter : 'test'},

随机推荐