Seri Tabel Bootstrap:
Penjelasan terperinci tentang Tabel Bootstrap Artefak Komponen JS (Versi Dasar)
Artefak tabel tabel bootstrap dari seri komponen JS [bab akhir]
Artefak komponen tabel tabel bootstrap dari seri komponen JS [2. Tabel orang tua-anak dan pemesanan kolom baris]
Tabel Bootstrap adalah data yang ringan dan kaya fitur yang ditampilkan dalam bentuk tabel, mendukung pilihan tunggal, kotak centang, penyortiran, paging, kolom tampilan/sembunyikan, tabel gulir judul tetap, desain responsif, data Ajax memuat!
1. Tampilan Efek
1. Gaya baris meja
Misalnya, kami memiliki persyaratan untuk menampilkan halaman pesanan, dan pesanan dengan status yang berbeda menunjukkan warna yang berbeda, seperti yang ditunjukkan pada gambar:
2. Edit dalam baris formulir
Dalam artikel pertama, seorang teman taman bertanya kepada blogger apakah dia dapat mendukung efek pengeditan dalam industri, dan jawabannya adalah ya. Mari kita lihat efeknya:
Sebelum mengedit
Klik pada Data Sel
Setelah mengedit, selesaikan
3. Kombinasi baris dan kolom tabel
Blogger berpikir itu sangat umum untuk merger peringkat dan peringkat, terutama saat membuat laporan halaman. Mari kita lihat efeknya:
Halaman saat ini tidak lengkap, klik untuk masuk dan lihat. Bagaimana dengan itu? Efeknya cukup bagus.
4. Ekspor Data Tabel
Mengenai Ekspor Data Tabel, Tabel Bootstrap mendukung ekspor tiga mode: Basic, All, dipilih. Artinya, ekspor data halaman saat ini, semua ekspor data, dan ekspor data yang dipilih. Ini juga mendukung mengekspor berbagai jenis file, seperti Common Excel, XML, JSON dan format lainnya.
Ekspor halaman saat ini ke Excel
Ekspor semua data dalam tabel
Mengekspor data baris yang dipilih
Adapun ekspor jenis file lainnya, pada dasarnya sama dengan Excel, sehingga efeknya tidak akan ditampilkan.
2. Contoh Kode Gaya Baris Tabel
Mengenai pengaturan gaya baris meja, fungsi lain adalah fungsi paling mendasar. Mengapa menaruhnya di artikel ketiga? Itu karena blogger berpikir fungsi ini dapat digunakan di mana -mana. Tentu saja, efeknya tidak sulit. Anda juga dapat mencapai warna latar belakang TR dengan menggunakan jQuery, tetapi blogger berpikir bahwa karena tabel bootstrap menyediakan mekanisme untuk mengatur warna latar belakang baris, mengapa tidak menggunakan API bawaannya. Mari kita lihat bagaimana mengimplementasikannya.
Saat menginisialisasi tabel
// inisialisasi tabel $ ('#tb_order'). Bootstraptable ({url: '/tablesestyle/getorder', // Metode permintaan url (*): 'get', // metode permintaan (*) // toolbar: '#toolbar', // wadah yang dilepaskan oleh cairan yang digunakan oleh alat cair yang benar, // di mana tata pajangan interval interval ', CACHE, CACHE, CACHE, CAULE, CAULE APA PUNCAUL APA PERIK Perlu mengatur properti ini (*) Pagination: true, // apakah akan menampilkan paging (*) sortir: false, // apakah akan mengaktifkan sortorder: "asc", // sortir metode queryparams: otableInit.queryparams, // pagination parameter (*) periaian server: "server", // Metode pagination: klien: klien klien (*server, "server", // Metode pagination: klien: klien klien: server, "server", "server",//Metode pagination: server pagination: server: server Halaman pertama yang dimuat, halaman pertama halaman: 10, // Jumlah baris rekaman per halaman (*) Pagelist: [10, 25, 50, 100], // Jumlah baris per halaman untuk memilih (*) pencarian: benar, // Apakah pencarian tabel itu ditampilkan dengan benar? showrefresh: true, // Apakah tombol refresh menampilkan minimumcountcolumns: 2, // Jumlah minimum kolom memungkinkan clicktoselect: true, // di mana untuk mengaktifkan klik Tinggi baris pilih: 500, // line height, jika tamakan tinggi tidak ada, tabel, tabel secara otomatis /di setiap baris yang unik. Benar, // Apakah tombol sakelar untuk tampilan terperinci dan daftar tampilan kartu: false, // apakah rinci rinci detailview: false, // apakah tabel parent-child tabel rowstyle: function (baris, indeks) {// ada 5 nilai di sini yang mewakili warnanya dalam 5 ['aktif', 'sukses', 'info', 'peringatan', 'danger']; Terjadwal ") {strclass = 'sukses'; // Ada juga yang aktif} else if (row.order_status ==" dihapus ") {strclass = 'bahaya';} else {return {};} {classies: strclass}}, kolom: [{cecekbox:} {{{{{{{{{{{{{{{true {{true {{true {{true {{true {{true {{true {true {{true {{true {{true {{true {{true {{true {{true {true {true: 'Order_type', title: 'order type'}, {field: 'order_status', title: 'status pesanan'}, {field: 'komentar', judul: 'Keterangan'},]});Faktanya, fokusnya adalah pada parameter ini:
RowStyle: Function (Row, Index) {// Ada 5 nilai di sini yang mewakili warna dalam 5 ['aktif', 'sukses', 'info', 'peringatan', 'bahaya']; var strclass = ""; if (row.order_status == "untuk dijadwalkan") {strclass = 'success'; // ada juga yang aktif. " {strclass = 'Danger';} else {return {};} return {class: strclass}},Tabel Bootstrap mendukung warna latar belakang baris tabel dalam 5, yaitu 'aktif', 'sukses', 'info', 'peringatan', 'bahaya'. Adapun setiap warna latar belakang yang sesuai, Anda dapat melihatnya dengan menjalankan kode. Mengenai nilai pengembalian metode ini, blogger juga mempelajarinya untuk waktu yang lama ketika ia pertama kali menggunakannya. Menurut aturan tabel bootstrap, perlu mengembalikan tipe objek format JSON seperti: {kelas: strclass}.
3. Contoh kode pengeditan di baris formulir
Mengenai pengeditan tabel, beberapa file JS yang perlu diperpanjang menggunakan tabel Bootstrap.
1. Perkenalkan file JS tambahan
<tautan rel = "stylesheet" href = "// rawgit.com/vitalets/x-Editable/master/dist/bootstrap3-Editable/css/bootstrap-Editediting.css"> <script src = "// rawgit.com/vitalets/x-Editable/master/dist/bootstrap3-Editable/js/bootstrap-Editable.js"></script><script src =" ~/content/bootstrap-table/extensions/editable/bootstrap-table-deditable-editable
2. Saat mendefinisikan tabel pada halaman CSHTML, tambahkan dua atribut
<tabel id = "tb_departments"> <Thead> <tr> <th-field = "name" data-editable = "true"> nama departemen </t> <th-field = "parentName"> departemen superior </t> <-field = "level" DATE-editied = "true"> Level departemen </th> tH Data-field = "level" DATE-editied = "true"> Level Departemen </th> TH Data-field = "level" Data-editied " Data-editable = "true"> deskriptor </t th> </tr> </tead> </able>
Jika diinisialisasi dalam JS, metode penulisan adalah sebagai berikut:
{field: "name", title: "name", edited: true}3. Daftar Edit dan Simpan Acara Saat Menginisialisasi Tabel di JS
$ ('#tb_departments'). Bootstraptable ({url: '/edited/getDepartment', // Metode permintaan url (*): 'get', // metode permintaan (*) toolbar: '#toolbar', // wadah apa yang digulirkan oleh cub, apakah ada cairan, CACHE, CACHE,//COVACE, CA. need to set this property (*) pagination: true, //Whether to display paging (*) sortable: false, //Whether to enable sortOrder: "asc", //Sorting method queryParams: oTableInit.queryParams, //Passing parameters (*) sidePagination: "server", //Paging method: client client paging, server server paging (*) pageNumber: 1, //Initialize the first page to load, Halaman halaman pertama default: 10, // Jumlah catatan per halaman (*) oneditableSave: function (bidang, baris, oldvalue, $ el) {$ .Ajax ({type: "POST", URL: "/Edited/Edit", data: {strjson: json.stringify (baris)}, function, function, status) (status) {{{{{{{{{{{{{{") {{status) {{{{{{{{{{{{{{"), Sukses ");}}, error: function () {alert (" error ");}, complete: function () {}});}});Poin kuncinya adalah melihat penanganan acara ini
OnedItabLable: function (bidang, baris, oldvalue, $ el) {$ .Ajax ({type: "Post", url: "/Edited/Edit", data: {strjson: json.stringify (row)}, success: function (data, status) {if (status == "Success") {warm ("edit berhasil (function, status) {if (status ==" SUCCESS ") {" edit SUCCEST {alert ("error");}, Lengkapi: function () {}});}Metode yang sesuai perlu menangani sendiri logika yang disimpan. Bidang empat parameter, baris, OldValue, dan $ el sesuai dengan nama kolom saat ini, objek data dari baris saat ini, nilai sebelum pembaruan, dan objek jQuery dari sel saat ini yang diedit.
4. Contoh kode gabungan baris dan kolom tabel
Fungsi penggabungan kolom baris tidak memerlukan referensi ke file JS lainnya. Hanya perlu menggunakan tabel colspan dan rowspan pada halaman CSHTML untuk mencapainya.
1. Halaman Cshtml
<tabel id = "tb_report"> <Thead> <tr> <th colspan = "4" data-valign = "tengah" data-align = "center"> q1 </th> <th colspan = "4" data-valign = "tengah" data = "center"> quarter </th> <tH colspan = "4" 4 "4" data-align="center">Quarter</th><th data-field="TotalCount" rowspan="2" data-valign="middle" data-align="center">Annual Summary</th></tr><tr><th data-field="JanCount" data-align="center">Jan</th><th data-field="FebCount" data-align="center">FebCount</th><th data-field="MarCount" data-align="center">March</th><th data-field="FirstQuarter" data-align="center">FirstQuarter</th><th data-field="AprCount" data-align="center">April</th><th data-field="MayCount" data-align="center">May</th><th data-field="JunCount" data-align="center">Jun</th><th data-field="SecondQuarter" data-align="center">Quarter</th><th data-field="JulCount" data-align="center">July</th><th data-field="AguCount" data-align="center">August</th><th data-field="SepCount" data-align="center">Sep</th><th data-field="ThirdQuarter" data-align="center">Quarter 3</th><th data-field="OctCount" data-align="center">October</th><th data-field="NovCount" data-align="center">November</th><th data-field="DecCount" Data-Align = "Center"> Desember </th> <th-field = "forthquarter" data-align = "center"> Quarter 4 </t> </tr> </Tead> </able>
2. Tidak ada inisialisasi JS khusus
$ ('#tb_report'). Bootstraptable ({url: '/groupColumns/getReport', // Metode permintaan url (*): 'get', // metode permintaan (*) toolbar: '#toolbar', // wadah apa yang digulirkan oleh tombol alat itu benar, // Di mana ke lini interval interval ' Anda perlu mengatur properti ini (*) pagination: true, // apakah akan menampilkan pagination (*) sortorder: "asc", // metode penyortiran queryparams: otableInit.queryparams, // parameter lulus (*) page first: page first: 1 page first /page first /page first /page first page, first page, / /paging first /pages first /first page, first page, /pages first page, /pages first page, o load page (*) 10, // Jumlah baris rekaman per halaman (*) Pagelist: [10, 25, 50, 100], // Jumlah baris per halaman untuk dipilih (*)});Bagaimana kalau itu, apakah mudah? Tentu saja, beberapa orang mengatakan bahwa Anda dapat menggunakan atribut tabel untuk mengatur URL, pagination dan informasi lainnya tanpa menggunakan inisialisasi JS, langsung di CSHTML. Memang, jika kita melihat API -nya, kita akan menemukan bahwa setiap atribut yang diinisialisasi sesuai dengan atribut tabel. Ketik as
Jika formulir Anda tidak memiliki beberapa acara khusus untuk ditangani, tidak ada masalah sama sekali.
5. Contoh Kode Ekspor Data Tabel
Fungsi ekspor data tabel juga memerlukan beberapa dukungan JS yang diperluas.
1. Perkenalkan file JS tambahan
<script src = "~/content/bootstrap-table/extensions/Export/bootstrap-table-export.js"> </script> <script src = "// rawgit.com/hhurz/tablexport.jquery.plugin/master/tablexport.js"> </script>
2. Saat JS diinisialisasi
$ ('#tb_departments'). Bootstraptable ({url: '/ekspor/getDepartment', // Metode permintaan url (*): 'get', // metode permintaan (*) toolbar: '#toolbar', // wadah apa yang digulirkan oleh cair, ca, ca, cair, ca, ca, Perlu mengatur properti ini (*) Pagination: true, // apakah akan menampilkan paging (*) sortir: false, // apakah akan mengaktifkan sortorder: "asc", // metode penyortiran queryparams: otableInit.queryparams, // Parameter pertama (*) PAGING PAGING: "CLIENT", // Metode Pagination: Klien Klien, PAGING PAGING: "CLIENTER" CLIENT ", // METODE PAGINGINE Klien, Klien PAGING KLIEN, PAGING LIFER:" PAGING PAGINGE: "CLIENT", // METODE PAGINGINE KLIEN, KLIEN Klien, Muat, halaman pertama halamanzeze: 10, // Jumlah baris rekaman per halaman (*) Pagelist: [10, 25, 50, 100], // Jumlah baris per halaman untuk memilih (*) clicktoselect: true, showexport: true, // exportDatype ditampilkan: "dasar", // dasar ',' semua ',', '{{{{{{{{{basic ",' 'Name', title: 'Department Name'}, {field: 'ParentName', judul: 'Departemen Superior'}, {field: 'level', judul: 'Level departemen'}, {field: 'desc', judul: 'deskripsi'},]});Mari kita lihat poin -poin utama: Dua atribut ini
ShowExport: True, // Apakah akan menampilkan ExportDataType: "BASIC", // BASIC ',' ALL ',' Selected'.ShowExport berarti apakah akan menampilkan tombol yang diekspor, ExportDataType berarti apakah mode yang diekspor adalah halaman saat ini, semua data atau data yang dipilih.
6. Ringkasan
Di atas adalah efek fungsi dan kode sederhana untuk mengimplementasikannya. Blogger menemukan bahwa ada beberapa masalah yang harus diselesaikan.
1. Fungsi pengeditan in-line adalah mengirimkan setiap sel ke latar belakang, yang akan menyebabkan operasi basis data yang sering dan terasa tidak pantas. Saya tidak tahu apakah ada cara yang lebih baik untuk mengirimkan setiap baris ke latar belakang.
2. Meskipun fungsi ekspor sangat berguna, sayangnya tidak didukung oleh IE browser. Blogger telah mencoba contoh di situs web resmi, dan tampaknya IE tidak dapat mengekspornya. Untuk diverifikasi.
Di atas adalah konten yang relevan dari komponen tabel tabel bootstrap Artefak [bab akhir] dari seri komponen JS yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu semua orang!