layuiで表のデータを一括削除する方法はありますか。

1年 ago
光, 明
2 minutes

Layuiを使用して、テーブルデータの一括削除を実現するには、以下の手順を取ることができます。

  1. 複数のデータを選択するために、列にチェックボックスを追加してください。
  2. 各チェックボックスにイベントリスナーを追加し、チェックボックスが選択されるとデータのIDを配列に保存する。
  3. 「削除ボタンを作成し、そのボタンをクリックすると選択したデータのID配列を取得し、バックエンドにリクエストを送信して一括削除処理を行います。」

以下は簡単なコードの例です：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>批量删除表格数据</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;

      // 模拟表格数据
      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
      });

      // 监听复选框选中事件
      table.on('checkbox(dataTable)', function(obj) {
        var checkStatus = table.checkStatus('dataTable');
        var ids = checkStatus.data.map(function(item) {
          return item.id;
        });
        console.log(ids);
      });

      // 监听删除按钮点击事件
      document.getElementById('deleteBtn').addEventListener('click', function() {
        var checkStatus = table.checkStatus('dataTable');
        var ids = checkStatus.data.map(function(item) {
          return item.id;
        });
        console.log('要删除的id数组：', ids);
        // 发送请求给后端进行批量删除操作
      });
    });
  </script>
</body>
</html>

上記のサンプルコードでは、チェックボックスの選択イベントを監視して、選択されたデータのID配列を取得し、削除ボタンをクリックすると、この配列を取得して適切な操作を行うことができます。コードを自分のニーズに合わせて調整および拡張することができます。

bannerAds