Layui を使用して編集可能なテーブル関数を実装する方法

Layui を使用して編集可能なテーブル関数を実装する方法

Layui は、豊富なコンポーネントと強力な機能を備えた、古典的で簡潔なフロントエンド UI フレームワークです。 Layui を使用した開発プロセス中に、編集可能なテーブル関数を実装する必要が生じる場合があります。この記事では、Layui のテーブル コンポーネントとフォーム コンポーネントを使用して編集可能なテーブル関数を実装する方法と、具体的なコード例を紹介します。

1. Layui ライブラリの導入

まず、Layui ライブラリの関連ファイルをプロジェクトに導入します。ソース コードを直接ダウンロードするか、Layui の CDN リンクを使用するかを選択できます。

<!-- 引入Layui库 -->
<link rel="stylesheet" href="http://cdn.layui.com/layui/2.5.4/layui.css">
<script src="http://cdn.layui.com/layui/2.5.4/layui.js"></script>

2. 編集可能なテーブルを作成する

HTML でテーブル要素を作成し、ID を指定します。ここでは例として「demoTable」を使用します。

<table class="layui-table" id="demoTable"></table>

3. テーブルのレンダリング

JavaScript で、Layui の table.render 関数を通じてテーブルをレンダリングし、テーブル ヘッダーとデータを定義します。

<script>
layui.use('table', function(){
  var table = layui.table;
  
  //定义表头
  var cols = [[
    {field: 'name', title: '姓名', edit: 'text'},
    {field: 'gender', title: '性别', edit: 'text'},
    {field: 'age', title: '年龄', edit: 'text'},
    {field: 'email', title: '邮箱', edit: 'text'},
    {field: 'phone', title: '电话', edit: 'text'}
  ]];
  
  //定义数据
  var data = [
    {name: '张三', gender: '男', age: '22', email: 'zhangsan@example.com', phone: '123456789'},
    {name: '李四', gender: '女', age: '25', email: 'lisi@example.com', phone: '987654321'},
    {name: '王五', gender: '男', age: '28', email: 'wangwu@example.com', phone: '456789123'},
  ];
  
  //渲染表格
  table.render({
    elem: '#demoTable',
    cols: cols,
    data: data,
    toolbar: 'default',
    editMode: 'single' //可编辑模式，支持：single单行、row整行、cell单元格
  });
});
</script>

上記のコードでは、table.render 関数を通じてテーブルをレンダリングします。このうち、elem はテーブル要素の ID を指定し、cols はヘッダーを定義し、data はテーブルのデータを定義し、toolbar はデフォルトのツールバーを表示するために使用され、editMode は編集可能モードを単一行編集として指定します。

4. セル編集のリスニング

セルの編集機能を実装するには、セルの編集イベントをリッスンし、イベント内の新しい値を取得して処理する必要があります。それに応じて。 JavaScript では、これは Layui の table.on 関数を通じて実現できます。

<script>
layui.use('table', function(){
  var table = layui.table;
  
  //定义表头和数据
  //...
  
  //渲染表格
  //...
  
  //监听单元格编辑
  table.on('edit(demoTable)', function(obj){
    var value = obj.value; //得到修改后的值
    var field = obj.field; //得到字段名
    var data = obj.data; //得到当前行数据
    
    //在这里进行相应的处理，比如发送请求保存到后端数据库等
    
    layer.msg('修改成功');
  });
});
</script>

上記のコードでは、table.on 関数を通じて、demoTable テーブルのセル編集イベントをリッスンします。変更された値、フィールド名、および現在の行データは、obj パラメーターを通じて取得できます。ここでは、バックエンド データベースに保存するリクエストを送信するなど、データを処理できます。

上記の手順により、Layui を使用して編集可能なテーブル関数を実装できます。ユーザーがテーブル内のデータを変更すると、セル編集イベントがトリガーされ、データを処理できるようになります。

概要:

Layui は、編集可能なテーブル関数を実現するための豊富なコンポーネントと関数も提供する、シンプルで強力なフロントエンド UI フレームワークです。 Layuiのテーブルコンポーネントとフォームコンポーネントを利用することで、編集可能なテーブル関数を簡単に実装できます。この記事では、編集可能なテーブルの作成方法、テーブルのレンダリング方法、セル編集イベントのリッスン方法について説明し、具体的なコード例を示します。編集可能なテーブル機能を皆さんが実現するのに役立つことを願っています。

以上がLayui を使用して編集可能なテーブル関数を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。