Layui数据表格总结篇

阅读目录

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table模块快速使用</title>
  <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>
 
<table id="demo" lay-filter="test"></table>
<!-- 工具栏模板： -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
    <button class="layui-btn layui-btn-sm" lay-event="basicfun">基础方法</button>
  </div>
</script>

<!-- 绑定工具条模板（每行数据最后的操作按钮） -->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  
  <!-- 这里同样支持 laytpl 语法，如： -->
  {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
  {{#  } }}
</script>

<!-- 自定义列模板 -->
<script type="text/html" id="titleTpl">
  <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
</script>
 
<script src="layui/layui.js"></script>

<script>
  layui.use('table', function(){
    var table = layui.table;
    
    //第一个实例
    var tableObj = table.render({
      elem: '#demo'
      ,cols: [[ //表头
        {type: 'checkbox', LAY_CHECKED: true}
        ,{type: 'radio'}
        ,{type: 'numbers'}
        ,{type: 'space'}
        ,{field: 'id', title: 'ID', width:80, sort: true, hide: true}
        ,{field: 'username', title: '用户名', width:80, templet: '#titleTpl'}
        ,{field: 'sex', title: '性别', width:80, sort: true, unresize: true, edit: 'text', event: '编辑事件名字', style: 'background-color: #5FB878; color: #fff;', align: 'center'}
        ,{field: 'city', title: '城市', width:80} 
        ,{field: 'sign', title: '签名', width: 177}
        ,{field: 'experience', title: '积分', width: 80, sort: true}
        ,{field: 'score', title: '评分', width: 80, sort: true, totalRow: true}
        ,{field: 'classify', title: '职业', width: 80}
        ,{field: 'wealth', title: '财富', width: 135, sort: true}
        ,{field: 'do', title: '操作', width: 300, toolbar: '#barDemo'}
      ]]
      //,url: 'js/user.json' //数据接口
      //表格头部工具栏区域
      ,toolbar: '#toolbarDemo'
      //头部工具栏右侧图标
      ,defaultToolbar: ['filter', 'print', 'exports', {
        title: '提示' //标题
        ,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
        ,icon: 'layui-icon-tips' //图标类名
      },{title: '获取选中行' //标题
        ,layEvent: 'getcheckStatus' //事件名，用于 toolbar 事件中使用
        ,icon: 'layui-icon-tips' //图标类名
      }]
      //,width: 312  //宽
      //设定容器高度:Number/String
      //,height: 315 //固定值
      //,height: 'full-20' //高度最大化减去差值
      //全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。
      //,cellMinWidth: 1000
      //数据渲染完的回调
      ,done: function(res, curr, count){
        //如果是异步请求数据方式，res即为你接口返回的信息。
        //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
        console.log(res);
        //得到当前页码
        console.log(curr); 
        //得到数据总量
        console.log(count);
      } 
      //数据请求失败的回调
      ,error: function(){

      }
      ,data: [{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75},{"id":10010,"username":"user-10","sex":"女","city":"城市-10","sign":"签名-10","experience":1016,"logins":182,"wealth":71294671,"classify":"诗人","score":34},{"id":10011,"username":"user-11","sex":"女","city":"城市-11","sign":"签名-11","experience":492,"logins":107,"wealth":8062783,"classify":"诗人","score":6},{"id":10012,"username":"user-12","sex":"女","city":"城市-12","sign":"签名-12","experience":106,"logins":176,"wealth":42622704,"classify":"词人","score":54},{"id":10013,"username":"user-13","sex":"男","city":"城市-13","sign":"签名-13","experience":1047,"logins":94,"wealth":59508583,"classify":"诗人","score":63},{"id":10014,"username":"user-14","sex":"男","city":"城市-14","sign":"签名-14","experience":873,"logins":116,"wealth":72549912,"classify":"词人","score":8},{"id":10015,"username":"user-15","sex":"女","city":"城市-15","sign":"签名-15","experience":1068,"logins":27,"wealth":52737025,"classify":"作家","score":28},{"id":10016,"username":"user-16","sex":"女","city":"城市-16","sign":"签名-16","experience":862,"logins":168,"wealth":37069775,"classify":"酱油","score":86},{"id":10017,"username":"user-17","sex":"女","city":"城市-17","sign":"签名-17","experience":1060,"logins":187,"wealth":66099525,"classify":"作家","score":69},{"id":10018,"username":"user-18","sex":"女","city":"城市-18","sign":"签名-18","experience":866,"logins":88,"wealth":81722326,"classify":"词人","score":74},{"id":10019,"username":"user-19","sex":"女","city":"城市-19","sign":"签名-19","experience":682,"logins":106,"wealth":68647362,"classify":"词人","score":51},{"id":10020,"username":"user-20","sex":"男","city":"城市-20","sign":"签名-20","experience":770,"logins":24,"wealth":92420248,"classify":"诗人","score":87},{"id":10021,"username":"user-21","sex":"男","city":"城市-21","sign":"签名-21","experience":184,"logins":131,"wealth":71566045,"classify":"词人","score":99},{"id":10022,"username":"user-22","sex":"男","city":"城市-22","sign":"签名-22","experience":739,"logins":152,"wealth":60907929,"classify":"作家","score":18},{"id":10023,"username":"user-23","sex":"女","city":"城市-23","sign":"签名-23","experience":127,"logins":82,"wealth":14765943,"classify":"作家","score":30},{"id":10024,"username":"user-24","sex":"女","city":"城市-24","sign":"签名-24","experience":212,"logins":133,"wealth":59011052,"classify":"词人","score":76},{"id":10025,"username":"user-25","sex":"女","city":"城市-25","sign":"签名-25","experience":938,"logins":182,"wealth":91183097,"classify":"作家","score":69},{"id":10026,"username":"user-26","sex":"男","city":"城市-26","sign":"签名-26","experience":978,"logins":7,"wealth":48008413,"classify":"作家","score":65},{"id":10027,"username":"user-27","sex":"女","city":"城市-27","sign":"签名-27","experience":371,"logins":44,"wealth":64419691,"classify":"诗人","score":60},{"id":10028,"username":"user-28","sex":"女","city":"城市-28","sign":"签名-28","experience":977,"logins":21,"wealth":75935022,"classify":"作家","score":37},{"id":10029,"username":"user-29","sex":"男","city":"城市-29","sign":"签名-29","experience":647,"logins":107,"wealth":97450636,"classify":"酱油","score":27}]
      ,totalRow: true  //是否开启合计行区域
      ,page: true //开启分页
      ,limit: 10  //每页显示的条数
      ,limits: [10,20,30,40,50,60,70,80,90]
      ,loading: true  //是否显示加载条（默认：true）。如果设置 false，则在切换分页时，不会出现加载条。该参数只适用于 url 参数开启的方式
      ,title: "用户表"  //定义 table 的大标题（在文件导出等地方会用到）
      //自定义文本
      ,text: {
        none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
      }
      ,autoSort: false
      //初始排序:用于在数据表格渲染完毕时，默认按某个字段排序。注：该参数为 layui 2.1.1 新增
      ,initSort: {
        field: 'id' //排序字段，对应 cols 设定的各字段名
        ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
      }
      ,id: 'idTest'
      //设定表格外观
      //,skin: 'line' //行边框风格
      ,even: true //开启隔行背景
      ,size: 'sm' //小尺寸的表格
      
    });

    /******基础方法******/
    //table.set(options); //设定全局默认参数。options即各项基础参数
    //table.on('event(filter)', callback); //事件。event为内置事件名（详见下文），filter为容器lay-filter设定的值
    //table.init(filter, options); //filter为容器lay-filter设定的值，options即各项基础参数。例子见：转换静态表格
    //table.checkStatus(id); //获取表格选中行（下文会有详细介绍）。id 即为 id 参数对应的值
    //table.render(options); //用于表格方法级渲染，核心方法。应该不用再过多解释了，详见：方法级渲染
    //table.reload(id, options, deep); //表格重载
    //table.resize(id); //重置表格尺寸
    //table.exportFile(id, data, type); //导出数据
    //table.getData(id); //用于获取表格当前页的所有行数据（layui 2.6.0 开始新增）

    // 触发头部工具栏事件
    table.on('toolbar(test)', function(obj){
      console.log(tableObj);
      console.log(obj);

      var checkStatus = table.checkStatus(obj.config.id); //获取选中的数据

      checkStatus.isAll;//判断是否全选
      console.log(checkStatus);
      //obj.event获取事件名
      switch(obj.event){
        case 'add':
          layer.msg('添加');
          break;
        case 'delete':
          layer.msg('删除');
          break;
        case 'update':
          layer.msg('编辑');
          break;
        case 'basicfun':
          /******基础方法******/
          var checkStatus = table.checkStatus(obj.config.id); //获取选中的数据
          table.resize('idTest'); //执行表格“尺寸结构”的重置，一般写在对应的事件中
          //表格重载
          tableObj.reload({
            // where: { //设定异步数据接口的额外参数，任意设
            //   aaaaaa: 'xxx'
            //   ,bbb: 'yyy'
            //   //…
            // },
            page: {
              curr: 1 //重新从第 1 页开始
            }
          });
          //导出任意数据
          table.exportFile(tableObj.config.id, checkStatus); //data 为该实例中的任意数量的数据
          //事实上，该方法也可以不用依赖 table 的实例，可直接导出任意数据：
          table.exportFile(['名字','性别','年龄'], [
            ['张三','男','20'],
            ['李四','女','18'],
            ['王五','女','19']
          ], 'csv'); //默认导出 csv，也可以为：xls
          break;
      };
    });

    //工具条事件
    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
    
      if(layEvent === 'detail'){ //查看
        //do somehing
      } else if(layEvent === 'del'){ //删除
        layer.confirm('真的删除行么', function(index){
          obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
          layer.close(index);
          //向服务端发送删除指令
        });
      } else if(layEvent === 'edit'){ //编辑
        //do something
        
        //同步更新缓存对应的值
        obj.update({
          username: '123'
          ,title: 'xxx'
        });
      } else if(layEvent === 'LAYTABLE_TIPS'){
        layer.alert('Hi，头部工具栏扩展的右侧图标。');
      }
    });

    //触发复选框选择
    table.on('checkbox(test)', function(obj){
      console.log(obj);
      console.log(obj.checked); //当前是否选中状态
      console.log(obj.data); //选中行的相关数据
      console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
    });

    //触发单元格编辑
    table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
      console.log(obj.value); //得到修改后的值
      console.log(obj.field); //当前编辑的字段名
      console.log(obj.data); //所在行的所有相关数据  
    });

    //触发行单击事件
    table.on('row(test)', function(obj){
      console.log(obj.tr) //得到当前行元素对象
      console.log(obj.data) //得到当前行数据
      //obj.del(); //删除当前行
      //obj.update(fields) //修改当前行数据
    });
    
    //触发行双击事件
    table.on('rowDouble(test)', function(obj){
      //obj 同上
    });

    //触发排序事件 
    table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      console.log(obj.field); //当前排序的字段名
      console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
      console.log(this); //当前排序的 th 对象
    
      //尽管我们的 table 自带排序功能，但并没有请求服务端。
      //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
      table.reload('idTest', {
        initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
        ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
          field: obj.field //排序字段
          ,order: obj.type //排序方式
        }
      });
      
      layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
    });


    
  });
</script>
</body>
</html>