Bootstrap Table Series:
Explication détaillée de la table de bootstrap d'artefact de la table JS Table (version de base)
L'artefact composant de table de table bootstrap de la série de composants JS [fin chapitre]
L'artefact composant de table de table bootstrap de la série de composants JS [2. Table parent-son et commande de colonne de ligne]
La table Bootstrap est des données légères et riches en fonctionnalités affichées sous forme de table, prenant en charge la sélection unique, les cases à cocher, le tri, le paginage, les colonnes d'affichage / masquer, la table de défilement de titre fixe, la conception réactive, le chargement de l'Ajax JSON Data, cliquez sur les colonnes triées, les vues de la carte, etc.
1. Affichage d'effet
1. Style de rangée de table
Par exemple, nous avons besoin d'afficher la page de commande, et les commandes avec différents statuts affichent des couleurs différentes, comme le montre la figure:
2. Modifier dans la ligne de formulaire
Dans le premier article, un ami du parc a demandé au blogueur s'il pouvait soutenir l'effet de l'édition au sein de l'industrie, et la réponse était oui. Jetons un coup d'œil à l'effet:
Avant l'édition
Cliquez sur une cellule de données
Après édition, terminer
3. Combinaison de lignes et de colonnes de tables
Les blogueurs pensent qu'il est très courant pour les fusions de base, en particulier lors de la mise en place de rapports de page. Jetons un coup d'œil à l'effet:
La page actuelle est incomplète, cliquez pour entrer et jetez un œil. Et ça? L'effet est assez bon.
4. Exportation de données de table
En ce qui concerne l'exportation de données de table, le tableau bootstrap prend en charge l'exportation de trois modes: basique, tout, sélectionné. C'est-à-dire l'exportation de données de la page actuelle, toutes les exportations de données et l'exportation de données sélectionnées. Il prend également en charge l'exportation de divers types de fichiers, tels que les formats Excel, XML, JSON et d'autres formats communs.
Exporter la page actuelle pour exceller
Exporter toutes les données du tableau
Exporter les données de ligne sélectionnées
Quant à l'exportation d'autres types de fichiers, il est essentiellement le même qu'Excel, donc l'effet ne sera pas affiché.
2. Exemple de code de style de ligne de table
En ce qui concerne le paramètre de style des lignes de table, d'autres fonctions sont ses fonctions les plus élémentaires. Pourquoi le mettre dans le troisième article? C'est parce que le blogueur pense que cette fonction peut être utilisée partout. Bien sûr, l'effet n'est pas difficile. Vous pouvez également obtenir la couleur d'arrière-plan de TR en utilisant jQuery, mais le blogueur pense que puisque la table bootstrap fournit un mécanisme pour définir la couleur d'arrière-plan de la ligne, pourquoi ne pas utiliser son API intégrée. Voyons comment l'implémenter.
Lors de l'initialisation du tableau
// Initialiser la table $ ('# tb_order'). Bootstraptable ({url: '/ tablestyle / getOrder', // demande de la méthode URL (*): 'get', // demande de la méthode (*) // barre d'outils: '#toolbar', // qui est à rayures par le conteneur par le bouton de l'outil, // où l'affichage de la ligne, l'intervalle de ligne, l'intervalle de la ligne, le cache: faux, Pour définir cette propriété (*) Pagination: true, // s'il faut afficher la pagination (*) triable: false, //, s'il faut activer le tri: "ASC", // Tri Method QueryParams: OtableInit.Queryparams, // Pagination Paramètres (*) Sidepagination: "serveur", // Méthode de pagination: le client Pagination, la pagination du serveur de serve Page à charger, Pages de page par défaut: 10, // Nombre de lignes d'enregistrement par page (*) PageList: [10, 25, 50, 100], // Nombre de lignes par page pour sélectionner (*) la recherche: TRUE, // La recherche de table est-elle affichée? showRefresh: true, // Le bouton de rafraîchissement affiche-t-il MinimumCountCoulumns: 2, // le nombre minimum de colonnes autorisées ClicktOSelect: true, // où activer la hauteur de sélection de la ligne: 500, // Hauteur de ligne, si l'attribut de hauteur n'est pas défini, le tableau ressent automatiquement la hauteur de la ligne en fonction de la colonne de la touche. true, // Le bouton bascule pour une vue détaillée et la liste de visualisation de la vue: false, // La vue détaillée est-elle détaillée: false, // La table parent-child a-t-elle la rowstyle: function (ligne, index) {// il y a 5 valeurs ici représentant les couleurs dans 5 [active ',' Success ',' info ',' Warning ',' danger ']; var strclass = "; Schedulé ") {strClass = 'Success'; // Il y a aussi un actif} else if (row.order_status ==" supprimé ") {strclass = 'danger';} else {return {};} return {Classes: strclass}}, columns: [{checkbox: true}, {field: 'order_no', title: '. 'Order_type', titre: 'Order Type'}, {champ: 'order_status', titre: 'Order Status'}, {champ: 'Remark', titre: 'Remarks'},]});En fait, l'accent est mis sur ce paramètre:
Rowstyle: fonction (ligne, index) {// il y a 5 valeurs ici représentant les couleurs en 5 ['active', 'success', 'info', 'avertissement', 'danger']; var strclass = ""; if (row.order_status == "à planifier") {strclass = 'success'; // il y a aussi un actif} else if (row.Order_status == ")") {strclass = 'danger';} else {return {};} return {classes: strclass}},La table bootstrap prend en charge les couleurs d'arrière-plan de la ligne de la table en 5, à savoir «active», «succès», «info», «avertissement», «danger». Quant à chaque couleur d'arrière-plan correspondante, vous pouvez le voir en exécutant le code. En ce qui concerne la valeur de retour de cette méthode, le blogueur l'a également étudié pendant longtemps lorsqu'il l'a utilisé pour la première fois. Selon la table des règles de bootstrap, il est nécessaire de renvoyer un type d'objet JSON-format tel que: {Classes: StrClass}.
3. Exemple de code d'édition dans la ligne de formulaire
En ce qui concerne l'édition de table, plusieurs fichiers JS qui doivent être étendus à l'aide de la table bootstrap.
1. Introduire des fichiers JS supplémentaires
<link rel = "Stylesheet" href = "// rawgit.com/vitalet/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"><script src = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script><script src =" ~ / contenu / bootstrap-table / extensions / editable / bootstrap-table-editable.js "> </cript>
2. Lors de la définition d'une table sur la page CSHTML, ajoutez deux attributs
<table id = "tb_departments"> <thead> <tr> <th data-field = "name" data-éditable = "true"> Nom du département </th> <th data-field = "Parentname"> département supérieur </th> <th data-field = "Level" data-editable = "true"> département </th> <th data-field = "DESC" DATA " data-editable = "true"> Descriptor </th> </tr> </tead> </ table>
S'il est initialisé dans JS, la méthode d'écriture est la suivante:
{champ: "nom", titre: "nom", modifiable: true}3. Enregistrez l'édition et enregistrez les événements lors de l'initialisation de la table en js
$ ('# tb_departments'). bootstraptable ({url: '/ editable / getDepartment', // demande de la méthode URL (*): 'get', // Méthode de demande (*) Barre d'outils: '#toolbar', // Le conteneur rayé par le bouton de l'outil est vrai, // où afficher la ligne de couleur, le cache de couleur: false, // à utiliser Cache, la ligne, donc dans la ligne Color Cache: False, Pour définir cette propriété (*) Pagination: true, // s'il faut afficher la pagine (*) triable: false, // s'il faut activer le tri: "ASC", // Tri Method QueryParams: OtableInit.QueryParams, // Passing Paramètres (*) Sidepagination: "Server", // Méthode de pagination: PAGE CLIENT PAGIN Première page PageSize: 10, // Nombre d'enregistrements par page (*) OneDitablesAVE: fonction (champ, row, oldvalue, $ el) {$ .ajax ({type: "Post", url: "/ editable / edit", data: {strjson: json.stringify (row)}, succès: fonction (data, status) {if (status == "Success") {alert (edit) réussi ");}}, error: function () {alert (" error ");}, complet: function () {}});}});Le point clé est de regarder la gestion de cet événement
OneDitablesAVE: fonction (champ, ligne, oldvalue, $ el) {$ .ajax ({type: "post", url: "/ editable / edit", data: {strjson: json.stringify (row)}, succès: function (data, status) {if (status == "success") {alert ("edit réussi");}}, erreur: fonction () {alert ("error");}, complet: function () {}});}La méthode correspondante doit gérer vous-même la logique enregistrée. Le champ Four Paramètres, Row, OldValue et $ el correspondent au nom de la colonne actuelle, à l'objet de données de la ligne actuelle, à la valeur avant la mise à jour et à l'objet jQuery de la cellule actuelle édité.
4. Exemple de la ligne de table et du code de fusion de la colonne
La fonction de fusion de colonne de ligne de la table ne nécessite pas de référence à d'autres fichiers JS. Il n'a qu'à utiliser la table ColSpan et Rowspan sur la page CSHTML pour y parvenir.
1. Page CSHTML
<table id = "tb_report"> <thead> <tr> <th Colspan = "4" data-valign = "middle" data-align = "Center"> Q1 </th> <th Colspan = "4" Data-Valign = "Middle" Data-Align = "Center" Datter </ Th> <th Colspan = "4" Data-Valign = "Middle" Data-Align = "Centre"> </ TH> "Data-Valign =" Midle data-field = "totalCount" Rowspan = "2" Data-Valign = "Middle" Data-Align = "Center"> Résumé annuel </th> </tr> <tr> <th Data-Field = "JANCOUNT" Data-Align = "Center"> Jan </ Th> <th Data-Field = "FebCount" Data-Align = "Center"> FebCount data-align = "Center"> mars </th> <th data-field = "firstQuarter" data-align = "Center"> FirstQuarter </th> <th data-field = "aprCount" data-align = "Center"> April </th> <th data-field = "MayCount" data-align = "Center"> May </ th> <th data-field = "junCount" data-align = "Center"> Jun </ th> <th data-field = "secondQuarter" data-align = "Center"> Quarter </th> <th data-field = "Julcount" Data-Align = "Center"> juillet </th> <th data-field = "agucount" data-align = "Center"> août </ th> <th data-field = "sepcount" data-align = "Center"> sep </ th> <th data-field = "ThirdQuarter" data-align = "Center"> Quarter 3 </th> <th data-field = "octCount" data-align = "Center"> octobre </th> <th data-field = "nvcount" data-align = "Center"> novembre </ th> <th data-field = "DecCount" data-align = "Center"> décembre </ th> <th data-field = "fowbarter" data-align = "Center"> Quarter 4 </th> </tr> </thead> </s table>
2. Il n'y a pas d'initialisation JS spéciale
$ ('# tb_report'). bootstraptable ({url: '/ groupColumns / getReport', // demande de la méthode URL (*): 'get', // Méthode de demande (*) Barre d'outils: '#toolbar', // Quel conteneur rayé par le bouton de l'outil est vrai, // où l'affichage de la ligne de la ligne, le cache de couleur: false, //, que ce soit à utiliser Cache, le TRUE, donc dans la ligne, le cache de couleur: faux, // Définissez cette propriété (*) Pagination: true, // s'il faut afficher la pagination (*) Sordeorder: "ASC", // Méthode de tri QueryParams: OtableInit.QueryParams, // Passage paramètres (*) Sidepagination: "Server", // Méthode de la pagination: Client Pinging Page, serveur Page de serveur (*) PageNumber: 1, // Initialize the First Page To chargement, Défendre Page Page Page Page: 1, 1, // Initial des lignes d'enregistrement par page (*) PageList: [10, 25, 50, 100], // Nombre de lignes par page pour sélectionner (*)});Et ça, est-ce facile? Bien sûr, certaines personnes ont dit que vous pouvez utiliser les attributs du tableau pour définir l'URL, la pagination et d'autres informations sans utiliser d'initialisation JS, directement dans CSHTML. En effet, si nous regardons son API, nous constaterons que chaque attribut qu'il initialise correspond à l'attribut d'une table. Taper comme
Si votre formulaire n'a pas d'événements spéciaux à gérer, il n'y a aucun problème.
5. Exemples de code d'exportation de données de table
La fonction d'exportation des données de table nécessite également un support JS étendu.
1. Introduire des fichiers JS supplémentaires
<script src = "~ / contenu / bootstrap-table / extensions / export / bootstrap-table-export.js"> </ script> <script src = "// rawgit.com/hhurz/TableExport.jquery.plugin/master/TableExport.js"> </ script>
2. Lorsque JS est initialisé
$ ('# tb_departments'). bootstraptable ({url: '/ export / getDepartment', // de demande de la méthode URL (*): 'get', // Méthode de demande (*) Barbar d'outils: '#toolbar', // Le conteneur rayé par le bouton d'outil est vrai, // où afficher la ligne de couleur, le cache de couleur: false, // à utiliser Cache, la ligne de défaut, donc dans la ligne Color Cache: False, Pour définir cette propriété (*) Pagination: true, // s'il faut afficher la pagine (*) triable: false, // s'il faut activer le tri: "ASC", // Tri Method QueryParams: OtableInit.QueryParams, // Passage Paramètres (*) Sidepagination: "Client", // Pagination Méthode: Page client, Page de serveur Page de serveur (*) PageNumber PageNumber: 1, Initiation Page Tenice, Page de serve PAGE PAGE PAGE DE DÉFAUT: 10, // Nombre de lignes d'enregistrement par page (*) PageList: [10, 25, 50, 100], // Nombre de lignes par page pour sélectionner (*) clicktoselect: true, showExport: true, ',' selected '. Nom '}, {Field:' Parentname ', Title:' Superior Department '}, {Field:' Level ', Title:' Department Level '}, {Field:' DESC ', titre:' Description '},]});Regardons les points clés: ces deux attributs
ShowExport: true, // s'il faut afficher le ExportDatatype: "Basic", // Basic ',' All ',' Selected'.showExport signifie s'il faut afficher le bouton exporté, ExportDatatatype signifie si le mode exporté est la page actuelle, toutes les données ou les données sélectionnées.
6. Résumé
Ce qui précède est l'effet de la fonction et le code simple pour l'implémenter. Le blogueur a constaté qu'il y avait plusieurs problèmes à résoudre.
1. La fonction de l'édition en ligne est de soumettre chaque cellule à l'arrière-plan, ce qui entraînera des opérations fréquentes de la base de données et se sent inappropriée. Je ne sais pas s'il existe une meilleure façon de soumettre chaque ligne à l'arrière-plan.
2. Bien que la fonction d'exportation soit très utile, elle n'est malheureusement pas prise en charge par IE Browser. Le blogueur a essayé l'exemple sur le site officiel, et il semble que IE ne peut pas l'exporter. À vérifier.
Ce qui précède est le contenu pertinent de l'artefact du composant Table Bootstrap Table [Fin Chapter] de la série de composants JS qui vous est présentée par l'éditeur. J'espère que ce sera utile à tous!