


Comment ajouter des colonnes de bouton personnalisées dans la table Layui
May 16, 2025 am 11:42 AMLa fa?on d'ajouter une colonne de bouton personnalisée dans une table LayUI consiste à spécifier l'ID de modèle via la propriété de la barre d'outils et la gestion du bouton Cliquez sur Comportement via l'écoute de l'événement. Les étapes spécifiques incluent: 1. Utilisez l'attribut de la barre d'outils pour spécifier l'ID de modèle dans la configuration du tableau; 2. écrivez le contenu du modèle et définissez les boutons et leurs événements; 3. Utilisez le mécanisme d'écoute des événements pour gérer le comportement de clic du bouton. L'avantage de cette méthode est sa haute flexibilité, mais il convient de noter que trop de boutons peuvent affecter les performances.
introduction
Dans le développement Web moderne, les tables sont un composant d'interface utilisateur commun qui est puissant et flexible. Surtout lorsque vous utilisez des cadres frontaux comme LayUi, la possibilité de personnaliser les tables est devenue un sujet de discussion entre les développeurs. Aujourd'hui, nous explorerons comment ajouter des colonnes de bouton personnalisées à la table Layui pour aider tout le monde à manipuler les données de manière plus flexible dans le projet.
Grace à cet article, vous apprendrez à ajouter des colonnes de bouton à votre table LayUi et à mieux comprendre les avantages et les inconvénients de cette approche et les défis que vous pouvez rencontrer.
Examen des connaissances de base
Layui est un cadre d'interface utilisateur avant léger qui fournit des composants riches, où les tables sont couramment utilisées et des composants puissants. Les tableaux LayUI prennent en charge une variété de méthodes de manipulation et de présentation des données, tandis que l'ajout de colonnes personnalisées porte la fonctionnalité du tableau à un niveau supérieur.
Avant de commencer, assurez-vous que vous êtes familier avec l'utilisation de base de LayUI, y compris comment initialiser les tables et les éléments de configuration de base.
Analyse du concept de base ou de la fonction
Définition et fonction des colonnes de bouton personnalisées
Dans la table Layui, l'ajout d'une colonne de bouton personnalisée nous permet d'incorporer des boutons d'action dans chaque ligne de la table, tels que l'édition, la suppression, la visualisation des détails, etc. Ces boutons peuvent déclencher des actions spécifiques pour améliorer l'interaction des utilisateurs avec les données.
Exemple:
<Table Id = "Demo" Lay-Filter = "Test"> </ Table> <cript> Layui.use ('Table', fonction () { var table = LayUi.Table; table.render ({ elem: '#demo' , URL: '/ data.json' , Cols: [[ {champ: 'id', titre: 'id', largeur: 80, tri: true} , {champ: ?nom d'utilisateur?, titre: ?nom d'utilisateur?, largeur: 120} , {Field: 'Experience', Titre: 'Points', Width: 120, Sort: True} , {champ: 'signe', titre: 'signe'} , {Title: 'Operation', barre d'outils: '#bardemo', largeur: 150} ]] , page: vrai }); // Tableau d'événements de barre d'outils.on ('Tool (test)', fonction (obj) { var data = obj.data; if (obj.event === 'del') { couche.confirm ('fait-il vraiment supprimer la ligne', fonction (index) { obj.del (); couche.close (index); }); } else if (obj.event === 'edit') { couche.prompt ({ Formtype: 2 , valeur: data.email }, fonction (valeur, index) { obj.update ({ Email: valeur }); couche.close (index); }); } }); }); </cript> <! - Modèle de barre d'outils -> <script type = "text / html" id = "bardemo"> <a class = "LayUi-btn Layui-Btn-xs" Lay-Event = "Edit"> édition </a> <a class = "Layui-btn Layui-btn-danger Layui-btn-xs" Lay-Event = "Del"> Delete </a> </cript>
Dans cet exemple, nous spécifions un modèle ID #barDemo
via toolbar
et appliquons ce modèle à操作
lorsque le tableau est rendu. De cette fa?on, nous avons réussi à ajouter une colonne de bouton personnalisée à la table.
Comment ?a marche
Les colonnes de bouton personnalisées des tables LayUI sont implémentées via le moteur de modèle. Lors du rendu d'une table, il analyse et rendra le contenu HTML correspondant dans la cellule de la table en fonction de l'ID de modèle spécifié par toolbar
. Lorsque l'utilisateur clique sur ces boutons, Layui déclenchera l'opération correspondante via le mécanisme d'écoute des événements.
L'avantage de cette approche est la flexibilité et l'évolutivité, et vous pouvez personnaliser le style et le comportement des boutons comme vous le souhaitez. Cependant, il convient de noter que trop de boutons personnalisés peuvent affecter la vitesse de chargement et l'expérience utilisateur de la table.
Exemple d'utilisation
Utilisation de base
Dans l'exemple ci-dessus, nous avons montré comment ajouter des boutons d'édition et de suppression. L'utilisation de base consiste à spécifier toolbar
dans la configuration du tableau et à gérer le comportement de clic du bouton via l'écoute de l'événement.
Utilisation avancée
Si vous souhaitez ajouter plus de fonctions à la colonne de bouton, telles que les détails d'affichage, les opérations par lots, etc., vous pouvez le réaliser en étendant le contenu du modèle et la logique de traitement des événements.
Exemple:
<! - Modèle de barre d'outils étendue -> <script type = "text / html" id = "bardemoadvanced"> <a class = "Layui-btn Layui-Btn-Xs" Lay-Event = "Détail"> View </a> <a class = "LayUi-btn Layui-Btn-xs" Lay-Event = "Edit"> édition </a> <a class = "Layui-btn Layui-btn-danger Layui-btn-xs" Lay-Event = "Del"> Delete </a> <a class = "Layui-btn Layui-Btn-xs" Lay-Event = "Batch"> Opération par lots </a> </cript> <cript> Layui.use ('Table', fonction () { var table = LayUi.Table; table.render ({ elem: '#demo' , URL: '/ data.json' , Cols: [[ {champ: 'id', titre: 'id', largeur: 80, tri: true} , {champ: ?nom d'utilisateur?, titre: ?nom d'utilisateur?, largeur: 120} , {Field: 'Experience', Titre: 'Points', Width: 120, Sort: True} , {champ: 'signe', titre: 'signe'} , {Title: 'Operation', barre d'outils: '#bardeMoadvancing', largeur: 250} ]] , page: vrai }); // Tableau d'événements de barre d'outils.on ('Tool (test)', fonction (obj) { var data = obj.data; if (obj.event === 'Detail') { // Affichez la logique couche.open ({ Type: 1, Titre: ?Détails de l'utilisateur?, Contenu: '<div> Nom d'utilisateur:' data.userName '</div> <div> Points:' data.experience '</div>' }); } else if (obj.event === 'edit') { // Modifier Logic Layer.Prompt ({ Formtype: 2 , valeur: data.email }, fonction (valeur, index) { obj.update ({ Email: valeur }); couche.close (index); }); } else if (obj.event === 'del') { // Supprimer la couche logique.confirm ('fait-il vraiment supprimer la ligne', fonction (index) { obj.del (); couche.close (index); }); } else if (obj.event === 'Batch') { // Logic Operation Logic couche.open ({{ Type: 1, Titre: ?Fonctionnement par lots?, Contenu: '<div> Sélectionnez l'opération de lot à effectuer </div>' }); } }); }); </cript>
Dans cette utilisation avancée, nous avons ajouté des boutons pour afficher les détails et les opérations de lots et gérer ces nouvelles fonctionnalités via l'écoute des événements.
Erreurs courantes et conseils de débogage
- événement de bouton non licencié : Assurez-vous que votre propriété
lay-filter
est cohérente aveclay-filter
écouté, sinon l'événement ne sera pas déclenché correctement. - Erreur d'analyse du modèle : vérifiez si votre ID de modèle est correct et si le contenu du modèle répond aux exigences de Layui.
- Problèmes de performances : Si les données de la table sont grandes, trop de boutons personnalisés peuvent provoquer un chargement lent, envisager de charger à la demande ou de la pagination.
Optimisation des performances et meilleures pratiques
Dans les applications pratiques, il est très important d'optimiser les performances des tables Layui et de suivre les meilleures pratiques. Voici quelques suggestions:
- Chargement à la demande : pour de grands volumes de données, envisagez d'utiliser la fonction de pagination de Layui pour éviter de charger toutes les données à la fois.
- Simplifier les modèles : essayez de simplifier le contenu du modèle, de réduire les opérations DOM inutiles et d'améliorer la vitesse de rendu.
- Optimisation d'écoute d'événements : Pour les opérations de table complexes, vous pouvez envisager d'utiliser des délégués d'événements pour réduire le nombre d'écouteurs d'événements.
Exemple:
<Table Id = "Demo" Lay-Filter = "Test"> </ Table> <cript> Layui.use ('Table', fonction () { var table = LayUi.Table; table.render ({ elem: '#demo' , URL: '/ data.json' , Cols: [[ {champ: 'id', titre: 'id', largeur: 80, tri: true} , {champ: ?nom d'utilisateur?, titre: ?nom d'utilisateur?, largeur: 120} , {Field: 'Experience', Titre: 'Points', Width: 120, Sort: True} , {champ: 'signe', titre: 'signe'} , {Title: 'Operation', barre d'outils: '#bardemo', largeur: 150} ]] , page: vrai , limite: 10 // 10 éléments de données sont affichés sur chaque page, limites: [10, 20, 30] // Nombre d'affichage facultatif de pièces par page}); // Tableau d'événements de barre d'outils.on ('Tool (test)', fonction (obj) { var data = obj.data; if (obj.event === 'del') { couche.confirm ('fait-il vraiment supprimer la ligne', fonction (index) { obj.del (); couche.close (index); }); } else if (obj.event === 'edit') { couche.prompt ({ Formtype: 2 , valeur: data.email }, fonction (valeur, index) { obj.update ({ Email: valeur }); couche.close (index); }); } }); }); </cript> <! - Modèle de barre d'outils simplifiée -> <script type = "text / html" id = "bardemo"> <a class = "LayUi-btn Layui-Btn-xs" Lay-Event = "Edit"> édition </a> <a class = "Layui-btn Layui-btn-danger Layui-btn-xs" Lay-Event = "Del"> Delete </a> </cript>
Avec ces optimisations et les meilleures pratiques, vous pouvez ajouter de manière flexible les colonnes de bouton personnalisées dans vos tables LayUi tout en conservant de bonnes performances et une expérience utilisateur.
Dans les projets réels, j'ai rencontré une fois un cas intéressant: dans le système de gestion backend d'une grande plate-forme de commerce électronique, nous devons ajouter plusieurs boutons de fonctionnement à la liste des produits, y compris la liste, la suppression, l'édition, la suppression, etc. En raison de l'énorme quantité de données, nous avons adopté le chargement de pagination et le rendu à la demande, ce qui a considérablement amélioré la vitesse de réponse et l'expérience utilisateur du système. Ce cas m'a fait réaliser profondément que l'optimisation des performances et l'expérience utilisateur sont tout aussi importantes pendant le processus de développement.
J'espère que cet article vous aide à ajouter des colonnes de bouton personnalisées de manière flexible dans les tables Layui et à être à l'aise dans les projets réels.
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!

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!

Article chaud

Outils chauds

Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Tout d'abord, choisissez une plate-forme d'actifs numériques réputée. 1. Recommander des plates-formes traditionnelles telles que Binance, Ouyi, Huobi, Damen Exchange; 2. Visitez le site officiel et cliquez sur "Inscrivez-vous", utilisez votre e-mail ou votre numéro de téléphone mobile et définissez un mot de passe haute résistance; 3. Compléter la vérification du code de vérification par e-mail ou du téléphone mobile; 4. Après la connexion, effectuez une vérification d'identité (KYC), soumettez des documents de preuve d'identité et une reconnaissance faciale complète; 5. Activer la vérification d'identité à deux facteurs (2FA), définir un mot de passe de fonds indépendant et vérifier régulièrement l'enregistrement de connexion pour garantir la sécurité du compte, et enfin ouvrir et gérer avec succès le compte de devise virtuel USDT.

En tant que plate-forme de trading d'actifs numériques à la tête de Blockchain internationalement, Binance offre aux utilisateurs une expérience de trading s?re et pratique. Son application officielle intègre plusieurs fonctions de base telles que la visualisation du marché, la gestion des actifs, le trading de devises et le trading de devises fiduciaires.

Binance est une plate-forme de trading d'actifs numériques de renommée mondiale, offrant aux utilisateurs des services de trading de crypto-monnaie sécurisés, stables et riches. Son application est simple à concevoir et puissant, prenant en charge une variété de types de transactions et d'outils de gestion des actifs.

OKX est une plate-forme complète de services d'actifs numériques de renommée mondiale, offrant aux utilisateurs des produits et services diversifiés, notamment le spot, les contrats, les options, etc. Avec son expérience de fonctionnement fluide et son intégration de fonctions puissantes, son application officielle est devenue un outil commun pour de nombreux utilisateurs d'actifs numériques.

Binance est l'une des plates-formes de trading d'actifs numériques bien connues au monde, offrant aux utilisateurs des services de trading de crypto-monnaie s?rs, stables et pratiques. Grace à l'application Binance, vous pouvez afficher les conditions du marché, acheter, vendre et la gestion des actifs à tout moment, n'importe où.

Le contenu comprend le mécanisme de la SAR parabole Le principe de travail de la méthode de calcul du SAR parabole et la représentation visuelle du facteur d'accélération sur les cartes commerciales application de la parabole SAR sur les marchés des crypto-monnaies1. Identifiez l'inversion de tendance potentielle 2. Déterminez les meilleurs points d'entrée et de sortie3. Définir l'étude de cas de l'ordre des pertes d'arrêt dynamique: Scénario de trading d'ETH hypothétique SALS SALS SAR SAR Parabole et interprétation basée sur l'exécution du trading SAR parabole combinant Parabola SAR avec d'autres indicateurs1. Utilisez des moyennes mobiles pour confirmer la tendance 2. Indicateur de résistance relative (RSI) pour l'analyse de la momentum3. Bollinger Bands for Volatility Analysis Avantages de Parabola SAR et Limitations Avantages de Parabola SAR

Table des matières L'historique des prix de Solana et les données importantes du marché Données importantes dans le tableau des prix Solana: 2025 Prévisions de prix Solana: Optimiste 2026 Prévisions de prix Solana: Maintenir la tendance 2026 Prévisions de prix Solana: 2030 Solana Prévisions de prix à long terme: Top Blockchain? Qu'est-ce qui affecte les prévisions des prix du soleil? évolutivité et Solana: Avantages compétitifs devriez-vous investir dans Solana dans les prochaines années? Conclusion: Prospects des prix de Solana Conclusion: Solana a son excellente évolutivité, ses faibles co?ts de transaction et sa grande efficacité

Le navigateur Blockchain est un outil nécessaire pour interroger les informations de transaction de monnaie numérique. Il fournit une interface visuelle pour les données de blockchain, afin que les utilisateurs puissent interroger le hachage de transaction, la hauteur de blocage, le solde d'adresse et d'autres informations; Son principe de travail comprend la synchronisation des données, l'analyse, l'indexation et l'affichage de l'interface utilisateur; Les fonctions principales couvrent les détails de la transaction de requête, les informations de bloc, le solde d'adresse, les données de jetons et l'état du réseau; Lorsque vous l'utilisez, vous devez obtenir TXID et sélectionner le navigateur blockchain correspondant tel que Etherscan ou Blockchain.com pour rechercher; Interroger les informations de l'adresse pour afficher l'historique du solde et des transactions en entrant l'adresse; Les navigateurs grand public incluent Bitcoin's Blockchain.com, Ethereum's Etherscan.io, B
