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データベースの最適化段階を簡単に理解する

推薦する

vue3のテレポート瞬間移動機能の使い方を詳しく解説

vue3テレポート瞬間移動機能の使用は参考用です。具体的な内容は次のとおりです。テレポートは通常、瞬...

Docker がデータベースのデプロイに適さない 7 つの理由のまとめ

Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソフト...

CSSフィルターにはどんな魔法の用途があるか

背景基本概念CSS filterプロパティは、ぼかしや色の変化などのグラフィック効果を要素に適用して...

MySQL GTID の総合概要

目次01 GTIDの紹介02 GTIDの仕組み03 GTIDの利点と欠点04 テスト環境構築05 テ...

Web2.0製品と機能の簡単な紹介

<br />Web2.0とは何ですか? Web2.0にはソーシャルネットワーク製品とその...

CSS での配置の使用方法の詳細な研究 (要約)

CSS における位置指定の概要position属性は英語で位置を意味し、 CSSでの主な機能は要素...

JSONP クロスドメインシミュレーション Baidu 検索

目次1. JSONPとは何か2. JSONPクロスドメインリクエスト3. Baidu検索をシミュレー...

VueプロジェクトにPWAを導入する手順

目次1. 依存関係をインストールする2. vue.config.js ファイルで pwa を設定しま...

ブルートフォース攻撃を防ぐためのシェルスクリプト設定

シェルスクリプトはアクセス制御を設定し、複数回のログイン失敗後にIPをブロックしてSSHのブルートフ...

Vueフィルターの使い方

目次概要フィルターの定義フィルターの使用カスタムグローバルフィルターローカルフィルター予防例1(ロー...

HTMLにおけるbackground-image属性の設定の詳細な説明

写真といえば、まず背景画像が思い浮かびます。私たちの装飾の多くは背景画像を使用して実現されているから...

TypeScript 列挙型

目次1. 概要2. デジタル列挙2.1 逆マッピング3. 文字列の列挙4. const列挙5. まと...

Centos7でのSambaサーバー構成(実戦)

サンバの概要Samba は、Linux および UNIX システム上で SMB プロトコルを実装する...

テキストの展開と折りたたみの効果を実現するJavaScript

リスト形式のテキストの展開と折りたたみの実装は参考までに。具体的な内容は以下のとおりです。必要: 1...

CSS でレスポンシブ レイアウトを実装する方法

CSS でレスポンシブ レイアウトを実装するレスポンシブレイアウトは非常にハイエンドで難しいように思...