So implementieren Sie die benutzerdefinierte Tabellenfunktion des Klickens, um Daten im DCAT -Administrator hinzuzufügen?

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!