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, Ajax memuat data JSON, klik kolom yang diurutkan, tampilan kartu, dll.
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]
1. Tampilan Efek
Hari ini saya akan sedikit mengubah metode berikut. Mari kita lihat efek implementasi terlebih dahulu, dan kemudian perkenalkan implementasi kode dan tindakan pencegahan nanti. Ayo, mari kita kirim rendering:
1. Meja ayah dan putra merender
2. Pemesanan baris
Sebelum memesan
Seret garis untuk mengurutkannya ke baris pertama
3. Pemesanan kolom
Sebelum memesan
Seret Sort Judul Kolom
Setelah memesan
2. Penjelasan terperinci tentang kode tabel ayah-anak
Pada bab sebelumnya, kami memperkenalkan penggunaan dasar tabel bootstrap. Saat menginisialisasi tabel, ada properti "DetailView". Atur ke True, dan Anda dapat melihat ikon dalam bentuk "+" di depan setiap baris. Mengklik ikon ini memicu acara yang memuat subtabel. Ini adalah prinsip umum. Mari kita lihat kode, sebenarnya sangat sederhana.
1. Inisialisasi tabel dan daftarkan saluran untuk memperluas acara
$ ("#tb_powerset"). Bootstraptable ({{url: '/API/menuapi/getParentmenu', Metode: 'Get', DetailView: True, // Tabel Induk dan Anak // Sidepagination: "Server", Halaman: 10, Pagelist: [10, 25], kolom: {{{{{{{{{{{{{pages {{{{10, {{10, {{10, 'Menu_url', judul: 'Url menu'}, {field: 'Parent_id', judul: 'Parent Menu'}, {field: 'menu_level', judul: 'level pria'},], // Daftarkan peristiwa yang memuat detail.Mari kita lihat tiga parameter dari fungsi metode yang sesuai (indeks, baris, $ detail) dari acara pemuatan subtabel Onexpandrow.
Indeks: Indeks baris dari baris saat ini dari tabel induk.
Baris: Objek data JSON dari baris saat ini dari tabel induk.
$ Detail: Objek TD di baris baru yang dibuat di bawah baris saat ini.
Parameter ketiga sangat penting karena tabel subtabel yang dihasilkan dimuat dalam objek detail $. Tabel Bootstrap menghasilkan objek $ detail untuk kami, dan kemudian kami hanya perlu mengisinya dengan tabel yang kami inginkan.
2. Mari kita lihat metode oinit.initsubtable ()
// inisialisasi subtable (loop nirkabel) oinit.initsubtable = function (index, row, $ detail) {var parentId = row.menu_id; var cur_table = $ detail.html ('Table> </ablape>'). Temukan ('Table'); $ (CUR_Table) .BOOTRAPTRABLE ({{{{{{{tabel '). 'get', queryparams: {strparentId: parentId}, ajaxoptions: {strparentId: parentid}, clicktoselect: true, detailview: true, // tabel parent-child unik: "menu_id", pagesze: 10, Pagelist: [10, 25], columns: {{{{{{{10, {{{10, {{10, {{10, {{10, {{10, " name'}, {field: 'MENU_URL',title: 'menu URL'}, {field: 'PARENT_ID',title: 'parent menu'}, {field: 'MENU_LEVEL',title: 'menu level'}, ],//Wireless loop to fetch the child table until there is no record in the child table onExpandRow: function (index, row, $Subdetail) {oinit.initsubtable (indeks, baris, $ subdetail);}});};Dari sini kita dapat melihat bahwa prinsip menghasilkan subtable adalah membuat objek tabel Cur_table, dan kemudian mendaftarkan inisialisasi tabel objek ini. Bukankah itu sangat sederhana ~~
3. Penjelasan terperinci tentang kode pemesanan baris
Kode pemesanan baris lebih sederhana, mari kita lihat.
1. Dua referensi tambahan diperlukan
<skrip src = "~/content/jQuery-ui-1.11.4.custom/eksternal/jQuery.tableDnd.js"> </script> <script src = "~/content/bootstrap-table/ekstensi/reorder-rows/bootstrap-table-roorder-rows.js"> </script>
2. Saat mendefinisikan tabel pada halaman CSHTML, tambahkan dua atribut
<tabel id = "tb_order" data-penggunaan-row-attr-func = "true" data-rowsable-rows = "true"> </able>
Kemudian, tidak perlu membuat modifikasi saat menginisialisasi tabel JS, dan tabel yang dimuat dapat mewujudkan fungsi pemesanan baris.
4. Penjelasan terperinci tentang kode pemesanan kolom
Mirip dengan urutan garis. Pemesanan kolom digunakan sebagai berikut:
1. Referensi beberapa JS dan CSS tambahan
<Script src = "~/content/bootstrap-table/ekstensi/ulang-kolom/bootstrap-table-reorder-columns.js"> </script> <tautan rel = "stylesheet" href = "../ aset/contoh.css"> <tautan rel = "stylesheet" href = "https://rawgit.com/akottr/dragtable/master/dragtable.css"> <script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script> <skrip src = "https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"> </cript> <script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script> skrip src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script>
2. Saat mendefinisikan tabel pada halaman CSHTML, tambahkan atribut
<tabel id = "tb_departments" data-reverable-colom = "true"> </able>
Tidak ada modifikasi yang diperlukan di tempat lain. Tabel yang dimuat dapat mewujudkan pemesanan kolom. Apakah mudah?
5. Penyaringan Kontrol
Awalnya, artikel ini akan berakhir, saya tiba -tiba ingat bahwa ada fungsi pencarian di bab sebelumnya. Tampaknya fungsi pencarian tidak dapat digunakan ketika paging server digunakan. Jadi saya ingat bahwa saya memiliki fungsi yang mirip dengan memfilter setiap kolom di CS sebelumnya. Blogger itu penasaran lagi. Apakah Tabel Bootstrap juga memiliki jenis penyaringan ini setiap kolom dalam tabel, jadi saya memeriksa dokumen. Hasilnya terpenuhi, dan sebenarnya ada sesuatu ~~ mari kita lihat.
1. Tampilan rendering
2. Contoh kode
(1) memperkenalkan JS tambahan
<skrip src = "~/content/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"> </script>
(2) Tentukan atribut tabel dan atribut header
<tabel id = "tb_roles" data-filter-control = "true"> <Thead> <tr> <th-field = "role_name" data-filter-control = "select"> nama peran </t> <-field = "deskripsi" data-filter-control = "input"> Deskripsi peran </th> <thr> thrup = "role-control =" input "> Deskripsi peran </th> <thr> thrup =" role-control = "input"> Deskripsi Peran </th> <thr> thrup = "th" levault = "input"> Deskripsi peran </th> <tH> thrup = "Th" role- " Data-filter-control = "input"> Halaman Default Peran </th> </tr> </tead> </able>
Karena atribut header tabel didefinisikan di sini, tidak perlu mendefinisikan kolom saat menginisialisasi JS.
(3) Inisialisasi JS
$('#tb_roles').bootstrapTable({url: '/Role/GetRole',method: 'get',toolbar: '#toolbar',striped: true,cache: false,striped: true,pagination: true,sortable: true,queryParams: function (param) {return param;},queryParamsType: "limit",detailView: false,//parent-son table Sidepagination: "Server", halaman: 10, pagelist: [10, 25, 50, 100], Cari: true, showColumns: true, showrefresh: true, minimumcountcolumns: 2, clicktoselect: true,});Pada awalnya, blogger berpikir bahwa pencarian semacam ini hanya bisa menjadi paging klien pengguna, tetapi setelah debugging, bukan itu masalahnya. Kondisi pencarian asli dapat diteruskan ke server melalui JSON. Mari kita lihat proses debugging
Menerima parameter di latar belakang dan deserialisasi mereka
Dengan cara ini, kita dapat melewati kondisi kueri dengan baik ke latar belakang. Sangat bagus dan kuat. Ini akan menghilangkan masalah memperluas fungsi pencarian tabel ~~
6. Ringkasan
Di atas adalah beberapa aplikasi ekstensi dari tabel bootstrap. Mungkin tidak lengkap, dan ada beberapa penggunaan lanjutan yang tidak diperkenalkan, seperti penggabungan baris dan kolom, pembekuan baris dan kolom, dll.
Konten di atas adalah pengetahuan yang relevan dari artefak komponen tabel tabel bootstrap [2. Pesanan Tabel dan Row and Kolom ayah dan anak] diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu semua orang!