Comment personnaliser la fonction du tableau de clic pour ajouter des données dans l'administrateur DCAT?

Tableau personnalisé de l'administration DCAT: cliquez pour ajouter des données et saisir des informations

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 de nouvelles lignes, et entrez le numéro et sélectionnez les couleurs dans la nouvelle ligne. Cela va au-delà de la fonctionnalité directe des tables intégrées DCAT Admin et nécessite une combinaison d'API JavaScript et back-end frontal.

Tout d'abord, ajoutez un bouton et une zone d'entrée d'ID au-dessus du tableau pour déclencher le processus d'addition de données. Nous pouvons utiliser la fonction de barre d'outils de l'administrateur DCAT pour implémenter:

1. Ajouter des boutons et des boîtes d'entrée:

 $ grid-> outils (fonction ($ outils) {
    $ tools-> Ajouter (Ajouter des données
        <input type="text" id="input-id" placeholder="输入ID">
Html
    ));
});

2. Événement de clic de bouton de liaison (javascript):

Utilisez le bouton JQuery Binding pour cliquer sur l'événement. Après avoir cliqué sur le bouton, obtenez l'ID dans la zone d'entrée et obtenez les données via l'API Backend AJAX Request.

 $ ('# add-data-btn'). cliquez sur (fonction () {
    Selt id = $ ('# input-id'). Val ();
    if (id) {
        $ .ajax ({
            URL: «/ your-ap-endpoint», // Remplacez par votre type API backend: «Get»,
            données: {id: id},
            Succès: fonction (réponse) {
                AddRowTotable (réponse);
            },
            Erreur: fonction (erreur) {
                alert («ajouter des données échoué!»);
                Console.Error (erreur);
            }
        });
    } autre {
        alert ('veuillez entrer id');
    }
});

3. Ajoutez une nouvelle ligne à la table (javascript):

addRowToTable est responsable de l'ajout des données renvoyées par le backend au tableau et contient la boîte d'entrée de quantité et le sélecteur de couleur. Supposons que les données renvoyées par le backend contient name .

 fonction addRowTotable (data) {
    Laissez newrow = $ ('<tr> ');
    newrow.append ('<td> «data.name»</td> '); // Afficher le nom newrow.append ('<td><input type="number" name="quantity"></td> '); // Boîte d'entrée de quantité newrow.append ('<td><select name="color"><option value="red"> rouge</option>
<option value="blue"> bleu</option>
<option value="green"> vert</option></select></td> '); // Sélecteur de couleurs $ ('# your-table-id tbody'). Ajouter (newrow); // remplace par votre identifiant de table
}<p> N'oubliez pas de remplacer <code>/your-api-endpoint</code> et <code>#your-table-id</code> pour votre adresse API et votre ID de table. L'API backend doit renvoyer les données correspondantes en fonction de l'ID d'entrée, par exemple: <code>{'name': 'ProductName'}</code> . Cet exemple fournit un cadre de base où vous pouvez ajuster les champs et les fonctions en fonction des besoins réels. Par exemple, vous pouvez utiliser des composants d'interface utilisateur plus avancés pour améliorer l'expérience utilisateur.</p>
</tr>

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!