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: 「寂しさを表わしてる～」
        }
    });
});

<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});
        }
    }
});

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();
                            }, 遅延時間);
                        }
                    }
                });
                レイヤーを閉じます(インデックス);
            });
            壊す;
    }
});

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

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

行[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';
                }, 遅延時間);
            }
        }
    });
});