Layui表格详解

Layui是一款轻量级的前端UI库，其表格部分功能十分强大且易于使用。本文从多个方面进行阐述，探讨layui表格的使用和特殊处理。

一、layui表格图片

在表格中添加图片可让数据更加生动直观。Layui表格提供了两种方法添加图片：

1. 在table中使用img标签添加图片

  
    <table class="layui-table">
      <thead></thead>
      <tbody>
        <tr>
          <td><img src="images/img1.png"></td>
        </tr>
      </tbody>
    </table>
  

2. 使用laytpl模板引擎渲染

  
    <table class="layui-table">
      <thead></thead>
      <tbody>
        <tr>
          <td>
            <div class="layui-table-cell laytable-cell-1-0" style="padding: 0;margin: 0;">
              {{# if(d.status === 0){ }}
              <img src='images/img1.png'>
              {{# }else{ }}
              <img src='images/img2.png'>
              {{# } }}
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  

二、使用layui制作表格

Layui提供了十分便捷的表格制作方式，只需即可搭建基础表格

  
    <table class="layui-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>小A</td>
          <td>18</td>
          <td>男</td>
        </tr>
        <tr>
          <td>2</td>
          <td>小B</td>
          <td>20</td>
          <td>女</td>
        </tr>
        <tr>
          <td>3</td>
          <td>小C</td>
          <td>22</td>
          <td>男</td>
        </tr>
      </tbody>
    </table>
  

三、layui表格分页

当表格的数据量过大时，使用分页确保页面能够流畅地加载和浏览。Layui表格提供了方便的分页配置。

1. 在table中加入page属性，自动渲染分页

  
    <table id="userTable" class="layui-table" lay-filter="userTableId" lay-data="{page:true, limit:10}">
      <thead></thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>小A</td>
          <td>18</td>
          <td>男</td>
        </tr>
        <tr>
          <td>2</td>
          <td>小B</td>
          <td>20</td>
          <td>女</td>
        </tr>
        ...
      </tbody>
    </table>
  

2. 使用laypage模块手动控制分页

  
    layui.use(['table','laypage'], function(){
      var table = layui.table;
      var laypage = layui.laypage;

      //数据表格配置
      table.render({
        elem: '#userTable',
        cols: [[
          {field:'id', title:'ID', sort:true},
          {field:'name', title:'姓名'},
          {field:'age', title:'年龄'},
          {field:'sex', title:'性别'}
        ]],
        data: [],
      });

      var data = [
        {id:1, name:'小A', age:'18', sex:'男'},
        {id:2, name:'小B', age:'20', sex:'女'},
        {id:3, name:'小C', age:'22', sex:'男'},
        ...
      ];

      //分页配置
      laypage.render({
        elem: 'page',
        limit: 10,
        count: data.length,
        jump: function(obj){
          var currData = data.concat().splice(obj.curr*obj.limit-obj.limit, obj.limit);
          table.reload('userTable', {
            data: currData
          });
        }
      });
    });
  

四、layui表格异常回调

使用Ajax或其他方式异步加载数据时，出现错误的情况是时常发生的。Layui表格提供了异常回调，让我们可以自定义错误处理方式。

  
    var table = layui.table;

    table.render({
      //...
      //异常回调
      done:function(res, curr, count) {
        if (res.code != 0) {
          layer.msg(res.msg, {icon: 5, time: 2000});
        }
      }
    });
  

五、layui表格排序

点击表格头部即可转换排序方式。默认情况下，数据表格的数据按主键默认顺序存在。排序和自定义类似，只需在后面加入 sort:true 即可，如下：

  
    <thead>
      <tr>
        <th lay-data="{field:'id', sort:true}">ID</th>
        <th lay-data="{field:'username', sort:true}">用户名</th>
        <th lay-data="{field:'age', sort:true}">年龄</th>
      </tr>
    </thead>
  

六、用layui写一列表格

为了方便整理，这里我们使用laypage异步模拟加载数据。

  
    layui.use(['table','laypage'], function(){
      var table = layui.table;
      var laypage = layui.laypage;

      table.render({
        elem: '#userTable',
          layout: ['prev', 'page', 'next'],
        cols: [[
            {field:'id', title:'ID', sort:true},
            {field:'username', title:'用户名'},
            {field:'age', title:'年龄'},
          {field:'sex',width:80, title:'性别'}
        ]],
        data: [],
        page:false,
      });

      laypage.render({
        elem: 'page',
        limit: 10,
        count: 50,
        jump: function(obj){
          var currData = mockData.concat().splice(obj.curr*obj.limit-obj.limit, obj.limit);
          table.reload('userTable', {
            data: currData
          });
        }
      });

      var mockData = [
        {id:1, username:'小A', age:'18', sex:'男'},
        {id:2, username:'小B', age:'20', sex:'女'},
        {id:3, username:'小C', age:'22', sex:'男'},
        ...
      ];
    });
  

七、layui表格导出pdf

在表格数据量的情况下，依靠浏览器直接复制粘贴可能会遇到范围超出问题。为了更好的导出表格，可以使用 Layui 的 Excel 组件将表格数据导出为 Excel、Pdf 或 Csv 等格式。

在文档正文中操作方式就不展示具体代码了，代码你可以从layui官方网站获得。

八、layui表格重载

Layui表格提供了非常方便的API，让我们可以对表格进行重载。例如，在输入框中填写关键词，然后点击搜索，就可以重新从服务器获取数据并进行表格重载，实现了快速的搜索和数据动态更新。

  
    layui.use('table', function() {
      var table = layui.table;

      //渲染表格
      table.render({
        //...
      });

      //监听提交
      form.on('submit(search)', function(data) {
        var key = data.field.key;
        //执行重载
        table.reload('userTable', {
          where: {
            key: key
          }
        });
      });
    });
  

九、layUI表格添加序号

通常我们在表格开头可以添加序号列，使数据显得更加清楚明朗。

  
    var table = layui.table;

    table.render({
      elem: '#userTable',
      cols: [[
        {type: 'numbers'},
        {field:'id', title:'ID', sort:true},
        {field:'username', title:'用户名'},
        {field:'age', title:'年龄'},
        {field:'sex', title:'性别'}
      ]],
      data: [],
    });
  

到这里，Layui表格方法使用都得到了详细的解析。使用Layui表格可以得到快速开发和良好的用户体验的提升。Layui的监听事件方法十分丰富，开发者可自行探索更多的实现方式。