Une grille modifiable avec jQuery, bootstrap et bouclier UI Lite

Dans cette courte pointe, je fournis quelques étapes faciles pour configurer une grille modifiable (ou un tableau) en utilisant Bootstrap et Shield UI Lite.

SHIELD UI LITE est une bibliothèque jQuery open source qui comprend, entre autres composants, une grille jQuery. La grille prend en charge l'édition à l'extérieur, ainsi que le tri, le regroupement et les différents éditeurs de colonnes.

Les plats clés

• SHIELD UI LITE est une bibliothèque jQuery open source qui comprend une grille jQuery, l'édition de support, le tri, le regroupement et les différents éditeurs de colonnes. La grille prend également en charge la liaison de tous les types de données, des structures JSON locales aux services Web distants.
• Pour configurer une grille modifiable, vous devez utiliser un conteneur d'amorçage standard, ajouter des références à toutes les ressources utilisées dans l'échantillon, telles que les feuilles de styles, les fichiers JavaScript et les données, puis configurer le composant Shield UI Lite Grid Component Grid . La grille peut être personnalisée à l'aide de CSS et est compatible avec d'autres bibliothèques JavaScript.
• La grille modifiable peut être utilisée avec une base de données, peut charger des données provenant de diverses sources telles qu'un tableau local, un fichier JSON ou un serveur distant, et peut exporter des données vers divers formats tels que CSV, Excel et PDF. Il prend également en charge les fonctionnalités de validation intégrées et la gestion des erreurs.

À propos du bouclier ui lite

SHIELD UI est une société de développement de composants Web spécialisée dans la conception, le développement et la commercialisation de widgets d'interface utilisateur pour le développement de JavaScript pur, ainsi que pour le développement dans ASP.NET, ASP.NET MVC et Java Wicket. La société propose des composants de visualisation des données, ainsi qu'une gamme entière de composants de développement Web standard, tels que des grilles, des codes à barres - des composants d'entrée étendus en une et deux dimensions - tels que des boîtes de texte numériques et masquées, et bien d'autres.

La suite Shield UI Lite est l'une des plus dernières bibliothèques open source du marché et ce qui est spécifique à ce sujet, c'est qu'il contient une richesse de composants, qui sont tous riches et matures. Cela inclut la grille JQuery, qui prend en charge toutes les opérations importantes de la grille Web à l'extérieur de la boîte. Le composant prend en charge l'édition avec l'édition en ligne ou en édition standard, ainsi que l'édition avec un formulaire externe. Est également pris en charge est l'édition de cellules.

En plus de cela, le SHIELD UI Grid a un composant de source de données intégré, qui facilite la liaison à tous les types de données - des structures JSON locales, aux services Web distants; La source de données intégrée prend également en charge toutes les opérations de suppression, de mise à jour et d'insertion.

Pour les applications lourdes de données, le widget JQuery de Shield UI offre une fonction de défilement virtuelle améliorée améliore considérablement les performances, même lorsque vous travaillez avec des millions d'enregistrements de données réels. Pour voir plus d'exemples du composant et de ses options, vous pouvez vous référer aux démos en ligne ou à la documentation.

en utilisant le code

Pour la grille modifiable que nous allons créer, j'utilise une source de données locale afin de garder les choses simples. Le code source des bibliothèques peut être trouvé sur GitHub. L'exemple de code complet, ainsi que toutes les données d'échantillons utilisées, ainsi que CSS supplémentaires sont disponibles dans la démo de codepen.

La première étape de la configuration de la mise en page consiste à utiliser un conteneur de bootstrap standard. Dans notre cas, il s'agit d'une div avec un panneau d'amorçage imbriqué à l'intérieur. Étant donné que tout composant de réseau Web standard héberge généralement de nombreuses données, notre disposition s'étend sur toute la largeur de l'écran.

Le code de cette étape est simple et ressemble à ceci:

<span><span><span><div> class<span>="col-md-12"</span>>
  <span><span><span><div> class<span>="panel panel-default"</span>>
    <span><span><span><div> class<span>="panel-heading"</span>>
      <span><span><span><h4 id="class-span-text-center-span-gt"> class<span>="text-center"</span>></h4></span>Bootstrap Editable jQuery Grid
</span>      <span><span><span><span> class<span>="fa fa-edit pull-right bigicon"</span>></span><span><span></span></span>></span><span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span>
</div></span>></span>
</span>    <span><span><span><div> class<span>="panel-body text-center"</span>>
      <span><span><span><div> id<span>="grid"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span></span>

C'est tout le HTML nécessaire pour configurer l'échantillon. L'étape suivante consiste à ajouter des références à toutes les ressources utilisées dans l'échantillon, telles que les feuilles de style, les fichiers JavaScript et les données.

Les données utilisées pour l'exemple sont une collection JSON standard, qui est chargée séparément afin d'être transmise au composant de la grille. L'utilisation d'une source de données locale simplifie la configuration. De plus, nous avons besoin de la feuille de style pour la grille et du javascript pour l'initialiser.

L'inclusion de ces ressources est démontrée ci-dessous:

le CSS:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="shieldui-lite.min.css"</span>></span></span></span>

Les scripts:

<span><span><span><script> src<span >="shieldui-lite-all.min.js"</script></span>></span><span><span></span>></span>
</span><span><span><span><script> src<span >="shortGridData.js"</script></span>></span><span><span></span>></span></span>

Configuration de la grille

L'étape suivante du processus consiste à configurer le composant Shield UI Lite Grid. Une fois que nous avons inclus les ressources nécessaires, nous pouvons l'initialiser avec un peu de javascript dans le document.

Il y a deux parties logiques dans la description du composant. Le premier consiste à gérer la source de données pour les données qui seront visualisées dans la grille, et l'autre configure les colonnes, qui seront réellement rendues, ainsi que tous les paramètres supplémentaires, tels que le tri, les effets de survol, etc.

La grille SHIELD UI Lite a une propriété de source de données intégrée, ce qui facilite la liaison du widget à toutes les données - locales ou distantes. Pour lier la source de données aux données JSON, nous utilisons la propriété de données et décrivons les champs, qui seront récupérés.

Le code pour y parvenir est illustré ci-dessous:

<span>dataSource: {
</span>  <span>data: gridData,
</span>  <span>schema: {
</span>    <span>fields: {
</span>      <span>id: { path: "id", type: Number },
</span>      <span>age: { path: "age", type: Number },
</span>      <span>name: { path: "name", type: String },
</span>      <span>company: { path: "company", type: String },
</span>      <span>month: { path: "month", type: Date },
</span>      <span>isActive: { path: "isActive", type: Boolean },
</span>      <span>email: { path: "email", type: String },
</span>      <span>transport: { path: "transport", type: String }
</span>    <span>}
</span>  <span>}
</span><span>}</span>

activer l'édition

L'étape suivante du processus de configuration de l'application est de choisir les propriétés disponibles dans la grille, ainsi que la description des colonnes, qui seront rendues.

Chaque colonne peut avoir des propriétés supplémentaires, telles que le texte d'en-tête et la largeur. Le réglage de la propriété de largeur n'est pas obligatoire, mais offre une flexibilité supplémentaire pour distribuer la disposition globale.

Le code pour toutes les propriétés du contrôle est répertorié ci-dessous:

<span><span><span><div> class<span>="col-md-12"</span>>
  <span><span><span><div> class<span>="panel panel-default"</span>>
    <span><span><span><div> class<span>="panel-heading"</span>>
      <span><span><span><h4 id="class-span-text-center-span-gt"> class<span>="text-center"</span>></h4></span>Bootstrap Editable jQuery Grid
</span>      <span><span><span><span> class<span>="fa fa-edit pull-right bigicon"</span>></span><span><span></span></span>></span><span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span>
</div></span>></span>
</span>    <span><span><span><div> class<span>="panel-body text-center"</span>>
      <span><span><span><div> id<span>="grid"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span></span>

Configuration d'un éditeur personnalisé

Le widget prend en charge un certain nombre d'éditeurs pratiques hors de la boîte. Une fois le contrôle mis en mode édition, en cliquant sur l'une des cellules, l'éditeur de la cellule dépendra du type de valeurs dans cette cellule. Par exemple, une valeur numérique aura une entrée numérique avec des boutons d'incrément et de décrémentation. Une colonne de date aura une entrée de calendrier pour choisir facilement une date.

Il est également la possibilité de fournir un éditeur personnalisé pour une colonne. Par exemple, au lieu d'avoir une zone de texte standard, nous pouvons avoir une liste déroulante avec toutes les valeurs pour cette colonne.

Ceci peut être réalisé en s'attachant à l'événement GetCustomEditorValue et en passant un éditeur personnalisé pour chaque cellule.

Ceci est démontré dans l'extrait de code suivant pour les événements:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="shieldui-lite.min.css"</span>></span></span></span>

et l'éditeur personnalisé:

<span><span><span><script> src<span >="shieldui-lite-all.min.js"</script></span>></span><span><span></span>></span>
</span><span><span><span><script> src<span >="shortGridData.js"</script></span>></span><span><span></span>></span></span>

Si vous souhaitez consulter plus d'informations sur les options du widget de la grille, vous pouvez vous référer à cette section de la documentation.

Ceci termine notre configuration et le contrôle est prêt à l'emploi.

Affichez la démo fonctionnelle complète sur Codepen

Assurez-vous de cliquer à l'intérieur de l'une des cellules de contenu du tableau / de la grille pour voir comment fonctionne la fonctionnalité d'édition. Vous pouvez consulter plus d'exemples sur l'utilisation du composant Shield UI jQuery Grid sur le site Web de l'interface utilisateur SHIELD.

Questions fréquemment posées (FAQ) sur la grille modifiable avec jQuery et bootstrap

Comment puis-je personnaliser l'apparence de la grille modifiable?

L'apparition de la grille modifiable peut être personnalisée à l'aide de CSS. Vous pouvez modifier les couleurs, les polices, les frontières et autres éléments visuels de la grille pour correspondre à la conception de votre site Web. Vous pouvez également utiliser les cours intégrés de Bootstrap pour styliser rapidement votre grille. Pour des personnalisations plus avancées, vous pouvez utiliser l'API de Shield UI Lite, qui offre une variété d'options pour modifier l'apparence et le comportement de la grille.

Puis-je utiliser la grille modifiable avec d'autres bibliothèques JavaScript?

Oui, la grille modifiable est compatible avec d'autres bibliothèques JavaScript telles que AngularJS, React et Vue.js. Vous pouvez utiliser ces bibliothèques pour améliorer les fonctionnalités de votre grille, comme l'ajout de capacités dynamiques de chargement, de tri et de filtrage.

Comment puis-je ajouter ou supprimer les lignes dans la grille modifiable?

Vous pouvez ajouter ou supprimer les lignes de la grille modifiable à l'aide de l'API de la grille. L'API fournit des méthodes pour ajouter de nouvelles lignes, supprimer les lignes existantes et mettre à jour les données de la grille. Vous pouvez également utiliser l'API pour sélectionner programmatiquement les lignes, qui peuvent être utiles pour implémenter des fonctionnalités d'édition ou de suppression en vrac.

Comment puis-je valider la saisie de l'utilisateur dans la grille modifiable?

Vous pouvez valider la saisie de l'utilisateur dans la grille modifiable à l'aide des fonctionnalités de validation intégrées de Shield UI Lite. La bibliothèque fournit une variété de règles de validation, telles que les champs requis, les gammes de nombres et les formats de messagerie. Vous pouvez également créer des règles de validation personnalisées pour gérer des scénarios de validation plus complexes.

Puis-je exporter les données de la grille modifiable?

Oui, vous pouvez exporter les données de la grille modifiable vers divers formats comme CSV, Excel et PDF. Cela peut être fait en utilisant l'API de la grille, qui fournit des méthodes d'exportation des données de la grille. Vous pouvez également personnaliser les données exportées, telles que l'inclusion ou l'exclusion de certaines colonnes, ou la mise en forme des données d'une manière spécifique.

Comment puis-je charger des données dans la grille modifiable?

Vous pouvez charger Données dans la grille modifiable à partir de diverses sources telles qu'un tableau local, un fichier JSON ou un serveur distant. L'API de la grille fournit des méthodes de chargement de données, et vous pouvez utiliser ces méthodes en combinaison avec AJAX pour charger les données d'un serveur.

Puis-je utiliser la grille modifiable dans une application mobile?

Oui , la grille modifiable est réactive et peut être utilisée dans une application mobile. La disposition de la grille s'ajustera automatiquement pour s'adapter à la taille de l'écran, et vous pouvez également personnaliser le comportement de la grille sur différents appareils à l'aide des requêtes multimédias CSS.

Comment puis-je trier et filtrer les données dans la grille modifiable?

Vous pouvez trier et filtrer les données dans la grille modifiable à l'aide de l'API de la grille. L'API fournit des méthodes de tri des données par une ou plusieurs colonnes et pour filtrer les données basées sur divers critères. Vous pouvez également utiliser ces méthodes en combinaison avec AJAX pour implémenter le tri et le filtrage côté serveur.

Puis-je utiliser la grille modifiable avec une base de données?

Oui, vous pouvez utiliser la grille modifiable avec une base de données. Vous pouvez charger des données à partir d'une base de données dans la grille, et vous pouvez également mettre à jour la base de données avec des modifications apportées dans la grille. Cela peut être fait en utilisant Ajax en combinaison avec un langage côté serveur tel que PHP, ASP.NET ou Node.js.

Comment puis-je gérer les erreurs dans la grille modifiable?

Vous Peut gérer les erreurs dans la grille modifiable à l'aide des fonctionnalités de gestion des erreurs intégrées de Shield UI Lite. La bibliothèque fournit des méthodes pour afficher les messages d'erreur, mettre en évidence les champs non valides et empêcher l'enregistrement des données non valides. Vous pouvez également personnaliser le comportement de gestion des erreurs en fonction de vos besoins.

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!