La table de bootstrap est des données légères et riches en fonctions 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 en chargement JSON, cliquez sur les colonnes triées, les vues de la carte, etc. Aujourd'hui, introduisons son utilisation légèrement plus avancée dans la combinaison de tables de la circuit.
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]
1. Affichage d'effet
Aujourd'hui, je changerai légèrement la méthode suivante. Voyons d'abord l'effet d'implémentation, puis introduisons la mise en œuvre du code et les précautions ultérieurement. Allez, envoyons les rendus:
1. Rendre la table du père et du fils
2. Commande de ligne
Avant la commande
Faites glisser la ligne pour le trier vers la première ligne
3. Commande de colonne
Avant la commande
Tri de titre de colonne de glisser
Après commande
2. Explication détaillée du code de table père-fils
Dans le chapitre précédent, nous avons introduit l'utilisation de base de la table bootstrap. Lors de l'initialisation du tableau, il existe une propriété "DetailView". Réglez-le sur True, et vous pouvez voir une icône sous la forme de "+" devant chaque ligne. Cliquez sur cette icône déclenche l'événement qui charge la sous-table. Ceci est le principe général. Regardons le code, c'est en fait très simple.
1. Initialisez le tableau et enregistrez la ligne pour agrandir l'événement
$ ("# tb_powerset"). bootstraptable ({url: '/ api / menuapi / getParentMenu', méthode: 'get', de détail: true, // parent et enfant table // sidepagination: "serveur", pagesize: 10, pageList: [10, 25], colonnes: [{champ: 'menu 'Menu_url', titre: 'Menu URL'}, {champ: 'Parent_id', Title: 'Menu parent'}, {champ: 'menu_level', Title: 'Men Level'},], // Registre des événements qui chargent des sous-tables.Jetons un coup d'œil aux trois paramètres de la fonction de méthode correspondante (index, ligne, $ détail) de l'événement de chargement de sous-table OnexpandRow.
Index: l'index de ligne de la ligne actuelle de la table parent.
Row: Objet de données JSON de la ligne actuelle de la table parent.
$ Detail: l'objet TD dans la nouvelle ligne créée sous la ligne actuelle.
Le troisième paramètre est particulièrement important car la table de sous-table générée est chargée dans l'objet $ Detail. Le tableau bootstrap génère l'objet $ Detail pour nous, puis nous avons juste besoin de le remplir avec le tableau que nous voulons.
2. Regardons la méthode Oinit.InitsubTable ()
// Initialiser la sous-table (boucle sans fil) Oinit.InitsubTable = function (index, row, $ Detail) {var ParentId = Row.Menu_id; var cur_table = $ Detail.html ('<Table> </ Table 'Get', QueryParams: {strAentid: parentid}, ajaxoptions: {strAentid: parentid}, clicktoselect: true, detboursview: true, // la table parent-enfant unique: "menu_id", pagesize: 10, pageList: [10, 25], colonnes: [{checkbox: true}, {fiel name '}, {champ:' menu_url ', titre:' menu url '}, {champ:' parent_id ', titre:' parent menu '}, {field:' menu_level ', titre:' menu Level '},], // Loop sans fil pour récupérer le tableau enfant jusqu'à {OInit.InitSubTable (index, row, $ subdetail);}});};À partir de cela, nous pouvons voir que le principe de génération d'une sous-table est de créer un objet de table cur_table, puis d'enregistrer l'initialisation du tableau de cet objet. N'est-ce pas très simple ~~
3. Explication détaillée du code de commande en ligne
Le code de commande de ligne est plus simple, jetons un coup d'œil.
1. Deux références supplémentaires sont requises
<script src = "~ / contenu / jQuery-ui-1.11.4.custom / external / jQuery.Tablednd.js"> </ script> <script src = "~ / contenu / bootstrap-table / extensions / reorder-rows / bootstrap-table-reorder-dwows.js"> </ script>
2. Lors de la définition d'une table sur la page CSHTML, ajoutez deux attributs
<table id = "tb_order" data-use-row-attr-func = "true" data-reorbleable-rows = "true"> </ table>
Ensuite, il n'est pas nécessaire d'apporter des modifications lors de l'initialisation de la table JS, et la table chargée peut réaliser la fonction de commande de ligne.
4. Explication détaillée du code de commande de colonne
Similaire à la commande de ligne. La commande de colonne est utilisée comme suit:
1. Référencer quelques JS et CSS supplémentaires
<script src = "~ / contenu / bootstrap-table / extensions / reorder-columns / bootstrap-table-reorder-columns.js"> </ script> <link rel = "stylesheet" href = "../ actifs / exemples.css"> <link rel = "Stylesheet" href = "https://rawgit.com/akottr/dragTable/master/DragTable.css"> <script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </cript> <script src = "https://rawgit.com/akottr/dragtable/master/jquery.dragte.js"> </ script> <script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </scripteur> <script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </ script>
2. Lorsque vous définissez une table sur la page CSHTML, ajoutez un attribut
<table id = "tb_departments" data-redesctionnable-columns = "true"> </ table>
Aucune modification n'est requise ailleurs. La table chargée peut réaliser la commande de colonne. Est-ce facile?
5. Filtrage de contrôle
À l'origine, cet article était sur le point de se terminer, je me suis soudain rappelé qu'il y avait une fonction de recherche dans le chapitre précédent. Il semblait que la fonction de recherche ne pouvait pas être utilisée lorsque la pagination du serveur était utilisée. Je me suis donc souvenu que j'avais une fonction similaire au filtrage de chaque colonne dans CS auparavant. Le blogueur était à nouveau curieux. La table Bootstrap a-t-elle également ce type de filtrage de chaque colonne du tableau, j'ai donc vérifié le document. Le résultat est rempli, et il y a vraiment quelque chose ~~ jetons un coup d'œil.
1. Affichage des rendus
2. Exemples de code
(1) Introduire des JS supplémentaires
<script src = "~ / contenu / bootstrap-table / extensions / filter-control / bootstrap-table-filter-control.js"> </ script>
(2) définir les attributs de table et les attributs d'en-tête
<table id = "TB_RORES" Data-Filter-Control = "True"> <thEad> <Tr> <TH Data-Field = "Role_name" Data-Filter-Control = "SELECT"> Nom de rôle </th> <th Data-Field = "Description" Data-Filter-Control = "Entrée"> Role Description </ TH> <TH Data-Field = "Role_Default" Data-Filter-Control = "Input"> Page de défaut de rôle </th> </tr> </dead> </s table
Étant donné que les attributs de l'en-tête de table sont définis ici, il n'est pas nécessaire de définir des colonnes lors de l'initialisation de JS.
(3) Initialisation JS
$ ('# tb_roles'). bootstraptable ({url: '/ role / getrole', méthode: 'get', barre d'outils: '# barre d'outils', rayé: true, cache: false, rayé: true, pagination: true, sortable: true, queryparams: fonction (param) {return param;}, queryparamstype: "limite", false " Sidepagination: "Server", PageSize: 10, PageList: [10, 25, 50, 100], recherche: true, showColumns: true, showRefresh: true, minimumCountColumns: 2, clicktoselect: true,});Au début, le blogueur pensait que ce type de recherche ne pouvait que paginer le client de l'utilisateur, mais après le débogage, ce n'était pas le cas. Les conditions de recherche d'origine pourraient être transmises au serveur via JSON. Regardons le processus de débogage
Recevoir des paramètres en arrière-plan et les désérialiser
De cette façon, nous pouvons bien passer les conditions de requête à l'arrière-plan. Très bon et puissant. Cela éliminera la difficulté de développer la fonction de recherche de table ~~
6. Résumé
Ce qui précède est quelques applications d'extension de la table bootstrap. Il peut ne pas être incomplet, et il existe des usages avancés qui ne sont pas introduits, tels que la fusion de lignes et de colonnes, de congélation de lignes et de colonnes, etc.
Le contenu ci-dessus est la connaissance pertinente de l'artefact du composant de table de table bootstrap [2. Ordre de table et de row et de lignes et de colonnes] Vous avez présenté par l'éditeur. J'espère que ce sera utile à tous!