Table personnalisée DCAT Admin: cliquez pour ajouter de la fonction de données pour l'expliquer en détail

Cet article décrit comment implémenter des tables personnalisées dans l'administrateur DCAT (basé sur Laravel Admin), permettant aux utilisateurs de cliquer sur les boutons pour ajouter des données et inclure des champs d'entrée personnalisés (par exemple: ID, quantité, sélection des couleurs).

Exigences de scénario

Les tables intégrées de l'administrateur DCAT sont puissantes, mais nécessitent parfois des fonctionnalités de personnalisation plus flexibles, telles que l'ajout de lignes de table dynamiquement et l'ajout de bo?tes de saisie et de sélecteurs spécifiques pour chaque ligne.

Plan de mise en ?uvre

Nous allons l'implémenter en combinant les contr?leurs JavaScript et Laravel back-end frontal.

1. Structure de table avant (modèle de lame)

Tout d'abord, créez une structure de table dans votre vue d'administration DCAT, y compris la zone d'entrée d'ID, le bouton Ajouter et la table elle-même. Il est recommandé d'utiliser un cadre CSS approprié pour embellir l'interface.

<div class="box">
    <div>
        IDENTIFIANT:<input type="text" id="idInput">
        <button id="addButton">Ajouter à</button>
    </div>
    <table id="dataTable">
        <thead>
            <tr>
                <th>IDENTIFIANT</th>
                <th>quantité</th>
                <th>couleur</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

2. Traitement des événements JavaScript frontal

Utilisez JavaScript pour traiter les événements de clic du bouton, envoyez des demandes AJAX au backend pour obtenir des données et ajoutez-les dynamiquement à la table.

 document.getElementById ('addButton'). AddEventListener ('click', function () {
    const id = document.getElementById ('idInput'). Valeur;
    if (id) {
        axios.get ('/ your-ap-endpoint /' id)
            .Then (réponse => {
                addRowTotable (réponse.data);
            })
            .Catch (error => {
                Console.Error ('Erreur:', Erreur);
                // gérer les erreurs, telles que l'affichage des informations d'invite d'erreur});
    }
});

fonction addRowTotable (data) {
    const TableBody = document.getElementById (?dataTable?). QueySelector (?tBody?);
    const newrow = tablebody.insertrow ();

    const idCell = newrow.insertCell ();
    const demantyCell = newRow.InsertCell ();
    const ColorCell = newrow.insertCell ();

    idCell.TextContent = data.id; // Supposons que les données renvoyées par le backend contient le champ ID QUANTITYCELL.innerhtml = `<input type="number" value="1"> `; // Ajouter une bo?te d'entrée de quantité colorcell.innerhtml = `<select><option value="red"> rouge</option>
<option value="blue"> bleu</option></select> `; // Ajouter un sélecteur de couleur}

3. Contr?leur Laravel backend

Créez une méthode de contr?leur Laravel pour traiter les demandes AJAX et retourner les données.

  Php

Namespace App \ Http \ Controllers \ admin;

Utilisez App \ Http \ Controllers \ Controller;
Utiliser illuminate \ http \ request;
Utilisez App \ Models \ YourModel; // Remplacez par votre classe de modèle de données votre contr?leur étend le contr?leur
{
    Fonction publique GetData (demande $ demande, $ id)
    {
        $ data = yourModel :: find ($ id); // Obtenez des données de la base de données et ajustez-les en fonction de votre modèle si ($ data) {
            retour de réponse () -> JSON ($ data);
        } autre {
            return réponse () -> json (['error' => 'data non trouvé'], 404);
        }
    }
}

4. routage administrateur DCAT et enregistrement du contr?leur

Enregistrez les routes API dans votre fichier d'itinéraire DCAT Admin:

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

5. Intégrer à l'administrateur DCAT

Dans votre contr?leur d'administration DCAT, utilisez view() pour rendre le modèle de lame contenant le code ci-dessus.

Grace aux étapes ci-dessus, vous pouvez implémenter la fonction de table de données click-az ADD personnalisée dans l'administrateur DCAT. N'oubliez pas de remplacer /your-api-endpoint et YourModel pour votre point de terminaison API et votre modèle de données. Pour une meilleure expérience utilisateur, il est recommandé d'ajouter des mécanismes de gestion des erreurs et de vérification des données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!