Comment personnaliser une table en clics pour ajouter des données dans l'administrateur DCAT?

Personnalisez le tableau où clique pour ajouter des données dans l'administrateur DCAT

Cet article décrit comment créer une table personnalisée dans l'administrateur DCAT (Laravel-Admin), permettant aux utilisateurs de cliquer sur les boutons pour ajouter des données et prend en charge la quantité d'édition et les couleurs du tableau. La figure suivante montre la fonction cible:

Étapes de mise en œuvre

1. Créez une table et ajoutez des boutons:

Dans l'administrateur DCAT, créez un tableau à l'aide d' grid et ajoutez un bouton à la barre d'outils de la table pour déclencher l'action Ajouter des données. L'extrait de code suivant montre comment créer une table et ajouter un bouton:

 utiliser dcat \ admin \ grid;
Utilisez dcat \ admin \ Layout \ Content;

Index de fonction publique (Contenu $ Contenu)
{
    Retour $ Contenu
        -> En-tête («gestion des données»)
        -> Description («Ajouter des données»)
        -> corps ($ this-> grid ());
}

grille de fonction protégée ()
{
    $ grid = new Grid (new yourModel ());

    $ grid-> outils (fonction (grid \ outils $ outils) {
        $ tools-> append (new \ dcat \ admin \ grid \ tools \ button ('AD data', 'btn-add-data') -> class ('btn btn-primary'));
    });

    // Définition de la colonne de table $ grid-> colonne ('id', 'id');
    $ grid-> colonne ('name', 'name');
    $ grid-> colonne («quantité», «quantité») -> moditable ();
    $ grid-> colonne ('couleur', 'couleur') -> select (['rouge' => 'red', 'bleu' => 'bleu', 'vert' => 'vert']);

    retourner $ grid;
}

2. Code JavaScript frontal:

Utilisez le bouton JQuery de liaison pour cliquer sur l'événement, obtenez les données via le serveur de demande AJAX et ajoutez les données à la table. Notez que Remplacer /admin/your-endpoint pour votre adresse d'interface de traitement backend, #your-grid-id pour votre ID de table. Pour une meilleure expérience utilisateur, il est recommandé d'utiliser la méthode de fonctionnement de la table fournie par DCAT Admin au lieu d'exploiter directement le DOM.

 $ (document) .on ('click', '.btn-add-data', function () {
    LET ID = invite ("Veuillez entrer ID");
    if (id) {
        $ .ajax ({
            URL: «/ admin / votre point de fin»,
            Type: «Get»,
            données: {id: id},
            Succès: fonction (données) {
                if (data) {
                    // Ajouter des lignes à l'aide de la méthode d'administration DCAT au lieu de manipuler directement le DOM
                    Dcat.grid.appendrow ('# your-grid-id', data); // Remplacez # votre-grid-id comme votre identifiant de table
                } autre {
                    alert («Aucune donnée trouvée»);
                }
            },
            Erreur: fonction (erreur) {
                alert ('Demande a échoué:' error.ResponseText);
            }
        });
    }
});

3. Backend gère les demandes AJAX:

La méthode du contrôleur backend traite la demande AJAX, requêtes les données basées sur l'ID et renvoie les données JSON.

 Utiliser illuminate \ http \ request;

Fonction publique GetDatum (demande $ demande)
{
    $ id = $ request-> input ('id');
    $ data = yourModel :: find ($ id);

    if ($ data) {
        retour de réponse () -> JSON ($ data);
    } autre {
        retour de réponse () -> JSON (null);
    }
}

4. Suggestions d'amélioration (en utilisant l'API de table de l'administrateur DCAT):

Pour mieux intégrer les fonctionnalités de l'administrateur DCAT, il est recommandé d'utiliser l'API fournie par DCAT admin pour manipuler des tables au lieu de manipuler directement le DOM. Cela garantit que votre code est compatible avec les mises à jour de l'administrateur DCAT et obtient une meilleure maintenance. Par exemple, vous pouvez envisager d'ajouter des lignes à l'aide de Dcat.grid.addRow() ou similaires. Cela nécessite une référence à la documentation de l'administrateur DCAT pour déterminer la méthode API la plus appropriée.

Grâce aux étapes ci-dessus, vous pouvez créer un tableau de données click-azété personnalisé dans l'administrateur DCAT. N'oubliez pas de remplacer YourModel par le nom de votre modèle et d'ajuster le code en fonction de votre situation réelle. L'utilisation de l'API fournie par l'administrateur DCAT peut rendre votre code plus concis, plus facile à maintenir et mieux s'intégrer au cadre.

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!