Layuiテーブル行のデータを動的に編集する

Layuiテーブル行のデータを動的に編集する

序文

今日は、古典的なフロントエンドフレームワーク layui と JQuery を組み合わせてセル内のデータを動的に編集する、動的なテーブルデータ操作をいくつか紹介したいと思います。困っている人のお役に立てれば幸いです。さあ、お互いに励まし合いましょう!

スタイル機能説明

初期化コード

Layui 開発ドキュメントによると、組み込みコンポーネントをロードし、テーブル データを動的に入力する次のコードを簡単に記述できます。

layui.use(関数() {
    レイヤーをlayui.layerとします。
        要素 = layui.element、
        テーブル = layui.table、
        フォーム = layui.form;
    //編集フィールドを指定します const field = ['typeName'];
    // テーブルデータの読み込み table.render({
        要素: "#newsTypeTable",
        高さ: 522,
        url: serverBase + "newsType/all"、
        parseData: 関数 (res) {
            戻る {
                "コード": res.code,
                「データ」:res.data.types、
                "カウント": res.data.count
            };
        },
        // ページングを有効にする page: true,
        リクエスト: {
            ページ名: 'オフセット',
            制限名: 'ページサイズ'
        },
        ツールバー: `
            <div>
                {{# if(checkPermission(1, null)){ }}
                    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="追加">
                        <i class="layui-icon layui-icon-addition"></i>
                    </ボタン>
                {{# }}
                {{# if(checkPermission(3, null)){ }}
                    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="batchDel">
                        <i class="layui-icon layui-icon-subtraction"></i>
                    </ボタン>
                {{# }}
            </div>
        `、
        デフォルトツールバー: [],
        列: [
                [
                    {タイプ: 'チェックボックス'、固定: '左'},
                    {フィールド: 'id'、タイトル: 'ID'、並べ替え: true、配置: 'center'},
                    {フィールド: 'typeName'、タイトル: 'ニュースカテゴリ'、位置揃え: 'center'},
                    {title: '操作'、fixed: 'right'、width: 200、align: 'center'、toolbar: '#myBar'}
                ]
        ]、
        文章: {
            none: 「寂しさを表わしてる~」
        }
    });
});

例示する

まず、バックエンド データを要求し、データ解析を通じて要求されたデータを割り当てます。注: ページングが有効になっている場合、バックエンドは表示されるアイテムの合計数を渡す必要があります。ページが開かれると、送信されるデフォルトのページング要求は...?page=1&limit=10 です。要求属性を通じて渡されるパラメーター名を変更します。たとえば、ページング要求は...all?offset=1&pageSize=10 に変更されます。

ツールバーを開くと、右側にデフォルトのヘッダーツールバーが開きます。必要ない場合は、defaultToolbar 属性値を空に設定する必要があります。また、ツールバーをカスタマイズする場合は、HTML タグ要素を div タグ内に配置して有効にする必要があります。これはルールです。

Toobar は Layui テンプレート構文を使用して、現在の管理者の権限を確認します。権限が利用できない場合は、権限は表示されません。

{type: 'checkbox', fixed: 'left'} でチェックボックスを有効にし、表の左端の位置に固定します。

アクションバーで、IDで外部カスタムツールバーを導入する

<script type="text/html" id="myBar">
    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="編集">
        <i class="layui-icon layui-icon-edit"></i>
    </ボタン>
    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i>
    </ボタン>
</スクリプト>

イベントリスナーの追加

リスナーツールバー

table.on('toolbar(newsTypeList)', 関数(obj) {
    checkStatus を table.checkStatus(obj.config.id); とします。
    // 選択された行データ let selectedData = checkStatus.data;
    if(obj.event === 'add') {
        // ニュース タイプ追加ページにジャンプします window.open('addNewsType.html', 'mainFrame');
    }それ以外の場合、obj.event === 'batchDel') {
        選択されたデータの長さが0より大きい場合
            ids = [] とします。
            選択されたデータ.forEach((ターゲット行) => {
                ids.push(ターゲット行のid)
            });
            layer.confirm(`ID[${ids}]を削除してもよろしいですか?`, {title: '警告', icon: 0},
                関数 (インデックス) {
                    $.ajax({
                        タイプ: "DELETE"、
                        コンテンツタイプ: "application/json;charset=UTF-8",
                        url: serverBase + "newsType/del"、
                        データ: JSON.stringify(ids)、
                        データ型: 'json',
                        成功: 関数 (res) {
                            レスポンスデータを処理する場合は、res、レイヤーを指定します。
                                // 削除が成功したら、ページをリロードします setTimeout(function () {
                                    location.href = 'newsTypeList.html';
                                }, 遅延時間);
                            }
                        }
                    });
                    レイヤーを閉じます(インデックス);
                }
            );
        }それ以外 {
            layer.msg('少なくとも 1 行を選択してください', {icon: 3});
        }
    }
});

パブリック js ファイルは、serverBase (リクエスト バックエンド ベース アドレス)、delayTime (メッセージ ポップアップの遅延時間)、および返されたデータ処理をカプセル化する handleResponseData 関数を定義します。

ここまででヘッダーツールバーの2つの機能が実現できました。比較的簡単ですよね?

モニターテーブル行ツールバー

table.on('tool(newsTypeList)', 関数(obj) {
    // lay-event に対応する値 (またはヘッダー内のイベント パラメータに対応する値) を取得します。
    var layEvent = obj.event;
    // 行データ オブジェクトを取得します。var data = obj.data;
    スイッチ(レイイベント){
        ケース '編集':
            定数行 = obj.tr;
            const field_td = row.find(`[データフィールド$=${field[0]}]`);
            field_td.data('編集', true);
            行[0].onclick = 関数() {
                setTimeout(関数() {
                    field_td[0].lastChild.onblur = 関数 () {
                        row.find('[data-field$=typeName]').data('edit', false);
                    }
                }, 10);
            };
            壊す;
        ケース 'del':
            ids = [] とします。
            ids.push(データid);
            layer.confirm(`ID => ${ids[0]} がある行を削除してもよろしいですか?`, function(index) {
                //削除コマンドをサーバーに送信します$.ajax({
                    タイプ: "DELETE"、
                    コンテンツタイプ: "application/json;charset=UTF-8",
                    url: serverBase + "newsType/del"、
                    データ: JSON.stringify(ids)、
                    データ型: 'json',
                    成功: 関数 (res) {
                        レスポンスデータを処理する場合は、res、レイヤーを指定します。
                            setTimeout(関数() {
                                // 対応する行 (tr) の DOM 構造を削除し、キャッシュを更新します。obj.del();
                            }, 遅延時間);
                        }
                    }
                });
                レイヤーを閉じます(インデックス);
            });
            壊す;
    }
});

行の削除は非常に簡単です。行をクリックして削除するオブジェクトの ID を取得し、それをバックエンドに渡して対応する行のデータを削除するだけです。

行内の編集ボタンをクリックして編集を実装するのは少し難しいです。まず、ボタンをクリックした後、同意したフィールドの編集を開く必要があります。つまり、クリックすると入力ボックスが表示され、それを変更および更新できます。入力ボックスがフォーカスを失ったら、今すぐ編集の入り口を閉じる必要があります。つまり、もう一度クリックしても入力ボックスは再び表示されません。

// 指定されたフィールドの編集を有効にします。同様に、無効にするには、パラメーターとして false を渡します。obj.tr.find(`[data-field$=${field[0]}]`).data('edit', true);

このうち、field は、cols 属性の field 属性値と一致する編集フィールド名を指定します。

//編集フィールドを指定します const field = ['typeName'];

JQuery の find 関数を使用してセルに対応するラベルを見つけ、次に data 関数を使用して edit 属性を追加し、それを true 値に初期化します。これは、{field: 'typeName'、title: 'News Category'、align: 'center'、edit: true} と同等です。

入力ボックスは対応するセルをクリックすると表示されるため、セルに対してクリックイベントが登録されます。ただし、クリックイベント後すぐに入力ボックスを取得できるわけではありません。DOM構造の更新に遅延があり、取得を遅らせる時間が必要です。

ブラウザのデバッグにより、セル td の親要素の最後の子要素が入力されていることがわかりました。フォーカス喪失イベントを追加します。トリガーされると、編集入口が閉じられ、開くにはボタンをもう一度押す必要があります。

行[0].onclick = 関数() {
    setTimeout(関数() {
        field_td[0].lastChild.onblur = 関数 () {
            row.find('[data-field$=typeName]').data('edit', false);
        }
    }, 10);
};

リスニングセル

table.on('edit(newsTypeList)', function(obj) {
    let value = obj.value // 変更された値を取得します。 data = obj.data // 行内のすべてのキー値を取得します。 field = obj.field; // 変更されたフィールドを取得します。 let modifiedData = {id: data.id};
    modifiedData[フィールド] = 値;
    $.ajax({
        タイプ: "POST",
        コンテンツタイプ: "application/json;charset=UTF-8",
        url: serverBase + 'newsType/update',
        データ: JSON.stringify(modifiedData)、
        データ型: 'json',
        成功: function(res) {
            if(!handleResponseData(res, レイヤー)) {
                setTimeout(関数() {
                    location.href = 'newsTypeList.html';
                }, 遅延時間);
            }
        }
    });
});

最後に、変更されたオブジェクトが渡され、更新リクエストが送信されます。変更された値はバックグラウンドで検証できます。変更が失敗した場合は、現在のページが更新されます。

結論

Layui テーブル行のデータの動的編集に関するこの記事はこれで終わりです。Layui テーブルの動的編集に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Django Layuiインターフェースはポップアップダイアログボックスをクリックし、ページング付きの動的テーブルインスタンスを生成するロジックを要求します。
  • layui データ テーブル内の動的列 (フィールド) の動的な変更の詳細な説明
  • layui テーブルでテーブル ヘッダーを変更し、テーブルを動的にリロードする方法
  • Layui レイアウトとテーブルレンダリング、およびテーブルを動的に生成する方法
  • layui テーブル操作列にボタンを動的に表示する方法
  • データテーブルに行を動的に追加し、追加された行があるページにジャンプするLayuiメソッド

<<:  BT Baota Panel php7.3 および php7.4 が ZipArchive をサポートしない問題の解決方法

>>:  MYSQLデータベースの最適化段階を簡単に理解する

推薦する

Vueルータールーティングガードの詳細な説明

目次1. グローバル beforeEach 1. グローバル beforeEach 2. 実装2. ...

中国語ウェブコンテンツを紹介する10の経験

<br /> テキスト、シンボル、リンクの 3 つの側面に焦点を当て、主に中国語で、私の...

CocosCreatorでWeChatゲームを作成する方法

目次1. WeChatパブリックプラットフォームからWeChat開発者ツールをダウンロードする2. ...

CentOS のクローン作成、Linux 仮想マシンの共有の完全な手順

序文Linux が完全にセットアップされると、クローン機能を使用して短時間で複数の Linux を作...

Vue3カプセル化メッセージメッセージプロンプトインスタンス関数の詳細な説明

目次Vue3 カプセル化メッセージプロンプトインスタンス関数スタイルレイアウトカプセル化メッセージ....

JavaScript は 3 つの一般的な Web 効果 (オフセット、クライアント、スクロール シリーズ) を実装します。

目次1. 要素オフセットシリーズ2. 要素表示領域クライアントシリーズ3. 要素スクロールシリーズ1...

MySQLの行数カウントに関する簡単な説明

各テーブルの行数をカウントするために使用される MySQL count() 関数は、誰もがよく知って...

Vueコンポーネント登録方法の解釈

目次概要1. グローバル登録2. 現地登録3. モジュールシステムへのローカル登録概要コンポーネント...

モバイルデバイスにおける適応レイアウトの問題に関する簡単な説明 (レスポンシブ、rem/em、Js ダイナミクス)

3G の普及により、携帯電話を使ってインターネットにアクセスする人が増えています。モバイル デバイ...

vuexプロジェクトにおけるログインステータス管理の実践プロセス

目次道具:ログインシナリオ:練習する:シナリオ1: 思考と実践シナリオ2: 思考と実践要約する道具:...

ubuntu15.10 での hadoop2.7.2 の詳細なインストールと設定

Linux での Hadoop インストール チュートリアルはインターネットや書籍に多数ありますが、...

CentOS VPS に SSH 経由で MySQL をインストールする方法

yum install mysql-serverと入力します。続行するにはYを押してくださいインスト...

MySQL バッチ SQL 挿入パフォーマンス最適化の詳細な説明

大量のデータを扱うシステムの中には、クエリ効率の低さやデータの保存時間の長さといったデータベースの問...

MySQL 5.7.17 とワークベンチのインストールと設定のグラフィックチュートリアル

この記事では、MySQL 5.7.17ワークベンチのインストールと設定方法を参考までに紹介します。具...

サブクエリ最適化における MySQL 選択の実装

以下のデモはMySQLバージョン5.7.27に基づいています。 1. MySQLサブクエリ最適化戦略...