Ringkasan Penggunaan Tabel Bootstrap
Bootstrap-Table adalah plug-in tabel yang ditulis berdasarkan meja bootstrap, khusus digunakan untuk menampilkan data. Bootstrap berasal dari Twitter dan saat ini merupakan kerangka kerja front-end yang paling populer. Bootstrap didasarkan pada HTML, CSS, dan JavaScript, dan memiliki keunggulan pengembangan front-end sederhana, fleksibel dan cepat. Saya tidak akan menggambarkan hal yang sama dengan bootstrap di sini. Artikel ini akan fokus pada menjelaskan beberapa pemahaman saya tentang menggunakan tabel bootstrap dalam proyek saya dan bagaimana mempelajarinya.
Pertama, izinkan saya menjelaskan hubungan antara jQuery, bootstrap, dan tabel bootstrap. Banyak bagian kode bootstrap melibatkan jQuery, yaitu, bootstrap tergantung pada jQuery, dan meja bootstrap yang ingin kami gunakan dibuat berdasarkan bootstrap, jadi sebelum menggunakan bootstrap-table, Anda harus merujuk pada file JS dan CSS terkait dari jQuery dan bootstrap.
Selanjutnya, karakteristik meja bootstrap: dengan jQuery-UI, JQGrid dan plug-in tampilan meja lainnya, meja bootstrap datar dan ringan. Ini lebih dari cukup untuk beberapa tampilan data ringan, dan dukungan untuk tabel ayah-anak dan sebagainya juga sangat bagus. Yang paling penting adalah bahwa itu dapat dikombinasikan dengan tag bootstrap lainnya.
Oke, itu saja untuk pengantar. Saya akan langsung mengunggah kode dan rendering dan kemudian memberikan diskusi lebih lanjut.
<! Doctype html public "-// w3c // dtd xhtml 1.0 strict // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <sead> <itement> <titeme> Bootstrap-table </title> <ponpictd "headp"> <pead> <titeme> bootstrap-table </title> <ponpictd "heP" headp "BOOTSTRAP-Table </title> <ponyp" headp "headp" BootStrap-table </title> Content = "Text/html; charset = utf-8"/> <meta name = "description" content = ""/> <meta name = "kata kunci" content = ""/> <script type = "text/javascript" src = "./ js/jQuery-2.2.1.js"> </script> script = " src = "./ bootstrap/js/bootstrap.min.js"> </script> <script type = "text/javascript" src = "./ bootstrap-bo-table/bootstrap-table-all.js"> </script> <script = "text/javascript" src = "./ Bootstrap-Table/Locale/Bootstrap-Table-zh-Cn.js"> </script> <tautan rel = "stylesheet" type = "text/css" href = "./ bootstrap/css/bootstrap.min.css"> <tautan rel = "styles/css/bootstrap" href = "./ Bootstrap-Table/Bootstrap-table.min.css"> </head> <script language = "javaScript"> </script> <body> <div> <div> <div> <ve> <h3> Account Guru </h3> </Div> <Div> <Div ID = "Toolbar"> </h3> </Div> <Div> <Div ID = "Toolbar"> </h3> </Div> <Div> <Div ID = "Toolbar"> </h3> </Div> <Div> <Div ID = "Toolbar"> </h3> </Div> <Div> <DIV ID = "Toolbar"> </h3> aria-hidden = "true"> </span> memodifikasi </button> <tombol id = "btn_delete" type = "tombol"> <span aria-hidden = "true"> </span> hapus </button> </div> <table id = "query" pos "pos" pos "pos" pos "pos" pos "pos" pos "pos" pos "pos" data ". data-toolbar="#toolbar" data-pagination="true" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-page-size="5"> <tr> <th data-field="name">User account</th> <th data-field="pwd">User password</th> <th Data-field = "t_name"> Nama guru </th> </tr> </able> </div> </div> </div> </body>
Gambar reproduksi:
Oke selanjutnya, mari kita analisis arti kode di atas dalam langkah -langkah.
1. Pertama-tama, kita perlu mengunduh paket bootstrap bootstrap jQuery yang sesuai. Ada tutorial online, dan kami tidak akan menjelaskan cara mengunduhnya di sini.
Dari referensi ke nama file JS dan CSS di tag <head> di atas, kita dapat melihat bahwa kita harus memperkenalkan file -file ini.
Catatan Bootstrap, hanya ada tiga folder dalam paket terkompresi yang dikompilasi.
1.JQuery-2.2.1.js --- file jQuery terbaru
2.Bootstrap.min.js --- bootstrap.min.js terkompresi file terbaru di bootstrap/js
3.bootstrap.min.css --- file terkompresi bootstrap.min.css terbaru di bootstrap/css
4.BootStrap-Table-All.js --- File JS terbaru di bawah bootstrap-table
5.BootStrap-Table-zh-cn.js --- File awal Cina terbaru di bawah Bootstrap-Table/Locale
6.BootStrap-table.min.css --- file terkompresi CSS terbaru di bawah tabel bootstrap
Keenam ini harus dikonfigurasi, di antaranya Bootstrap-Table-ZH-CN.JS adalah file JS yang mendukung bahasa Mandarin. Hanya ketika file ini dimuat beberapa informasi tampilan tabel kami diatur ke Cina.
Mari kita bereksperimen dengan efek tampilan setelah menghapus bootstrap-table-zh-cn.js.
Tentu saja, kami juga dapat mengatur informasi tampilan ke bahasa lain, cukup ganti bootstrap-table-zh-cn.js dengan file JS dalam bahasa lain. Ada dukungan dalam paket meja bootstrap.
Kami juga dapat melihat kode sumber dalam file ini. Mari kita lihat dan Anda akan tahu apa yang dilakukan file ini.
/** * Bootstrap Tabel Terjemahan Cina * Penulis: Zhixin wen <[email protected]> */(function ($) {'gunakan ketat'; $ .fn.bootTraptable.locales ['zh-cn'] = {formatLoadMessage: function () {return 'returning' returning 'returning' the work keras untuk koran kerja keras ... (Pagenumber) {return 'menunjukkan per halaman' + Pagenumber + 'Record'; formatnomatches: function () {return 'tidak ada catatan yang cocok'; formatRefresh:) {return 'Refresh';
Anda dapat melihat sekilas bahwa setelah mengutip file JS, saat memuat, Anda berdoa untuk efek inisialisasi. Konversi beberapa informasi yang ditampilkan menjadi konten media yang sesuai.
2. Selanjutnya, mari kita bicara tentang kode HTML yang relevan. Bahkan, ini adalah satu-satunya bagian dari kode HTML yang terkait dengan tabel bootstrap.
<Table ID = "Teacher_Table" data-kilat = "Table" data-url = "./ Data.php" data-metod = "post" data-query-params = "queryparams" data-toolbar = "#toolbar" data-show-show-show-show-show-show = "true"-show-show = "True" Data-Page-size = "5"> <Thead> <tr> <th-field = "name"> akun pengguna </t> <th-field = "pwd"> Kata sandi pengguna </th> <th-field = "t_name"> Nama guru </t> </tr> </ thead> </table>
Ya, hanya ada satu tag tabel, ditambah banyak parameter, dan bentuk tabel diimplementasikan melalui parameter ini. Anda harus tahu gaya dan fungsi apa yang ada. Hanya dengan mendaftarkannya, itu pasti akan menjadi setetes dalam ember. Lebih baik mengajari orang cara memancing daripada mengajari orang cara memancing. Saya akan memberi tahu Anda di mana menemukan kategori ini. Arti kelas. Kami dapat pergi ke situs web profesional Tabel Bootstrap untuk menemukan tautan yang saya gunakan. Klik untuk membuka tautan. Jika tidak valid, Anda dapat langsung memasukkan http://bootstrap-table.wenzhixin.net.cn/documentation
Tentu saja, Anda juga dapat melihat beberapa contoh dalam contoh
Bagaimana kita memeriksa arti parameter yang sesuai? Ketika Anda melihat gambar di atas, sisi kanan adalah beberapa opsi, Anda dapat memilih atribut tabel, atribut baris, dan acara ikatan yang dapat Anda atur.
Klik Opsi Tabel Atribut Tabel untuk menampilkan gambar berikut. Pertama, Anda dapat melihat bahwa nama judul digunakan untuk JS untuk membuat tabel, dan atribut digunakan untuk HTML untuk membuat tabel.
Untuk memberikan beberapa contoh, ada beberapa parameter dalam kode kami di atas. Yang mereka maksud adalah:
Data-URL: URL untuk meminta data.
Metode data: Metode permintaan.
Data-Height: Atur ketinggian tabel
data-query-params = "queryparams": pengaturan
Data-ToolBar = "#Toolbar": Atur wadah tempat tombol ID adalah toolbar.
pagination data = "true": Setel apakah akan menampilkan nomor halaman
data-pencarian = "true": Atur kotak pencarian
Data-show-refresh = "true": Atur tombol refresh
Data-show-toggle = "true": Atur format tampilan data
Sekarang Anda harus mengerti cara memeriksanya!
Perhatikan bahwa kode berikut adalah inti, <tr> mewakili kisi dalam baris, dan bidang data = "Nama" mewakili nama data dalam grid dalam satu baris. Anda dapat memahami bidang data sebagai ID, karena data yang dikirimkan dari latar belakang dibedakan berdasarkan bidang data, dan siapa yang dikirim.
<tr> <-Field Data = "Name"> Akun Pengguna </th> <-Field Data = "PWD"> Kata Sandi Pengguna </t> <TH Data-Field = "t_name"> Nama Guru </th> </tr> </head>
Bagi mereka yang tidak ingin menggunakan generasi statis HTML, Anda juga dapat menggunakan JS untuk menghasilkan generasi dinamis. Untuk memberikan demo kode, untuk mengatur parameter yang relevan, Anda hanya perlu menggunakan nama: Opsi yang disebutkan di atas. Misalnya, atur file DESTENGHE TUJUAN-URL untuk permintaan data di html: "./data.php" di JS, cukup nyatakan url: "./data.php"
$('#table').bootstrapTable({ columns: [{ field: 'id', title: 'Item ID' }, { field: 'name', title: 'Item Name' }, { field: 'price', title: 'Item Price' }], data: [{ id: 1, name: 'Item 1', price: '$1' }, { id: 2, name: 'Item 2', price: '$2' }]});3. Dengan cara ini, apa yang dilakukan kode lain, bagian dari kode menggunakan panel di boostrap untuk memformat, yaitu, untuk menanamkan tabel di panel. Efek meja bootstrap setelah kode panel yang dihapus seperti ini
Hanya saja tidak ada panel.
4. Format transmisi data, data yang diterima oleh tabel bootstrap berada dalam format JSON secara default
Anda dapat melihat di atas bahwa alamat latar belakang yang diminta adalah: "./data.php", mari kita lihat kontennya
<? php $ hasil [0] = array ("name" => "aoze", "pwd" => "20132588", "t_name" => "zhang san"); $ hasil [1] = array ("name" => "lisi", "pwd" => "1234", "t_name" => "li si"); $ hasil [2] = array ("name" => "wangwu", "pwd" => "44455", "t_name" => "wang wu"); echo json_encode ($ hasil);?>Ini sangat sederhana! Tentu saja, ini hanya beberapa data uji yang saya tulis dengan tangan, dan tentu saja ditemukan dari database dalam proyek.
5. Tentu saja, tidak cukup hanya untuk menampilkan data. Kita perlu berinteraksi dengan tabel, seperti fungsi penghapusan dan modifikasi. Pada saat ini, kita perlu menggunakan beberapa acara meja bootstrap. Dalam kasus di atas, saya telah menanamkan dua komponen tombol dalam tabel seperti yang ditunjukkan pada gambar
Metode menerapkan mosaik ini adalah dengan menambahkan garis data-toolbar = "#toolbar" ke properti tabel.
Ini berarti menambahkan label dengan ID sebagai toolbar ke baris di toolbar.
Dalam implementasi saya dari proyek ini, Anda harus menggunakan dua tombol ini untuk melakukan operasi yang sesuai pada baris yang dipilih dalam tabel.
Tulis peristiwa yang sesuai, pertama -tama ikat peristiwa pemicu yang dipilih ke tabel, dan kemudian dapatkan data baris yang dipilih melalui fungsi getSelectrow.
$ ('#Teacher_table'). On ('click-row.bs.table', function (e, row, elemen) {$ ('. Success'). Removeclass ('Success'); // Hapus baris yang dipilih sebelumnya, pilih gaya $ (elemen) .addclass ('SUCCESS');/ fungsi getSelectedRow () {var index = $ ('#Teacher_table'). Find ('tr.success'). Data ('index'); // Dapatkan baris yang dipilih kembali $ ('#Teacher_table').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 Tabel Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.