Layui表格 – 使用技巧和實例教程

Layui是一款經典的前端框架，它提供了豐富的組件，其中表格組件是使用非常廣泛的。使用Layui表格可以輕鬆地實現數據的呈現和操作，同時代碼簡單易懂，具有良好的擴展性，是前端開發者必備的技能之一。

一、簡介

在介紹Layui表格的使用技巧和示例之前，我們先了解一下Layui表格的基本結構。Layui表格主要分為表格頭部、表格主體和表格底部三個部分。其中表格頭部主要包含表格的標題和一些操作按鈕，表格主體主要用於展示數據，表格底部主要包括數據分頁和一些其他的操作按鈕。下面是一個簡單的Layui表格的HTML代碼：

<table class="layui-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>用戶名</th>
      <th>性別</th>
      <th>城市</th>
      <th>簽名</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>張三</td>
      <td>男</td>
      <td>北京</td>
      <td>這是張三的簽名</td>
      <td><button class="layui-btn layui-btn-sm">編輯</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>女</td>
      <td>上海</td>
      <td>這是李四的簽名</td>
      <td><button class="layui-btn layui-btn-sm">編輯</button></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="6">
        <div class="layui-box layui-laypage layui-laypage-default">
            <div class="layui-laypage-curr"><em class="layui-laypage-em">1</em></div>
            <div class="layui-laypage-main"><ul class="layui-laypage"></ul></div>
        </div>
      </td>
    </tr>
  </tfoot>
</table>

以上代碼中，我們使用Layui提供的表格組件實現了一個簡單的數據表格。其中表格頭部主要使用了<thead>和<th>標籤，表格主體使用了<tbody>和<td>標籤，表格底部使用了<tfoot>和分頁組件，這些組件都是Layui提供的。

二、樣式定製

Layui表格的樣式可以通過CSS進行定製，可以通過自定義CSS文件或者通過style標籤添加CSS樣式來實現。下面是通過style標籤定義表格樣式的示例代碼：

<table class="layui-table">
  ...
</table>

<style>
  /* 修改表格的顏色 */
  .layui-table tr th{background-color: #f3f3f3;}
  .layui-table tr td{background-color: #ffffff;}
  /* 修改表格的邊框 */
  .layui-table tr th,.layui-table tr td{border: 1px solid #d9d9d9;}
  /* 修改表格的字體 */
  .layui-table tr th,.layui-table tr td{font-size: 14px;}
</style>

以上代碼中，我們通過定義<style>標籤的方式實現了對表格樣式的修改，具體來說：

使用background-color屬性修改表格的背景色
使用border屬性修改表格的邊框
使用font-size屬性修改表格的字體大小

通過修改上述屬性，我們就可以實現對Layui表格的樣式定製。

三、數據處理

Layui表格提供了多種方式來處理數據，包括排序、篩選、分頁等等。下面是一個實現對數據進行排序和篩選的示例代碼：

<table class="layui-table">
  <thead>
    <tr>
      <th lay-sort="asc">ID</th>
      <th lay-filter="filter-user">用戶名</th>
      <th>性別</th>
      <th>城市</th>
      <th>簽名</th>
      <th>操作</th>
    </tr>
  </thead>
  ...
</table>

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

    // 按照ID字段進行升序排序
    table.sort('test-table-sort', 'id');

    // 篩選用戶名包含“張”的數據
    table.on('filter(filter-user)', function(obj){
      table.reload('test-table-sort', {
        where: {
          username: obj.value
        }
      });
    });
  });
</script>

以上代碼中，我們使用了Layui的table模塊實現了對數據的排序和篩選。具體來說：

在表格頭部的<th>標籤中使用lay-sort屬性可以實現按照該字段進行排序；
在表格頭部的<th>標籤中使用lay-filter屬性和對應的filter值可以實現對數據進行篩選；
通過table.sort和table.on方法可以實現對表格的排序和篩選事件的監聽。

通過上述代碼，我們可以實現對Layui表格的數據處理。

四、擴展功能

Layui表格提供了多種擴展功能，可以根據業務需求進行定製，下面是一個實現對表格中的數據進行批量操作的示例代碼：

<table class="layui-table">
  ...
</table>

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

    // 監聽批量操作按鈕
    table.on('tool(test-table-operate)', function(obj){
      var data = obj.data;
      if(obj.event === 'delete'){
        layer.confirm('確定要刪除 [' + data.username + '] 嗎？', function(index){
          obj.del();
          layer.close(index);
        });
      } else if(obj.event === 'edit'){
        layer.open({
          type: 2,
          title: '編輯用戶',
          content: '/user/'+data.id+'/edit',
          area: ['80%', '80%'],
          maxmin: true
        });
      }
    });
  });
</script>

以上代碼中，我們通過使用table.on方法實現了對批量操作按鈕的監聽，具體來說：

我們在表格中添加了一個操作欄，其中包括了編輯和刪除兩個按鈕；
使用table.on方法監聽操作事件，根據不同的事件類型實現不同的操作。

通過上述代碼，我們可以對Layui表格進行擴展，實現更複雜的業務需求。

五、總結

以上就是Layui表格的使用技巧和實例教程。Layui表格是前端開發中非常重要的組件之一，掌握其使用技巧對於提高前端開發效率非常有幫助。希望本文能夠對讀者了解Layui表格有所幫助。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/232576.html