データテーブルの編集機能はどのように実装するのですか？

1年 ago
綾乃, 一希
1 minute

Layuiデータテーブルの編集機能を実現するには、以下の手順を実行する必要があります。

  1. HTMLページにLayuiの関連リソースを導入する際には、LayuiのCSSファイルとJSファイルを含める必要があります。
  2. を日本語で自然に言い換えると、<表>となります。
  3. tableを描画する。
  4. テーブルが編集されるとき
  5. イベントコールバック関数内で、編集後のデータをバックエンドに送信して保存するために、AJAXリクエストを使用することができます。
  6. 編集する (へんしゅうする)
  7. 入力してください。
  8. テーブルを編集する
  9. テーブルを編集する

サンプルコードは以下の通りです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css" />
  <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
  <title>Layui数据表格编辑功能示例</title>
</head>
<body>
  
  <table id="demo" lay-filter="test"></table>

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

      // 渲染数据表格
      table.render({
        elem: '#demo',
        url: '/api/data',
        cols: [[
          {field: 'id', title: 'ID', edit: 'text'},
          {field: 'name', title: '姓名', edit: 'text'},
          {field: 'age', title: '年龄', edit: 'text'},
          {field: 'email', title: '邮箱', edit: 'text'},
          {fixed: 'right', title:'操作', toolbar: '#barDemo'}
        ]],
        page: true
      });

      // 监听表格编辑事件
      table.on('edit(test)', function(obj){
        var data = obj.data; // 修改后的数据
        var field = obj.field; // 修改的字段名
        var value = obj.value; // 修改后的值

        // 发送Ajax请求保存数据
        // ...

        console.log(data, field, value);
      });
    });
  </script>
</body>
</html>

上記のコードでは、Layuiのtable.render（）メソッドを使用してデータテーブルをレンダリングし、データテーブルのコンテナ＃demoと列構成を指定しました。列構成では、ID、名前、年齢、メールの4つの列を編集可能にしました。その後、Layuiのtable.on（’edit’）メソッドを使用してテーブルの編集イベントを監視し、イベントコールバック関数で編集後のデータを処理しました。コンソールに編集後のデータ、編集されたフィールド名、および編集後の値を表示しました。

注意：/api/dataというURLは例です。実際のバックエンドのURLに置き換える必要があります。また、ページングやソートなどの他のテーブル属性も自分の要件に合わせて設定する必要があります。

bannerAds