Die Bootstrap-Tabelle ist leicht und featurziger Daten, die in Tabellenform angezeigt werden, die Einzelauswahl, Kontrollkästchen, Sortieren, Paging, Anzeige-/Ausblenden-Spalten, feste Titel-Scroll-Tabelle, reaktionsschnelles Design, Ajax-Lade-JSON-Daten, Klicken Sie auf Sortierte Spalten, Kartenansichten usw. ein.
Bootstrap -Tabellenserie:
Detaillierte Erläuterung der JS -Tabellenkomponenten -Artefakt -Bootstrap -Tabelle (Grundversion)
Das Bootstrap -Tabellenkomponenten -Artefakt der JS -Komponentenreihe [Endkapitel]
Das Artefakt der Bootstrap -Tabellenkomponenten -Artefakt der JS -Komponentenserie [2. Eltern-Sohn-Tabelle und Zeilensäule] Bestellung]
1. Effektanzeige
Heute werde ich die folgende Methode geringfügig ändern. Schauen wir uns zunächst den Implementierungseffekt an und stellen dann später die Code -Implementierung und die Vorsichtsmaßnahmen ein. Komm schon, schicken wir die Renderings:
1. Vater und Sohn Tischtrending
2. Reihenordnung
Vor der Bestellung
Ziehen Sie die Zeile, um sie in die erste Zeile zu sortieren
3. Spaltenbestellung
Vor der Bestellung
Ziehen Sie die Sortierung der Spalte Title Title
Nach der Bestellung
2. Detaillierte Erläuterung des Vater-Sohn-Tabellencode
Im vorherigen Kapitel haben wir die grundlegende Verwendung der Bootstrap -Tabelle eingeführt. Bei der Initialisierung der Tabelle gibt es eine Eigenschaft "Detailview". Stellen Sie es auf True ein, und Sie können ein Symbol in Form von "+" vor jeder Reihe sehen. Wenn Sie auf dieses Symbol klicken, wird das Ereignis ausgeladen, das die Subtisch lädt. Dies ist das allgemeine Prinzip. Schauen wir uns den Code an, er ist eigentlich sehr einfach.
1. Initialisieren Sie die Tabelle und registrieren Sie die Zeile, um das Ereignis zu erweitern
$("#tb_powerset").bootstrapTable({url: '/api/MenuApi/GetParentMenu',method: 'get',detailView: true,//Parent and Child Table//sidePagination: "server",pageSize: 10,pageList: [10, 25],columns: [{field: 'MENU_NAME',title: 'menu name'}, {field: 'Menü_url', Titel: 'Menü url'}, {Feld: 'Elternteil', Titel: 'übergeordnetes Menü'}, {Feld: 'Menü_Level', Titel: 'Men -Level'}, // Ereignisse registrieren, die Untertables laden, {optable).Schauen wir uns die drei Parameter der entsprechenden Methodenfunktion (Index, Zeile, $ detail) des subtisch -Ladeereignisses Onexpandrow an.
Index: Der Zeilenindex der aktuellen Zeile der übergeordneten Tabelle.
Zeile: JSON -Datenobjekt der aktuellen Zeile der übergeordneten Tabelle.
$ detail: Das TD -Objekt in der neuen Zeile, die in der aktuellen Zeile erstellt wurde.
Der dritte Parameter ist besonders wichtig, da die generierte subtable Tabelle im $ Detail -Objekt geladen wird. Die Bootstrap -Tabelle generiert das $ detail -Objekt für uns, und dann müssen wir es nur mit der gewünschten Tabelle füllen.
2. Schauen wir uns die Methode an, die sich initiTable () ansehen.
// Subtable (drahtlose Schleife) oinit.initsuBtable = Funktion (Index, Zeile, $ detail) {var parentID = row.menu_id; var cur_table = $ detail.html ('<Table> </table>'). Find ('table'); $ (cur_table). 'get', queryparams: {strparentid: parentId}, ajaxoptions: {strparentId: parentId}, clickToSelect: true, detailView: true, // Die übergeordnete Child-Tabelle eindeutig: "Menu_Id", PageSize: 10, Pagelist: [10, 25], Spalte: [{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{} Name '}, {field:' Menü_url ', Titel:' Menü url '}, {field:' parent_id ', title:' übergeordnetes Menü '}, {field:' mseu_Level ', Titel:' Menü Level '},], // Wireless Loop, um die untergeordnete Tabelle zu erfassen, bis die untergeordnete Tabelle einsxpandrow: function: function: ideen, $ $ $ $ subdaill. {oinit.initsuBtable (index, zeile, $ subdetail);}});};Daraus können wir erkennen, dass das Prinzip der Erzeugung eines Subtabels darin besteht, ein Tabellenobjekt cur_table zu erstellen und dann die Tabelleninitialisierung dieses Objekts zu registrieren. Ist es nicht sehr einfach ~~
3.. Detaillierte Erläuterung des Zeilenbestellcode
Der Zeilenbestellcode ist einfacher, schauen wir uns an.
1. Es sind zwei zusätzliche Referenzen erforderlich
<script src = "~/content/jQuery-ui-1.11.4.custom/external/jquery.tabled.js"> </script> <script src = "~/content/bootstrap-table/extlensions/reorder-strows/bootstrap-table-rorder.js"> </script>
2. Fügen Sie beim Definieren einer Tabelle auf der CSHTML -Seite zwei Attribute hinzu
<table id = "tb_order" data-Use-Row-attr-func = "true" data-reDordable-Rows = "true"> </table>
Anschließend müssen bei der Initialisierung der JS -Tabelle keine Änderungen vorgenommen werden, und die geladene Tabelle kann die Auftragsfunktion der Zeile realisieren.
4. Detaillierte Erläuterung des Spaltenbestellcode
Ähnlich wie die Zeilenreihenfolge. Die Spaltenbestellung wird wie folgt verwendet:
1. Verweisen Sie ein paar zusätzliche JS und CSS
<script src = "~/content/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder-columns.js"> </script> <link rel = "styleSheet" href = "../ assets/Beispiele.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"> </script> <script <script src = "https://rawgit.com/akottr/dragtable/master/jquery.dagtable.js"> </script> <scrc = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script> < src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script>
2. Fügen Sie beim Definieren einer Tabelle auf der CSHTML -Seite ein Attribut hinzu
<table id = "tb_departments" datenrekorderable-säulen = "true"> </table>
An anderer Stelle sind keine Änderungen erforderlich. Die geladene Tabelle kann die Spaltenbestellung realisieren. Ist es einfach?
5. Kontrollfilterung
Ursprünglich war dieser Artikel kurz vor dem Ende, ich erinnerte mich plötzlich daran, dass es im vorherigen Kapitel eine Suchfunktion gab. Es schien, dass die Suchfunktion nicht verwendet werden konnte, wenn das Serverpaging verwendet wurde. Also erinnerte ich mich, dass ich eine ähnliche Funktion hatte, die die Filterung jeder Spalte in CS zuvor ähnlich hatte. Der Blogger war wieder neugierig. Hat die Bootstrap -Tabelle auch diese Art der Filterung jeder Spalte in der Tabelle, sodass ich das Dokument überprüft habe. Das Ergebnis ist erfüllt und es gibt wirklich etwas ~~ Lass uns einen Blick darauf werfen.
1. Anzeige von Renderings
2. Code Beispiele
(1) zusätzliche JS einführen
<script src = "~/content/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"> </script>
(2) Definieren von Tabellenattributen und Header -Attributen
<table id = "tb_roles" data-filter-control = "true"> <thead> <tr> <th data-field Data-filter-control = "Eingabe"> Rollen-Standardseite </th> </tr> </tead> </table>
Da hier die Attribute des Tabellenheaders definiert sind, müssen Spalten bei der Initialisierung von JS nicht definiert werden.
(3) JS -Initialisierung
$ ('#tb_roles'). bootstrappable ({url: '/rollen/getrole', methode: 'get', toolbar: '#symbolbar', gestreift: true, cache: false, striped: true, pagination: true, sortable: true, true, queryparams: function (paramstype) {return param;},}, querytaramstype: "contracation param. Sidepagination: "Server", PageSize: 10, Pagelist: [10, 25, 50, 100], Suche: True, ShowColumns: True, ShowRefres: True, minimumCountColumns: 2, clickToSelect: true,});Zunächst glaubte der Blogger, dass diese Art von Suche nur den Benutzer Client pageln könnte, aber nach dem Debuggen war dies nicht der Fall. Die ursprünglichen Suchbedingungen könnten über JSON an den Server übergeben werden. Schauen wir uns den Debugging -Prozess an
Empfangen Sie Parameter im Hintergrund und deserialisieren sie
Auf diese Weise können wir die Abfragebedingungen gut an den Hintergrund übergeben. Sehr gut und mächtig. Dadurch wird die Mühe beseitigt, die Tabellensuchfunktion zu erweitern ~~
6. Zusammenfassung
Die oben genannten sind einige Erweiterungsanwendungen der Bootstrap -Tabelle. Es ist möglicherweise nicht unvollständig, und es gibt einige fortgeschrittene Verwendungen, die nicht eingeführt werden, wie z.
Der obige Inhalt ist das relevante Kenntnis des Bootstrap -Tabellenkomponenten -Artefakts [2. Vater und Sohn Tabelle und Zeile und Spaltenbestellung] wurden Ihnen vom Herausgeber vorgestellt. Ich hoffe, es wird für alle hilfreich sein!