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]
Die Bootstrap-Tabelle sind leichte und featurenreiche Daten, die in Tabellenform angezeigt werden und die Einzelauswahl, Kontrollkästchen, Sortieren, Paging, Anzeige-/Ausblenden-Spalten, feste Titel-Scroll-Tabelle, reaktionsschnelles Design, AJAX-Laden von JSON-Daten, klicken Sie auf Sortierte Spalten, Kartenansicht usw. an. Dann führt dieser Artikel die Bootstrap-Tabellenkomponent-Artifact-Kapitel der JS-Komponenten ein.
1. Effektanzeige
1. Tischreihenstil
Zum Beispiel müssen wir die Auftragsseite anzeigen, und Bestellungen mit unterschiedlichen Status zeigen unterschiedliche Farben, wie in der Abbildung gezeigt:
2. Bearbeiten Sie innerhalb der Formularzeile
Im ersten Artikel fragte ein Freund des Parks den Blogger, ob er die Auswirkungen der Bearbeitung innerhalb der Branche unterstützen könne, und die Antwort war ja. Schauen wir uns den Effekt an:
Vor der Bearbeitung
Klicken Sie auf eine Zelldaten
Nach der Bearbeitung vollständig
3. Kombination von Zeilen und Spalten von Tabellen
Blogger sind der Meinung, dass es für Rang-and-Rang-Fusionen sehr häufig ist, insbesondere bei Seitenberichten. Schauen wir uns den Effekt an:
Die aktuelle Seite ist unvollständig. Klicken Sie, um einzugeben und einen Blick darauf zu werfen. Wie wäre es damit? Der Effekt ist ziemlich gut.
4. Tabelle Datenexport
In Bezug auf den Export von Tabellendaten unterstützt die Bootstrap -Tabelle den Export von drei Modi: Basic, ALL, ausgewählt. Das heißt, der Datenexport der aktuellen Seite, alle Datenexports und ausgewählten Datenexports. Es unterstützt auch den Exportieren verschiedener Arten von Dateien, wie gemeinsame Excel, XML, JSON und andere Formate.
Exportieren Sie die aktuelle Seite in Excel
Exportieren Sie alle Daten in der Tabelle
Ausgewählte Zeilendaten exportieren
Was den Export anderer Dateientypen betrifft, so ist es im Grunde genommen der gleiche wie Excel, sodass der Effekt nicht angezeigt wird.
2. Beispiel für Tabellenzeilenstil -Code -Beispiel
In Bezug auf die Stileinstellung von Tabellenzeilen sind andere Funktionen die grundlegendsten Funktionen. Warum in den dritten Artikel einfügen? Das liegt daran, dass der Blogger der Meinung ist, dass diese Funktion überall verwendet werden kann. Natürlich ist der Effekt nicht schwierig. Sie können auch die Hintergrundfarbe von TR mit JQuery erreichen. Der Blogger ist jedoch der Ansicht, dass die Hintergrundfarbe der Zeile, da die Bootstrap-Tabelle einen Mechanismus bietet, die integrierte API verwenden. Mal sehen, wie man es implementiert.
Bei der Initialisierung der Tabelle
// Tabelle initialisieren $ ('#tb_order'). Bootstrappable ({url: '/tablestyle/getorder', // URL (*) Methode: 'Get', // Anforderungsmethode (*) // Symbolleiste: '#toolbar', // Welche Container, die mit dem Werkzeug strikt. need to set this property (*) pagination: true, //Whether to display paging (*) sortable: false, //Whether to enable sortOrder: "asc", //Sorting method queryParams: oTableInit.queryParams,//Pagination parameters (*) sidePagination: "server", //Pagination method: client client pagination, server server pagination (*) pageNumber: 1, // Initialisieren Sie die erste Seite, um zu laden. Alle Spalten ShowRefresh: True, // Führen Sie die Taste von Aktualisierung an. Showtoggle: True, // Führen Sie die Taste für detaillierte Ansicht und Listenansicht Cardview: Falsch, // DETADED VETALED VIELE View: False, // Funktioniert die übergeordnete Child-Tabelle Rowstyle: Funktion (Zeile, Index) {// Es gibt 5 Werte, die die Farben in 5 ['aktiv', 'Erfolg', 'info', 'Warning', ',', ',', ',', ']. "To be scheduled") {strclass = 'success';//There is also an active}else if (row.ORDER_STATUS == "Deleted") {strclass = 'danger';}else {return {};}return { classes: strclass }},columns: [{checkbox: true}, {field: 'ORDER_NO',title: 'Order number'}, {field: 'order_type', title: 'order typ'}, {field: 'order_status', title: 'order status'}, {field: 'bemerken', title: 'remarks'},]});Tatsächlich liegt der Fokus auf diesem Parameter:
RowStyle: Funktion (Zeile, Index) {// Es gibt 5 Werte, die die Farben in 5 ['Active', 'Erfolg', 'info', 'Warnung', 'danger']; var strclass = ""; if (row.order_status == "darstellen. {strclass = 'danger';} else {return {};} return {classes: strclass}},Die Bootstrap -Tabelle unterstützt die Zeilenhintergrundfarben der Tabelle in 5, nämlich "aktiv", "Erfolg", "Info", "Warnung", "Gefahr". Für jede entsprechende Hintergrundfarbe können Sie sie sehen, indem Sie den Code ausführen. In Bezug auf den Rückgabewert dieser Methode studierte der Blogger sie auch lange, als er sie zum ersten Mal benutzte. Nach den Regeln der Bootstrap-Tabelle ist es erforderlich, einen JSON-Format-Objekttyp wie: {Klassen: Strclass} zurückzugeben.
3. Beispiel für den Bearbeitung von Code in der Formularzeile
In Bezug auf die Tabellenbearbeitung müssen mehrere JS -Dateien mit der Bootstrap -Tabelle erweitert werden.
1. Einführen Sie zusätzliche JS -Dateien ein
<link rel = "stylesheet" href = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-edible.css"><Script src = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script><Script src =" ~/content/bootstrap-table/extensions/reditable/bootstrap-table-edable.js.js ">
2. Fügen Sie beim Definieren einer Tabelle auf der CSHTML -Seite zwei Attribute hinzu
<table id = "tb_departments"> <thead> <tr> <th data field daten-editable = "true"> Deskriptor </th> </tr> </tead> </table>
Wenn es in JS initialisiert wird, lautet die Schreibmethode wie folgt:
{Feld: "Name", Titel: "Name", editable: true}3.. Registrieren und speichern Sie Ereignisse, wenn Sie die Tabelle in JS initialisieren, und speichern Sie Ereignisse
$ ('#tb_departments'). Bootstrappable ({url: '/editable/getDepartment', // URL (*) Methode: 'Get', // Anforderungsmethode (*) Symbolleiste: '#toolbar', // Welche Container -Stripe, die von der Tool -Taste streift. Müssen diese Eigenschaft (*) Pagination festlegen: True, //, ob Paging (*) sortierbar angezeigt werden soll: Falsch, //, ob Sorder aktiviert werden soll: "ASC", // Sortiermethode Queryparams: otableInit.Queryparams, // Parametern übergeben (*) Seitenpagination: "Servernumme", 1/ // Paging Methode: Servers -Server -Server -Server -Server -Server -Server -Server -Server -Server -Server -Server -Server -Server -Server -Server -Server -Server -Server -Server -Server -Server -Server -Server -Server (*). Laden, Standard -Erstseiten -PageSize: 10, // Anzahl der Datensätze pro Seite (*) OnEditablesave: Funktion (Feld, Zeile, OldValue, $ el) {$ .ajax ({type: "post", url: "/bearbeitbar/bearbeiten", data: {strjson: json.stringify (tuw)}, erfolgreich (data, status) {if (status ") {allod ({allod) (daten, status) {if (status") {allod ({allod) (data, status) {if (Status == ") {allod ({allod" ({allod "({allod) (data, status) {wenn erfolgreich ");}}, Fehler: function () {alert (" error ");}, vollständig: function () {}});}});Der entscheidende Punkt besteht darin, die Behandlung dieses Ereignisses zu betrachten
OnEditablesave: Funktion (Feld, Zeile, OldValue, $ el) {$ .ajax ({type: "post", url: "/bearbeitet/bearbeiten", data: {strjson: json.stringify (row)}, Erfolg: function (Data, Status) {if (Status == "erfolgreich") {ALTERT ("ALTERT (" ERFORDERUNG ("; {alert ("error");}, vollständig: function () {}});}Die entsprechende Methode muss die gespeicherte Logik selbst verarbeiten. Das Feld Vier Parameter, Zeile, OldValue und $ El entsprechen dem Namen der aktuellen Spalte, dem Datenobjekt der aktuellen Zeile, dem Wert vor dem Update und dem Jquery -Objekt der bearbeiteten aktuellen Zelle.
V.
Die Zeilen-Säulen-Zusammenführungsfunktion der Tabelle erfordert keinen Verweis auf andere JS-Dateien. Auf der CSHTML -Seite muss nur Tabellen -Colspan und Rowspan verwendet werden, um dies zu erreichen.
1. CSHTML -Seite
<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"> viertel </th> <th colspan = "4" Data-Valign = "Middle" Middle "Middle" Middle "Middle" Middle "Middle" Middle ". data-align = "center"> viertel </th> <th data-field = "totalCount" rowSpan = "2" data-Valign = "Middle" data-align = "center"> jährliche Zusammenfassung </th> </tr> <tr> <th data-field = "jancount" data-Align = "Center"> Jan </th> </th> <th Data-Field = "feBcount"-"center"> Jan </th> <th Data field = "feBcount" data-align="center">FebCount</th><th data-field="MarCount" data-align="center">March</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 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">October</th><th data-field="NovCount" data-align="center">November</th><th data-field="DecCount" data-align = "center"> Dezember </th> <th data-field = "Forthquarter" data-align = "center"> Viertel 4 </th> </tr> </thead> </table>
2. Es gibt keine spezielle JS -Initialisierung
$ ('#TB_REport'). you need to set this property (*) pagination: true, //Whether to display pagination (*) sortOrder: "asc", //Sorting method queryParams: oTableInit.queryParams, //Passing parameters (*) sidePagination: "server", //Paging method: client client paging, server server paging (*) pageNumber: 1, //Initialize the first page to load, default first page PageSize: 10, // Anzahl der Datensatzzeilen pro Seite (*) Pagelist: [10, 25, 50, 100], // Anzahl der Zeilen pro Seite, um (*)}) auszuwählen;Wie wäre es mit dem, ist es einfach? Natürlich haben einige Leute gesagt, dass Sie die Tabellenattribute verwenden können, um URL, Pagination und andere Informationen ohne JS -Initialisierung direkt in CSHTML festzulegen. Wenn wir uns seine API ansehen, werden wir feststellen, dass jedes Attribut, das es initialisiert, dem Attribut einer Tabelle entspricht. Typ AS
Wenn Ihr Formular keine besonderen Ereignisse zu erledigen hat, gibt es überhaupt kein Problem.
5. Beispiele für Tabellendatenexportcode
Die Exportfunktion von Tabellendaten erfordert auch einige erweiterte JS -Unterstützung.
1. Einführen Sie zusätzliche JS -Dateien ein
<script src = "~/content/bootstrap-table/export/export/bootstrap-table-export.js"> </script> <script src = "// rawgit.com/hhurz/tableexport.jquery.plugin/master/tableExport.js"> </script>
2. Wenn JS initialisiert wird
$ ('#TB_DEPARTMENTS'). Bootstrappable ({url: '/exportieren/getDepartment', // URL (*) Methode: 'Get', // Anforderungsmethode (*) Symbolleiste anfordern need to set this property (*) pagination: true, //Whether to display paging (*) sortable: false, //Whether to enable sortOrder: "asc", //Sorting method queryParams: oTableInit.queryParams, //Passing parameters (*) sidePagination: "client", //Pagination method: client client paging, server server paging (*) pageNumber: 1, //Initialize the first page Zum Laden, Standard -Erstseiten -PageSize: 10, // Anzahl der Datensatzzeilen pro Seite (*) Pagelist: [10, 25, 50, 100], // Anzahl der Zeilen pro Seite, um (*) ClickToselekte: True, ShowExport: True, // IS ExportDatatTed: "Basic", // Basic ',' All ',', ',', ',', ',', ',', ',', ',', ',', ',' Selted '', aus. 'Name', Titel: 'Abteilungsname'}, {Feld: 'ParentName', Titel: 'Superior Department'}, {Feld: 'Level', Titel: 'Abteilungsstufe'}, {Feld: 'Desc', Titel: 'Beschreibung'},]});Schauen wir uns die wichtigsten Punkte an: diese beiden Attribute
showexport: true, // ob der exportDatatype angezeigt werden soll: "basic", // basic ',' alle ',' ausgewählt '.
6. Zusammenfassung
Das obige ist der Effekt der Funktion und der einfache Code, um sie zu implementieren. Der Blogger stellte fest, dass es mehrere Probleme gab, die gelöst wurden.
1. Die Funktion der Inline-Bearbeitung besteht darin, jede Zelle dem Hintergrund zu übermitteln, was zu häufigen Operationen der Datenbank führt und sich unangemessen anfühlt. Ich weiß nicht, ob es eine bessere Möglichkeit gibt, jede Zeile dem Hintergrund zu übermitteln.
2. Obwohl die Exportfunktion sehr nützlich ist, wird sie leider nicht vom IE -Browser unterstützt. Der Blogger hat das Beispiel auf der offiziellen Website ausprobiert, und es scheint, dass der IE es nicht exportieren kann. Überprüft werden.
Das obige ist der relevante Inhalt des Bootstrap -Tabellenkomponenten -Artefakts [Endkapitel] der vom Editor vorgestellten JS -Komponentenserie. Ich hoffe, es wird für alle hilfreich sein!