Bootstrap-basierte leichte Tischplug-In-Bootstrap-Tabelle können leistungsstarke Funktionen wie feste Tabellenheader, Einzel-/Überprüfungen, Sortieren, Paging, Such- und benutzerdefinierte Tabellenheader haben, die die Entwicklungseffizienz besser verbessern und die Entwicklungszeit verkürzen können.
1. Plug-In-Beschreibung: Die Bootstrap-Tabelle zeigt das Datentabellenformat an, bietet eine umfassende Unterstützung, Radioxemplationen, Kontrollkästchen, Sortieren, Paging usw., Plug-in-Download.
2. Merkmale:
Basierend auf Bootstrap 3 entwickelt (Bootstrap 2 wird ebenfalls unterstützt)
Responsive Schnittstelle
Fester Header
Voll konfigurierbar
Unterstützen Sie Datenattribute
Spalten anzeigen/ausblenden
Zeigen/verstecken Sie den Tischkopfzeile
Holen Sie sich JSON -Daten mit AJAX
Klicken Sie auf den Tabellenheader, um ihn einfach zu sortieren
Unterstützt die benutzerdefinierte Spaltenanzeige
Unterstützen Sie Single/Reselect
Leistungsstarke Paging -Funktion
Support Visitenkartenlayout
Unterstützt mehrsprachige
3.. Wie man verwendet:
1) Führen Sie die Bootstrap-Bibliothek (falls Ihr Projekt noch nicht verwendet wird) und den Bootstrap-table.css im Kopf-Tag der HTML-Seite ein.
<link rel = "styleSheet" href = "bootstrap.min.css"> <link rel = "stylesheet" href = "bootstrap-table.css">
2) Führen Sie die JQuery-Bibliothek, die Bootstrap-Bibliothek (falls Ihr Projekt noch nicht verwendet) und Bootstrap-table.js vor, bevor das Kopf-Tag oder das Body-Tag geschlossen ist (empfohlen).
<script src = "jQuery.min.js"> </script> <script src = "bootstrap.min.js"> </script> <script src = "bootstrap-table.js"> </script>
3) Geben Sie die Datenquelle an, hier sind zwei Möglichkeiten
Methode 1: Übergeben Sie das Data Attribut -Tag
Das Einstellen von Data-Toggle = "Tabelle" in einer normalen Tabelle ermöglicht die Bootstrap-Tabelle ohne das Schreiben von JavaScript.
<Tabelle data-toggle = "table" data-url = "data.json"> <tead> ... </tead> </table>
Methode 2: Richten Sie die Datenquelle über JavaScript ein
Aktivieren Sie die Tabelle mit ID -Attribut über JavaScript.
$ ('#table'). bootstrappable ({url: 'data.json'}) ;:4. Fehlerbeschreibung:
Beim Einstellen der Feldformatiererin mithilfe der Tag -Attributmethode stellte ich fest, dass es keinen Effekt gab und das Bild unklar war. Sie können das Beispiel direkt herunterladen und die Adresse herunterladen.
Zum Beispiel: <th data-field = "sex" data-formatter = "format_sex"> Geschlecht </th>
1) Grund:
Bootstrap-table.js Zeile 399, nur der Formattertyp ist eine Funktion im Code.
2) Lösung:
Ändern Sie den Codeblock in Zeile 399:
Vor der Änderung
if (thatof that
Nach der Änderung:
if (thatof that } else if (thatof that }}
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
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist die Verwendungsmethode der mit Ihnen geteilten Bootstrap -Tabelle. Ich hoffe, es wird für Sie hilfreich sein, die Nutzungsmethode der Bootstrap -Tabelle zu beherrschen.