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的監聽事件方法十分豐富，開發者可自行探索更多的實現方式。