Heim  >  Artikel  >  Web-Frontend  >  Ein leichtes Bootstrap-Table-Plug-in, das es wert ist, geteilt zu werden

Ein leichtes Bootstrap-Table-Plug-in, das es wert ist, geteilt zu werden

高洛峰
高洛峰Original
2017-01-04 11:06:323039Durchsuche

Bootstrap Table, ein leichtes Tabellen-Plug-in basierend auf Bootstrap, benötigt nur eine einfache Konfiguration, um über leistungsstarke Funktionen wie feste Header, Einzel-/Mehrfachauswahl, Sortierung, Paging, Suche und benutzerdefinierte Header usw. zu verfügen und so die Entwicklung besser zu verbessern Effizienz und kürzere Entwicklungszeit.

值得分享的轻量级Bootstrap Table表格插件

1. Plug-in-Beschreibung: Bootstrap Table zeigt das Datentabellenformat an und bietet umfassende Unterstützung, Optionsfelder, Kontrollkästchen, Sortierung, Paginierung usw.

2. Funktionen:

Entwickelt auf Basis von Bootstrap 3 (unterstützt auch Bootstrap 2)

Responsive Schnittstelle

Fester Header

Vollständig verfügbare Konfiguration

Unterstützungsdatenattribut

Spalten anzeigen/ausblenden

Tabellenkopf anzeigen/ausblenden

AJAX verwenden, um JSON-Daten abzurufen

Klicken Sie auf Tabellenüberschriften können einfach sortiert werden

Unterstützt benutzerdefinierte Spaltenanzeige

Unterstützt Einzel-/Prüfauswahl

Leistungsstarke Paging-Funktion

Unterstützt Visitenkartenlayout

Unterstützt mehrere Sprachen

3. Verwendung:

1) Führen Sie die Bootstrap-Bibliothek (falls Ihr Projekt sie noch nicht verwendet) und die Bootstrap-Tabelle im Head-Tag ein HTML-Seite.

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">

2 Führen Sie die jQuery-Bibliothek und die Bootstrap-Bibliothek im Head-Tag oder vor dem Schließen des Body-Tags ein (empfohlener) (falls Ihr Projekt hat noch keine) mit) und bootstrap-table.js.

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
 <script src="bootstrap-table.js"></script>

3) Geben Sie die Datenquelle an. Es gibt zwei Möglichkeiten
Methode 1: Durch das Datenattribut-Tag
in einem gewöhnlichen Durch das Festlegen von data-toggle="table" in der Tabelle kann Bootstrap Table aktiviert werden, ohne JavaScript zu schreiben.

<table data-toggle="table" data-url="data.json">
   <thead>
    ...
   </thead>
  </table>

Methode 2: Legen Sie die Datenquelle über JavaScript fest
Aktivieren Sie die Tabelle mit dem ID-Attribut über JavaScript.

$(&#39;#table&#39;).bootstrapTable({
   url: &#39;data.json&#39;
  });:

4. Fehlerbeschreibung:

值得分享的轻量级Bootstrap Table表格插件

Beim Festlegen des Feldformatierers mithilfe von Beschriftungsattributen, Keine Auswirkung gefunden

Zum Beispiel: 6b44373a45362b3bb0e269a277460e67gender01c3ce868d2b3d9bce8da5c1b7e41e5b
1), Grund:
bootstrap-table .js Zeile 399, der Code bestimmt nur den Fall, in dem Formatter Typeof eine Funktion ist
2), Lösung:
Ändern Sie den Codeblock in Zeile 399:
Vor der Änderung

if (typeof that.header.formatters[j] === &#39;function&#39;) {
 value = that.header.formatters[j](value, item);
}

Geändert:

if (typeof that.header.formatters[j] === &#39;function&#39;) {
     value = that.header.formatters[j](value, item);
    }else if(typeof that.header.formatters[j] === &#39;string&#39;) {
     if(typeof window[that.header.formatters[j]] === &#39;function&#39;) {
     value = window[that.header.formatters[j]](value, item);
     }
    }

Es ist hilfreich, die Verwendung von Bootstrap Table gut zu beherrschen.

Weitere Artikel zum leichtgewichtigen Bootstrap Table-Plug-in, die es wert sind, geteilt zu werden, finden Sie auf der chinesischen PHP-Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn