DCAT -Administrator Benutzerdefinierte Tabelle: Klicken Sie hier, um die Datenfunktion hinzuzufügen, um sie ausführlich zu erkl?ren

In diesem Artikel wird beschrieben, wie benutzerdefinierte Tabellen im DCAT -Administrator (basierend auf Laravel Admin) implementiert werden k?nnen, sodass Benutzer auf Schaltfl?chen klicken k?nnen, um Daten hinzuzufügen und benutzerdefinierte Eingabefelder hinzuzufügen (z. B.: ID, Menge, Farbauswahl).

Szenarioanforderungen

Die integrierten Tabellen von DCAT Admin sind leistungsstark, erfordern jedoch manchmal flexiblere Anpassungsfunktionen, z.

Implementierungsplan

Wir werden dies implementieren, indem wir Front-End-JavaScript- und Back-End-Laravel-Controller kombinieren.

1. Front-End-Tischstruktur (Blade-Vorlage)

Erstellen Sie zun?chst eine Tabellenstruktur in Ihrer DCAT -Administratoransicht, einschlie?lich des ID -Eingangsfelds, der Schaltfl?che Hinzufügen und der Tabelle selbst. Es wird empfohlen, ein geeignetes CSS -Framework zu verwenden, um die Schnittstelle zu versch?nern.

<div class="box">
    <div>
        AUSWEIS:<input type="text" id="idInput">
        <button id="addButton">Hinzufügen zu</button>
    </div>
    <table id="dataTable">
        <thead>
            <tr>
                <th>AUSWEIS</th>
                <th>Menge</th>
                <th>Farbe</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

2. Front-End JavaScript-Ereignisverarbeitung

Verwenden Sie JavaScript, um die Schaltfl?che zu verarbeiten. Klicken Sie auf Ereignisse, senden Sie AJAX -Anforderungen an das Backend, um Daten zu erhalten, und fügen Sie sie dynamisch zur Tabelle hinzu.

 Document.GetElementById ('Addbutton'). AddEventListener ('Click', Function () {
    const id = document.getElementById ('idInput'). Wert;
    if (id) {
        axios.get ('/your-api-endpoint/' id)
            .then (response => {
                AddrowTotable (Antwort.Data);
            })
            .Catch (error => {
                Console.Error ('Fehler:', Fehler);
                // Fehler behandeln, z. B. die Anzeige der Fehlereingabeaufforderung});
    }
});

Funktion addrowtotable (Daten) {
    const tableBody = document.getElementById ('DataTable'). querySelector ('tbody');
    const newrow = tableBody.insertrow ();

    const idcell = newrow.insertcell ();
    const quantitycell = newrow.insertcell ();
    const colorcell = newrow.insertcell ();

    idcell.textContent = data.id; // Angenommen, die vom Backend zurückgegebenen Daten enth?lt die ID -Feldquantit?tscell.innerhtml = `<input type="number" value="1"> `; // Quantit?tseingangsbox Colorcell.innerhtml = `hinzufügen<select><option value="red"> Rot</option>
<option value="blue"> Blau</option></select> `; // Farbauswahl hinzufügen}

3. Backend Laravel Controller

Erstellen Sie eine Laravel Controller -Methode, um AJAX -Anforderungen zu verarbeiten und Daten zurückzugeben.

  Php

Namespace App \ http \ Controller \ admin;

Verwenden Sie App \ http \ Controller \ Controller;
Verwenden Sie Illuminate \ http \ request;
Verwenden Sie App \ Models \ YourModel; // Ersetzen Sie durch Ihre Datenmodellklasse Ihr Kontroller Erweitert Controller
{
    ?ffentliche Funktion getData (Anfrage $ Anfrage, $ ID)
    {
        $ data = yourModel :: find ($ id); // Daten aus der Datenbank abrufen und sie nach Ihrem Modell anpassen, wenn ($ data) {
            return response ()-> json ($ data);
        } anders {
            return response ()-> json (['error' => 'Daten nicht gefunden'], 404);
        }
    }
}

4. DCAT -Administrator -Routing und Controller -Registrierung

Registrieren Sie API -Routen in Ihrer DCAT -Administrator -Routendatei:

 Route :: get ('/your-api-endpoint/{id}', [\ app \ http \ controllers \ admin \ yourController :: class, 'getData']);

5. in DCAT Admin integrieren

Verwenden Sie in Ihrem DCAT -Administrator -Controller view() um die Blattvorlage mit dem obigen Code zu rendern.

In den oben genannten Schritten k?nnen Sie die benutzerdefinierte Klick-ADD-Datentabellenfunktion in DCAT-Administrator implementieren. Denken Sie /your-api-endpoint und YourModel für Ihren tats?chlichen API-Endpunkt und Ihr Datenmodell zu ersetzen. Für eine bessere Benutzererfahrung wird empfohlen, Fehlerbehandlungen und Datenüberprüfungsmechanismen hinzuzufügen.

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