Zusammenfassung der Verwendung von Bootstrap-Tabellen
Bootstrap-table ist ein Tabellenplug-In, das auf der Grundlage von Bootstrap-Table geschrieben wurde und speziell zum Anzeigen von Daten verwendet wird. Bootstrap stammt von Twitter und ist derzeit das beliebteste Front-End-Frontwork. Bootstrap basiert auf HTML, CSS und JavaScript und hat die Vorteile einer einfachen, flexiblen und schnellen Front-End-Entwicklung. Ich werde hier nicht dasselbe wie Bootstrap beschreiben. Dieser Artikel wird sich darauf konzentrieren, einen Teil meines Verständnisses für die Verwendung von Bootstrap-Table in meinem Projekt zu erklären und zu lernen, wie man es lernt.
Lassen Sie mich zunächst die Beziehung zwischen JQuery, Bootstrap und Bootstrap-Table erklären. Viele Teile des Bootstrap-Codes beinhalten JQuery, dh Bootstrap hängt von JQuery ab, und der Bootstrap-Tisch, den wir verwenden möchten, wird auf der Basis von Bootstrap erstellt. Bevor Sie den Bootstrap-Tisch verwenden, müssen Sie sich auf die zugehörigen JS- und CSS-Dateien von JQuery und Bootstrap beziehen.
Als nächstes sind die Merkmale von Bootstrap-Table: Mit JQuery-UI, JQGrid und anderen Plug-Ins-Ins-Ins-Ins-Ins-Tisch-Displays ist der Bootstrap-Tisch flach und leicht. Es ist mehr als genug für eine leichte Datenanzeige, und die Unterstützung für Vater-Sohn-Tabellen und so weiter ist auch sehr gut. Das Wichtigste ist, dass es nahtlos mit anderen Bootstrap -Tags kombiniert werden kann.
Okay, das ist alles für die Einführung. Ich werde den Code und Renderings direkt hochladen und dann weitere Diskussionen geben.
<! DocType html public "-// w3c // dtd xhtml 1.0 strict // en content = "text/html; charSet = utf-8"/> <meta name = "Beschreibung" content = ""/> <meta name = "keywords" content = "/> <script type =" text/javascript "src =" ./ JS/jquery-2.2.1.js "> </script> <script =" text = "text/javascript" " src = "./ bootstrap/js/bootstrap.min.js"> </script> <script type = "text/javascript" src = "./ bootstrap-table/bootstrap-table-all.js"> </script> <script type = "text/javascript" " src = "./ bootstrap-table/locale/bootstrap-table-zh-cn.js"> </script> <link rel = "styleSheet" type = "texte/css" href = "./ bootstrap/css/bootstrap.min href="./bootstrap-table/bootstrap-table.min.css" ></head><script language="javascript"> </script><body> <div> <div> <div> <div> <h3>Added teacher account</h3> </div> <div> <div id="toolbar"> <button id="btn_edit" type="button" > <span aria-hidden = "true"> </span> modifizieren Sie </button> <button id = "btn_delete" type = "button"> <span aria-hidden = "true"> </span> lösche </button> </div> <table id = "lehrer_table" Data-toggle = "table" data-url = ". Data-Query-Params = "Queryparams" Data-Toolbar = "#Symbollbar" Data-Pagination = "True" Data-Search = "TRUE" Data-show-refresh = "True" Data-show-toggle = "True" Data-Show-Kolumns = "True" Data-Page-Size = "5" -Field = TR> <thd Data-Field = "Name". Passwort </th> <th data-field = "t_name"> Lehrername </th> </tr> </table> </div> </div> </div> </body>
Reproduktionsbild:
OK, analysieren wir als nächstes die Bedeutung des obigen Code in Schritten.
1. Zunächst müssen wir das entsprechende JQuery Bootstrap Bootstrap-Table-Paket herunterladen. Es gibt Tutorials online und wir werden nicht beschreiben, wie sie es hier herunterladen können.
Aus dem Verweis auf die JS- und CSS -Dateinamen im obigen <Head> Tag können wir sehen, dass wir diese Dateien einführen müssen.
Hinweis Bootstrap, im kompilierten komprimierten Paket befinden sich nur drei Ordner.
1.JQuery-2.2.1.js --- Die neueste jQuery-Datei
2.:
3.Bootstrap.min.css --- Die neueste Bootstrap.min.css-komprimierte Datei in Bootstrap/CSS
4.Bootstrap-table-all.js --- Die neueste JS-Datei unter Bootstrap-table
5.Bootstrap-table-zh-Cn.js --- Die neueste chinesische Erstdatei unter Bootstrap-Table/Laceale
6.Bootstrap-table.min.css --- Die neueste CSS-komprimierte Datei unter Bootstrap-Table
Diese sechs müssen konfiguriert werden, unter denen Bootstrap-table-zh-Cn.js eine JS-Datei ist, die Chinesen unterstützt. Nur wenn diese Datei geladen wird, werden einige unserer Tabelleninformationen auf Chinesisch festgelegt.
Experimentieren wir mit dem Display-Effekt, nachdem Sie Bootstrap-table-Zh-cn.js entfernen.
Natürlich können wir die Anzeigeinformationen auch auf andere Sprachen einstellen. Ersetzen Sie einfach Bootstrap-table-Zh-Cn.js durch JS-Dateien in anderen Sprachen. Das Bootstrap-Tisch-Paket gibt Unterstützung.
Wir können auch den Quellcode in dieser Datei betrachten. Lassen Sie uns einen Blick darauf werfen und Sie werden wissen, was diese Datei tut.
/** * Bootstrap-Tabelle Chinesische Übersetzung * Autor: Zhixin Wen <[email protected]> */(Funktion ($) {'strict'; (Pagenumber) {Return 'anzeigen' + Pagenumber + 'Datensatz'; {Return 'No Matching Record wurde gefunden'; 'Refresh';
Sie können auf einen Blick sehen, dass Sie beim Laden nach dem Zitieren der JS -Datei für den Initialisierungseffekt beten. Konvertieren Sie einige angezeigte Informationen in den entsprechenden mittleren Inhalt.
2. Als nächstes sprechen wir über den relevanten HTML -Code. Tatsächlich ist dies der einzige Teil des HTML-Code, der sich auf Bootstrap-Table bezieht.
<table id = "lerner_table" data-toggle = "table" data-url = "./ data.php" data-method = "post" data-query-params = "queryparams" data-toolBar = "#Toolbar" Data-Pagination = "true" datensear Data-Page-Größe = "5"> <thead> <tr> <th data-field = "name"> Benutzerkonto </th> <th data-field = "pwd"> Benutzerkennwort </th> <th data-field = "t_name"> Lehrername </th> </tr> </thead> </table>
Ja, es gibt nur ein Tabellen -Tag sowie viele Parameter, und die Form der Tabelle wird durch diese Parameter implementiert. Sie sollten wissen, welche Stile und Funktionen da sind. Nur indem sie sie auflisten, wird es definitiv ein Tropfen im Eimer sein. Es ist besser, Menschen beizubringen, wie man fischt, als den Menschen beizubringen, wie man fischt. Ich werde Ihnen sagen, wo Sie diese Kategorien finden. Die Bedeutung der Klasse. Wir können auf die professionelle Website von Bootstrap-Table gehen, um einen Link zu finden, den ich verwende. Klicken Sie hier, um den Link zu öffnen. Wenn es ungültig ist, können Sie direkt http://bootstrap-table.wenzhixin.net.cn/documentation eingeben
Natürlich können Sie auch einige Beispiele im Beispiel sehen
Wie überprüfen wir die Bedeutung der entsprechenden Parameter? Wenn Sie das obige Bild sehen, sind die rechten Seite einige Optionen. Sie können die Tabellenattribute, Zeilenattribute und Bindungsereignisse auswählen, die Sie festlegen können.
Klicken Sie auf die Tabellenattribut -Tabellenoptionen, um die folgende Abbildung anzuzeigen. Zunächst können Sie sehen, dass der Titelname für JS zum Erstellen von Tabellen verwendet wird, und das Attribut wird für HTML zum Erstellen von Tabellen verwendet.
Um einige Beispiele zu geben, gibt es in unserem obigen Code mehrere Parameter. Was sie meinen ist:
Data-URL: Die URL zum Anfordern von Daten.
Data-Method: Anforderungsmethode.
Datenhöhe: Stellen Sie die Höhe der Tabelle fest
Data-Query-Params = "Queryparams": Einstellungen
Data-Toolbar = "#Symbolleiste": Stellen Sie den Container fest, auf den die Schaltfläche ID ist die Symbolleiste.
Data-Pagination = "True": Stellen Sie fest, ob die Seitenzahl angezeigt wird
data-search = "true": Setzen Sie das Suchfeld
Data-show-refresh = "true": Setzen Sie die Taste für Aktualisierung
Data-Show-Toggle = "True": Legen Sie das Datenanzeigeformat fest
Jetzt sollten Sie verstehen, wie Sie es überprüfen können!
Beachten Sie, dass der folgende Code der Kern ist, <tr> ein Raster in einer Zeile darstellt und Data-Field = "Name" den Datennamen in einem Raster in einer Zeile darstellt. Sie können das Datenfeld als ID verstehen, da die aus dem Hintergrund übertragenen Daten basierend auf dem Datenfeld unterschieden werden und an die gesendet wird.
<tr> <th data-field = "name"> Benutzerkonto </th> <th data-field = "pwd"> Benutzerkennwort </th> <th data-field = "t_name"> Lehrername </th> </tr> </thead>
Für diejenigen, die keine statische HTML -Generierung verwenden möchten, können Sie auch JS verwenden, um die dynamische Erzeugung zu generieren. Um eine Code -Demo zu geben, um die relevanten Parameter festzulegen, müssen Sie nur den Namen verwenden: Die oben genannten Optionen. Legen Sie beispielsweise die Zieldata-URL für die Datenanforderung in html: "./data.php" in JS fest: Deklary URL: "./data.php"
$ ('#table'). bootstrappable ({columns: [{field: 'id', title: 'item id'}, {field: 'name', title: 'item name'}, {field: 'price', title: 'iteprice'}, data: [{id: 1, name: teure 1 ', price:' $ 1 '$' $ '$' $ '$' $ '$' $ '$' $ '$'} }]});3. Auf diese Weise, was andere Codes tun, verwendet ein Teil des Codes das Panel in Boostrap, um die Tabelle in das Panel einzubetten. Der Effekt von Bootstrap-Table nach dem entfernten Panel-Code ist so
Es ist nur so, dass es kein Panel gibt.
V.
Sie können oben sehen, dass die angeforderte Hintergrundadresse lautet: "./data.php", schauen wir uns ihren Inhalt an
<? php $ resultes [0] = array ("name" => "aoze", "pwd" => "20132588", "t_name" => "Zhang San"); $ resultes [1] = array ("name" => "lisi", "pwd" => "1234", "t_name" => "li si"); $ resultes [2] = array ("name" => "wangwu", "pwd" => "44455", "t_name" => "Wang Wu"); echo json_encode ($ resultation);?>Es ist sehr einfach! Dies sind natürlich nur einige Testdaten, die ich von Hand geschrieben habe, und es wird natürlich aus der Datenbank im Projekt gefunden.
5. Natürlich reicht es nicht aus, nur Daten anzuzeigen. Wir müssen mit der Tabelle interagieren, wie z. B. Lösch- und Änderungsfunktionen. Zu diesem Zeitpunkt müssen wir einige Ereignisse von Bootstrap-Table verwenden. Im obigen Fall habe ich zwei Tastenkomponenten in die Tabelle eingebettet, wie in der Abbildung gezeigt
Die Methode zur Implementierung dieses Mosaiks besteht darin, die Eigenschaften der Tabelle zu einer solchen Zeilendaten-Toolbar = "#Symbolleiste" hinzuzufügen.
Dies bedeutet, eine Etikett mit ID als Symbolleiste in der Symbolleiste hinzuzufügen.
In meiner Implementierung dieses Projekts müssen Sie diese beiden Schaltflächen verwenden, um entsprechende Vorgänge in der ausgewählten Zeile in der Tabelle auszuführen.
Schreiben Sie das entsprechende Ereignis, binden Sie zuerst ein ausgewähltes Triggerereignis an die Tabelle und erhalten Sie dann die Daten der ausgewählten Zeile über die GetSelectrow -Funktion.
$ ('#lehrer_table'). on ('click-row.bs.table', Funktion (E, Zeile, Element) {$ ('. Erfolg'). removeclass ('Erfolg'); // Entfernen Sie die zuvor ausgewählte Zeile aus, wählen Sie den Stil $ (Element). Funktion getSelectedRow () {var index = $ ('#lehrer_table'). find ('tr.Success'). Data ('index'); // Die ausgewählte Zeile return $ ('#lehrer_table'). Bootstreaptable ('getData') [INDEX]; // Alle Daten in der ausgewählten Zeile zurückgeben}}}}}Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Tutorial für Bootstrap -Tischnutzung
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.