layui怎么批量刪除表格數(shù)據(jù)

小億
261
2024-02-20 15:39:26

在layui中，可以通過(guò)以下步驟來(lái)實(shí)現(xiàn)批量刪除表格數(shù)據(jù)：

  1. 在表格中添加一個(gè)復(fù)選框列來(lái)實(shí)現(xiàn)選擇多條數(shù)據(jù)；
  2. 為復(fù)選框列的每個(gè)復(fù)選框添加一個(gè)事件監(jiān)聽(tīng)器，在復(fù)選框被選中時(shí)將數(shù)據(jù)的id存儲(chǔ)到一個(gè)數(shù)組中；
  3. 創(chuàng)建一個(gè)刪除按鈕，點(diǎn)擊該按鈕時(shí)獲取選中的數(shù)據(jù)id數(shù)組，然后發(fā)送請(qǐng)求給后端進(jìn)行批量刪除操作。

以下是一個(gè)簡(jiǎn)單的示例代碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>批量刪除表格數(shù)據(jù)</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/css/layui.css">
</head>
<body>
  <div class="layui-container">
    <button class="layui-btn layui-btn-danger" id="deleteBtn">批量刪除</button>
    <table id="dataTable" lay-filter="dataTable"></table>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.js"></script>
  <script>
    layui.use(['table', 'layer'], function() {
      var table = layui.table;
      var layer = layui.layer;

      // 模擬表格數(shù)據(jù)
      var data = [
        {id: 1, name: '張三'},
        {id: 2, name: '李四'},
        {id: 3, name: '王五'}
      ];

      // 渲染表格
      table.render({
        elem: '#dataTable',
        cols: [[
          {type: 'checkbox'},
          {field: 'id', title: 'ID'},
          {field: 'name', title: '姓名'}
        ]],
        data: data
      });

      // 監(jiān)聽(tīng)復(fù)選框選中事件
      table.on('checkbox(dataTable)', function(obj) {
        var checkStatus = table.checkStatus('dataTable');
        var ids = checkStatus.data.map(function(item) {
          return item.id;
        });
        console.log(ids);
      });

      // 監(jiān)聽(tīng)刪除按鈕點(diǎn)擊事件
      document.getElementById('deleteBtn').addEventListener('click', function() {
        var checkStatus = table.checkStatus('dataTable');
        var ids = checkStatus.data.map(function(item) {
          return item.id;
        });
        console.log('要?jiǎng)h除的id數(shù)組：', ids);
        // 發(fā)送請(qǐng)求給后端進(jìn)行批量刪除操作
      });
    });
  </script>
</body>
</html>

在上面的示例代碼中，我們通過(guò)監(jiān)聽(tīng)復(fù)選框的選中事件來(lái)獲取選中的數(shù)據(jù)id數(shù)組，然后在點(diǎn)擊刪除按鈕時(shí)可以獲取到這個(gè)數(shù)組并進(jìn)行相應(yīng)的操作。您可以根據(jù)自己的需求對(duì)代碼進(jìn)行調(diào)整和擴(kuò)展。

0 踩