Tabel bootstrap plug-in tabel ringan berbasis bootstrap dapat memiliki fungsi yang kuat seperti header tabel tetap, single/checking, penyortiran, paging, pencarian dan header meja khusus, yang dapat lebih meningkatkan efisiensi pengembangan dan mengurangi waktu pengembangan.
1. Deskripsi Plug-in: Tabel Bootstrap Menampilkan Format Tabel Data, memberikan dukungan yang kaya, kotak radio, kotak centang, penyortiran, paging, dll., Unduh plug-in.
2. Fitur:
Dikembangkan berdasarkan Bootstrap 3 (Bootstrap 2 juga didukung)
Antarmuka responsif
Tetap header
Sepenuhnya dapat dikonfigurasi
Dukung atribut data
Tampilkan/Sembunyikan Kolom
Tunjukkan/Sembunyikan Header Tabel
Dapatkan data JSON menggunakan Ajax
Klik header tabel untuk mengurutkannya secara sederhana
Mendukung tampilan kolom khusus
Dukung single/pilih kembali
Fungsi paging yang kuat
Dukung tata letak kartu nama
Mendukung multibahasa
3. Cara menggunakan:
1) Perkenalkan pustaka bootstrap (jika proyek Anda belum digunakan) dan bootstrap-table.css di tag kepala halaman HTML.
<tautan rel = "stylesheet" href = "bootstrap.min.css"> <tautan rel = "stylesheet" href = "bootstrap-fible.css">
2) Memperkenalkan perpustakaan jQuery, Bootstrap Library (jika proyek Anda belum digunakan) dan bootstrap-table.js sebelum tag kepala atau tag tubuh ditutup (disarankan).
<Script src = "jQuery.min.js"> </script> <script src = "bootstrap.min.js"> </script> <script src = "bootstrap-table.js"> </skrip>
3) Tentukan sumber data, berikut adalah dua cara
Metode 1: Lewati tag atribut data
Mengatur data-toggle = "tabel" dalam tabel normal memungkinkan tabel bootstrap tanpa menulis javascript.
<Table Data-koggle = "TABLE" DATA-URL = "Data.json"> <tead> ... </tead> </able>
Metode 2: Mengatur sumber data melalui JavaScript
Aktifkan Tabel dengan Atribut ID melalui JavaScript.
$ ('#tabel'). Bootstraptable ({url: 'data.json'});:4. Deskripsi Bug:
Saat mengatur formatter lapangan menggunakan metode atribut tag, saya menemukan bahwa tidak ada efek dan gambarnya tidak jelas. Anda dapat langsung mengunduh contoh untuk penelitian dan mengunduh alamatnya.
Misalnya: <-Field Data = "Seks"-Data-Formatter = "Format_Sex"> Jenis Kelamin </tom>
1) Alasan:
Bootstrap-Table.js Line 399, hanya formatter typeOf yang berfungsi dalam kode.
2) Solusi:
Ubah blok kode pada baris 399:
Sebelum modifikasi
if (typeOf that.header.formatters [j] === 'function') {value = that.header.Formatters [j] (value, item);}Setelah modifikasi:
if (typeOf that.header.formatters [j] === 'function') {value = that.header.Formatters [j] (value, item); } else if (typeof that.header.formatters [j] === 'string') {if (typeof window [that.header.formatters [j]] === 'function') {value = window [that.Header.formatters [j]] (value, item); }}Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah metode penggunaan tabel bootstrap yang dibagikan kepada Anda. Saya harap akan sangat membantu bagi Anda untuk menguasai metode penggunaan tabel bootstrap.