Layer表格勾选、翻页、全选和取消全选：轻松掌握表格操作技巧

2023-09-01 14:28:09

Layer表格的进阶功能：勾选、翻页、全选和取消全选

对于前端开发者来说，Layer表格是一个强大的工具，它提供了丰富的功能来展示和操作数据。除了基本功能外，Layer表格还提供了一系列进阶功能，例如勾选、翻页、全选和取消全选，可以进一步增强用户体验。

勾选功能

勾选功能允许用户在表格中选择一行或多行数据。这对于执行批量操作非常有用，例如删除、编辑或导出选定的数据。要实现勾选功能，需要在表格列中添加复选框，并将复选框与表格数据关联起来。

<input type="checkbox" name="id" value="1">

<tr data-id="1">
  <td>1</td>
  <td>John Doe</td>
  <td>john.doe@example.com</td>
</tr>

翻页功能

翻页功能允许用户在表格中查看不同页面的数据。这对于处理大量数据非常有用。要实现翻页功能，需要在表格底部添加分页控件，并将分页控件与表格数据关联起来。

<div class="layui-table-page">
  <div id="page" lay-filter="page"></div>
</div>

layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#table',
    url: 'data.json',
    page: true,
    limits: [10, 20, 30],
    limit: 10,
    cols: [[
      {type: 'checkbox'},
      {field: 'id', title: 'ID', width: 80},
      {field: 'name', title: '姓名', width: 120},
      {field: 'email', title: '邮箱', width: 150}
    ]]
  });
});

全选和取消全选功能

全选和取消全选功能允许用户快速选择或取消选择表格中的所有数据。这对于处理大量数据时非常有用。要实现全选和取消全选功能，需要在表格头部添加全选和取消全选按钮，并将这些按钮与表格数据关联起来。

<button type="button" class="layui-btn layui-btn-sm" id="selectAll">全选</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="unselectAll">取消全选</button>

layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#table',
    url: 'data.json',
    page: true,
    limits: [10, 20, 30],
    limit: 10,
    cols: [[
      {type: 'checkbox'},
      {field: 'id', title: 'ID', width: 80},
      {field: 'name', title: '姓名', width: 120},
      {field: 'email', title: '邮箱', width: 150}
    ]]
  });
  
  // 全选
  $('#selectAll').on('click', function(){
    table.checkAll('#table');
  });
  
  // 取消全选
  $('#unselectAll').on('click', function(){
    table.uncheckAll('#table');
  });
});

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
</head>
<body>
  <table id="table" lay-filter="table"></table>

  <div class="layui-table-page">
    <div id="page" lay-filter="page"></div>
  </div>

  <button type="button" class="layui-btn layui-btn-sm" id="selectAll">全选</button>
  <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="unselectAll">取消全选</button>

  <script>
    layui.use('table', function(){
      var table = layui.table;
      
      table.render({
        elem: '#table',
        url: 'data.json',
        page: true,
        limits: [10, 20, 30],
        limit: 10,
        cols: [[
          {type: 'checkbox'},
          {field: 'id', title: 'ID', width: 80},
          {field: 'name', title: '姓名', width: 120},
          {field: 'email', title: '邮箱', width: 150}
        ]]
      });
      
      // 全选
      $('#selectAll').on('click', function(){
        table.checkAll('#table');
      });
      
      // 取消全选
      $('#unselectAll').on('click', function(){
        table.uncheckAll('#table');
      });

      // 复选框事件
      table.on('checkbox', function(obj){
        console.log(obj.data); // 获取被勾选的数据
      });

      // 分页事件
      table.on('page', function(obj){
        console.log(obj.curr); // 获取当前页码
        console.log(obj.count); // 获取数据总数
      });

      // 全选事件
      table.on('checkboxAll', function(obj){
        console.log(obj.data); // 获取被全选的数据
      });

      // 取消全选事件
      table.on('checkboxUnAll', function(obj){
        console.log(obj.data); // 获取被取消全选的数据
      });
    });
  </script>
</body>
</html>