Daten in der Layui-Tabellenzeile dynamisch bearbeiten

layui.use(Funktion () {
    lass layer = layui.layer,
        Element = layui.element,
        Tabelle = layout.table,
        form = layui.form;
    //Geben Sie das Bearbeitungsfeld an const field = ['typeName'];
    //Tabelle lädt Daten table.render({
        Element: "#newsTypeTable",
        Höhe: 522,
        URL: Serverbasis + "newsType/all",
        parseData: Funktion (res) {
            zurückkehren {
                "Code": Res.Code,
                "Daten": res.data.types,
                "Anzahl": res.data.count
            };
        },
        // Paging aktivieren page: true,
        Anfrage: {
            Seitenname: "Offset",
            limitName: "Seitengröße"
        },
        Symbolleiste: `
            <div>
                {{# if(checkPermission(1, null)){ }}
                    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="hinzufügen">
                        <i Klasse = "layui-Symbol layui-Symbol-Addition"></i>
                    </button>
                {{# } }}
                {{# if(checkPermission(3, null)){ }}
                    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="batchDel">
                        <i Klasse = "layui-icon layui-icon-subtraktion"></i>
                    </button>
                {{# } }}
            </div>
        `,
        Standardsymbolleiste: [],
        Spalten: [
                [
                    {Typ: 'Kontrollkästchen', fest: 'links'},
                    {Feld: 'id', Titel: 'ID', Sortieren: wahr, Ausrichten: 'zentriert'},
                    {field: 'typeName', title: 'Nachrichtenkategorie', align: 'center'},
                    {Titel: ‚Operation‘, fest: ‚rechts‘, Breite: 200, Ausrichtung: ‚Mitte‘, Symbolleiste: ‚#myBar‘}
                ]
        ],
        text: {
            keine: „Einsamkeit zeigen~“
        }
    });
});

<script type="text/html" id="meineBar">
    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="bearbeiten">
        <i class="layui-icon layui-icon-edit"></i>
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i>
    </button>
</Skript>

Tabelle.Ein('Werkzeugleiste(newsTypeList)', Funktion(Objekt) {
    let checkStatus = table.checkStatus(obj.config.id);
    // Ausgewählte Zeilendaten let selectedData = checkStatus.data;
    wenn(Objekt.Ereignis === 'Hinzufügen') {
        // Zur Seite zum Hinzufügen des Newstyps springen window.open('addNewsType.html', 'mainFrame');
    }sonst wenn(obj.event === 'batchDel') {
        wenn(selectedData.length > 0) {
            lass ids = [];
            selectedData.forEach((targetRow) => {
                ids.push(Zielzeile.id)
            });
            layer.confirm(`Möchten Sie ID[${ids}] wirklich löschen?`, {title: 'Warnung', icon: 0},
                Funktion (Index) {
                    $.ajax({
                        Typ: "LÖSCHEN",
                        Inhaltstyp: "application/json;Zeichensatz=UTF-8",
                        URL: Serverbasis + "newsType/del",
                        Daten: JSON.stringify(ids),
                        Datentyp: "json",
                        Erfolg: Funktion (res) {
                            wenn (handleResponseData(res, layer)) {
                                // Nach erfolgreichem Löschen Seite neu laden setTimeout(function () {
                                    location.href = "newsTypeList.html";
                                }, Verzögerungszeit);
                            }
                        }
                    });
                    Ebene.schließen(Index);
                }
            );
        }anders {
            layer.msg('Bitte wählen Sie mindestens eine Zeile aus', {icon: 3});
        }
    }
});

Tabelle.auf('Tool(NewsTypeList)', Funktion (Objekt) {
    // Den dem Lay-Event entsprechenden Wert abrufen (oder den dem Event-Parameter im Header entsprechenden Wert)
    var layEvent = obj.event;
    // Zeilendatenobjekt abrufen var data = obj.data;
    Schalter (layEvent) {
        Fall 'Bearbeiten':
            const Zeile = obj.tr;
            const field_td = row.find(`[Datenfeld$=${Feld[0]}]`);
            field_td.data('bearbeiten', true);
            Zeile[0].onclick = Funktion() {
                setzeTimeout(Funktion () {
                    field_td[0].lastChild.onblur = Funktion () {
                        row.find('[Datenfeld$=Typname]').data('Bearbeiten', false);
                    }
                }, 10);
            };
            brechen;
        Fall 'del':
            lass ids = [];
            ids.push(Daten-ID);
            layer.confirm(`Sind Sie sicher, dass Sie die Zeile löschen möchten, in der sich ID => ${ids[0]} befindet?`, function(index) {
                //Löschbefehl an den Server senden$.ajax({
                    Typ: "LÖSCHEN",
                    Inhaltstyp: "application/json;Zeichensatz=UTF-8",
                    URL: Serverbasis + "newsType/del",
                    Daten: JSON.stringify(ids),
                    Datentyp: "json",
                    Erfolg: Funktion (res) {
                        wenn (handleResponseData(res, layer)) {
                            setzeTimeout(Funktion () {
                                // Lösche die DOM-Struktur der entsprechenden Zeile (tr) und aktualisiere den Cache obj.del();
                            }, Verzögerungszeit);
                        }
                    }
                });
                Ebene.schließen(Index);
            });
            brechen;
    }
});

// Bearbeitung des angegebenen Felds aktivieren. Um die Bearbeitung zu deaktivieren, übergeben Sie „false“ als Parameter. obj.tr.find(`[data-field$=${field[0]}]`).data('edit', true);

//Geben Sie das Bearbeitungsfeld an const field = ['typeName'];

Zeile[0].onclick = Funktion() {
    setzeTimeout(Funktion () {
        field_td[0].lastChild.onblur = Funktion () {
            row.find('[Datenfeld$=Typname]').data('Bearbeiten', false);
        }
    }, 10);
};

Tabelle.Ein('Bearbeiten(NewsTypeList)', Funktion(Objekt) {
    let value = obj.value // Den geänderten Wert abrufen, data = obj.data // Alle Schlüsselwerte in der Zeile abrufen, field = obj.field; // Das geänderte Feld abrufen let modifiedData = {id: data.id};
    modifiedData[Feld] = Wert;
    $.ajax({
        Typ: "POST",
        Inhaltstyp: "application/json;Zeichensatz=UTF-8",
        URL: Serverbasis + "Newstyp/Update",
        Daten: JSON.stringify(modifizierteDaten),
        Datentyp: "json",
        Erfolg: Funktion (Res) {
            wenn(!handleResponseData(res, layer)) {
                setzeTimeout(Funktion () {
                    location.href = "newsTypeList.html";
                }, Verzögerungszeit);
            }
        }
    });
});