Wie passen Sie die Tabellenfunktion des Klickens an, um Daten in DCAT -Administrator hinzuzufügen?

DCAT -Administrator Benutzerdefinierte Tabelle: Klicken Sie auf, um Daten hinzuzufügen und Informationen einzugeben

In diesem Artikel wird beschrieben, wie Sie eine benutzerdefinierte Tabelle im DCAT-Administrator (Laravel-Admin) erstellen, sodass Benutzer auf Schaltflächen klicken können, um neue Zeilen hinzuzufügen, die Nummer einzugeben und Farben in der neuen Zeile auszuwählen. Dies geht über die direkte Funktionalität von DCAT-Administrator-integrierten Tabellen hinaus und erfordert eine Kombination aus Front-End-JavaScript- und Back-End-APIs.

Fügen Sie zunächst eine Taste und ein ID -Eingangsfeld über der Tabelle hinzu, um den Datenabzugsprozess auszulösen. Wir können die Symbolleistefunktion von DCAT -Administrator verwenden, um zu implementieren:

1. Fügen Sie Tasten und Eingabefelder hinzu:

 $ grid-> tools (Funktion ($ tools) {
    $ tools-> append (Daten hinzufügen
        <input type="text" id="input-id" placeholder="输入ID">
Html
    );
});

2. Binden Sie die Schaltfläche Klicken Sie auf Ereignis (JavaScript):

Verwenden Sie die Schaltfläche JQuery Binding, um auf Event zu klicken. Holen Sie sich nach dem Klicken auf die Schaltfläche die ID im Eingabefeld und erhalten Sie die Daten über die AJAX Request Backend -API.

 $ ('#add-data-btn'). click (function () {
    sei id = $ ('#input-id'). val ();
    if (id) {
        $ .ajax ({{{
            URL: '/your-api-Endpoint', // Ersetzen Sie durch Ihren Backend-API-Typ: 'Get',,
            Daten: {id: id},
            Erfolg: Funktion (Antwort) {
                Addrowtotable (Antwort);
            },
            Fehler: Funktion (Fehler) {
                alarm ('Daten hinzufügen fehlgeschlagen!');
                console.Error (Fehler);
            }
        });
    } anders {
        ALERT ('Bitte geben Sie ID ein');
    }
});

3. Fügen Sie der Tabelle eine neue Zeile hinzu (JavaScript):

addRowToTable Funktion ist dafür verantwortlich, die vom Backend zurückgegebenen Daten in die Tabelle hinzuzufügen, und enthält das Mengeneingangsfeld und den Farbauswahl. Angenommen, die vom Backend zurückgegebenen Daten enthält name .

 Funktion addrowtotable (Daten) {
    lass Newrow = $ ('<tr> ');
    newrow.append ('<td> 'Data.Name' '</td> '); // Name des Namens Newrow.Append ('<td><input type="number" name="quantity"></td> '); // Mengeneingangsbox newrow.append ('<td><select name="color"><option value="red"> Rot</option>
<option value="blue"> Blau</option>
<option value="green"> Grün</option></select></td> '); // Farbauswahl $ ('#Your-table-id tbody'). Anhänge (Newrow); // Ersetzen Sie durch Ihre Tisch -ID
}<p> Denken Sie daran <code>#your-table-id</code> für Ihre tatsächliche API-Adresse und Tabellen-ID zu ersetzen <code>/your-api-endpoint</code> und #Your-Table-ID. Die Backend -API muss die entsprechenden Daten basierend auf der Eingabe -ID zurückgeben, z. B. <code>{'name': 'ProductName'}</code> . Dieses Beispiel bietet ein grundlegendes Framework, in dem Sie Felder und Funktionen entsprechend den tatsächlichen Bedürfnissen anpassen können. Sie können beispielsweise fortgeschrittenere UI -Komponenten verwenden, um die Benutzererfahrung zu verbessern.</p>
</tr>

Das obige ist der detaillierte Inhalt vonWie passen Sie die Tabellenfunktion des Klickens an, um Daten in DCAT -Administrator hinzuzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!