1. Pengenalan Tabel Bootstrap
Mengenai pengenalan tabel bootstrap, umumnya ada dua metode:
1. Unduh kode sumber secara langsung dan tambahkan ke proyek.
Karena tabel bootstrap adalah komponen bootstrap, itu tergantung pada bootstrap. Pertama -tama kita perlu menambahkan referensi ke bootstrap.
2. Gunakan nuget magis kami
Buka Nuget dan cari dua paket ini
Bootstrap sudah menjadi 3.3.5 terbaru, sehingga kami dapat menginstalnya secara langsung.
Versi tabel bootstrap sebenarnya 0,4, yang terlalu scammed. Jadi blogger menyarankan agar paket tabel bootstrap diunduh langsung dalam kode sumber. Versi terbaru dari Bootstrap Table tampaknya 1.9.0.
Latar belakang artikel ini diperkenalkan:
Baru -baru ini, pelanggan meningkatkan permintaan dan ingin mengoptimalkan sistem manajemen asli, yang dapat ditampilkan dengan baik melalui ponsel. Dia memikirkan dua solusi:
Rencana A: Simpan halaman asli dan rancang satu set halaman baru yang cocok untuk ponsel. Saat mengakses ponsel, masukkan m.zhy.com (halaman seluler), dan saat mengakses perangkat PC, masukkan www.zhy.com (halaman PC)
Solusi B: Gunakan kerangka bootstrap untuk mengganti halaman asli, dan secara otomatis beradaptasi dengan ponsel, tablet, dan perangkat PC
Menggunakan solusi A membutuhkan merancang satu set antarmuka dan menulis ulang antarmuka yang cocok untuk halaman. Mempertimbangkan masalah waktu dan biaya, proyek mengadopsi solusi b
2. Tampilan Efek
2. Pengantar singkat untuk tabel bootstrap
Tabel Bootstrap adalah plug-in tabel ringan yang menggunakan AJAX untuk mendapatkan data dalam format JSON. Pagination dan pengisian datanya sangat nyaman dan mendukung internasionalisasi.
3. Cara menggunakan
1. Perkenalkan JS dan CSS
<!-CSS Style-> <link href = "css/bootstrap/bootstrap.min.css" rel = "stylesheet"> <link href = "css/bootstrap/bootstrap-table.css" rel = "stylesheet"> <!-JS-> src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script><script src="js/bootstrap/bootstrap.min.js"></script><script src="js/bootstrap/bootstrap-table.js"></script><script src = "js/bootstrap/bootstrap-able.js"> </script> <script src = "js/bootstrap/bootstrap-able.js"> </script> <script src = "js/bootstrap/bootstrap-table-zh-cn.js"> </script>
2. Pengisian data tabel
Ada dua cara untuk mendapatkan data dari tabel bootstrap. Salah satunya adalah menentukan sumber data melalui properti data-URL tabel, dan yang lainnya adalah menentukan URL ketika menginisialisasi tabel melalui JavaScript untuk mendapatkan data.
<Table Data-koggle = "Table"> <tead> ... </tead> </able> ...
$ ('#tabel'). Bootstraptable ({url: 'data.json'});Metode kedua lebih fleksibel saat memproses data kompleks daripada metode pertama. Secara umum, metode kedua digunakan untuk mengisi data tabel.
$ (function () {// 1. Inisialisasi tabel var otable = new tableInit (); otable.init (); // 2. Inisialisasi tombol klik tombol/ * var obuttoninit = new buttonInit (); obuttoninit.init (); */}); var tableInit = function () {var otableInit = objek baru (); // inisialisasi tabel otableInit.init = function () {$ ('#tradelist'). Bootstraptable ({url: '/venderManager/tradelist', // minta metode url (*): 'post', // Metode permintaan (*) Toolbar: '#toolbar',//Container yang ada di mana caxa: '#toolbar',//where line where fiure: '#toolbar',///container yang diluluki oleh caxa,/where line, '#toolbar', fies line, 'fiule,' fiule fiure: '#toolbar', // cache, default benar, jadi secara umum, Anda perlu mengatur properti ini (*) pagination: true, // di mana untuk menampilkan paging (*) sortable: false, // apakah sortorder: "asc", // metode penyortiran queryparams: oTableinit.queryparams, // pagination parameter (*) sidepagination: "server" server "server," server "server," pageNumber:1, //Initialize the first page to load, the default first page pageSize: 50, //The number of rows recorded per page (*) pageList: [10, 25, 50, 100], //The number of rows per page to be selected (*) strictSearch: true, clickToSelect: true, //Whether click select row height: 460, //Line height, if the height attribute is not set, the table automatically feels the height of the table according to the number of records, uniqueId: "id", //The unique identification of each row is generally the primary key column cardView: false, //Does the detailed view detailView: false, //Does the parent and child table columns: [{ field: 'id', title: 'serial number' }, { field: 'liushuiid', title: 'Transaction number' }, { field: 'orderid', title: 'Nomor pesanan'}, {field: 'reciVetime', judul: 'waktu transaksi'}, {field: 'harga', judul: 'jumlah'}, {field: 'Coin_credit', judul: 'input koin'}, {field: 'bill_credit', judul: 'masukan' {field: '{field:' {field: '{field:' {field: '{field:' Judul: 'Tipe Transaksi'}, {Field: 'GoodMachineID', Judul: 'Nomor Kapal'}, {Field: 'InnerIdname', Judul: 'Nomor Jalur Kargo'}, {Field: 'Goodname', Judul: 'Nama Produk'}, {Field: 'ChangeStatus', Judul: 'Pembayaran',}} {'Field:' Field: 'ChangeStatus', 'Pembayaran',} {Field: 'Field:' Changestatus ',' '', }; // Dapatkan parameter kueri otableInit.queryparams = function (params) {var temp = {// Nama kunci di sini dan nama variabel pengontrol harus selalu. Jika ini diubah, pengontrol juga perlu diubah ke batas yang sama: params.limit, // halaman ukuran offset: params.offset, // nomor halaman sdate: $ ("#strattime"). Val (), edit: $ ("#endtime"). Val (), sellerid: $ ("#selererid"). Val (), $: $: $: $: ")," val ". $ ("#CardNumber"). Val (), Maxrows: Params.Limit, PageIndex: params.pagenumber, portid: $ ("#portid"). Val (), cardnumber: $ ("#cardnumber"). Val (), tradetype: $ ('input: radio [name = "tradetype"]: check'). Sukses: $ ('Input: Radio [name = "Success"]: Diperiksa'). Val (),}; kembalikan suhu; }; mengembalikan otableInit; };Bidang bidang harus sesuai dengan bidang yang dikembalikan oleh server sebelum data akan ditampilkan.
3. Dapatkan data di latar belakang
A. Servlet memperoleh data
BufferedReader bufr = baru bufferedReader (inputStreamReader baru (request.getInputStream (), "UTF-8")); StringBuilder sBuilder = StringBuilder baru (""); String temp = ""; while ((temp = bufr.readline ())! = null) {sbuilder.append (temp); } bufr.close (); String json = sbuilder.toString (); JsonObject json1 = jsonobject.fromObject (json); String sdate = json1.getString ("sdate"); // Dapatkan data front-end melalui metode ini ...B. Metode yang sesuai dalam pengontrol SpringMVC memperoleh data
Publik JSONRESULT getDepartment (batas int, int offset, string orderId, string sellerid, portid, cardnumber, success, maxrows, tradetype) {...}4. Pagination (yang menemukan masalah terbanyak)
Menggunakan pagination, data yang dikembalikan oleh sisi server harus mencakup baris dan total, kode adalah sebagai berikut:
... <br> gblst = sqlado.gettradelist (sql, pageindex, maxrows); jsonarray jsondata = new jsonarray (); JsonObject jo = null; untuk (int i = 0, len = gblst.size (); i <len; i ++) {tradebean tb = gblst.get (i); if (tb == null) {lanjutan; } jo = new jsonobject (); jo.put ("id", i+1); jo.put ("liushuiid", tb.getliushuiid ()); jo.put ("harga", string.format ("%1.2f", tb.getPrice ()/100.0)); jo.put ("MobilePhone", tb.getMobilephone ()); jo.put ("receivetime", toolbox.getymdhms (tb.getReceivetime ())); jo.put ("tradetype", clsconsst.trade_type_des [tb.gettradetype ()]); jo.put ("changestatus", (tb.getchangestatus ()! = 0)? "Sukses": "Gagal"); jo.put ("changestatus", (tb.getchangestatus ()! = 0)? "Sukses": "Gagal"); jo.put ("sendstatus", (tb.getSendstatus ()! = 0)? "Sukses": "Gagal"); jo.put ("bill_credit", string.format ("%1.2f", tb.getbill_credit ()/100.0)); jo.put ("ubah", string.format ("%1.2f", tb.getChanges ()/100.0)); jo.put ("goodroadid", tb.getgoodroadId ()); jo.put ("smscontent", tb.getsmscontent ()); jo.put ("orderId", tb.getorderId ()); jo.put ("Goodname", tb.getgoodsname ()); jo.put ("inneridname", tb.getinnerIdname ()); jo.put ("xmlstr", tb.getxmlstr ()); jsondata.add (Jo); } int totalCount = sqlado.gettraderowscount (sql); JsonObject jsonObject = new jsonObject (); jsonobject.put ("baris", jsondata); // jsonarray jsonobject.put ("total", totalcount); // total catatan out.print (jsonobject.toString ()); <br> ...5. Pengantar konten antarmuka pagination
Front-end mendapatkan data paged, kodenya adalah sebagai berikut:
... <br> otableInit.queryparams = function (params) {var temp = {// Nama kunci di sini dan nama variabel pengontrol harus selalu. Jika ini diubah, pengontrol juga perlu diubah ke batas yang sama: params.limit, // Berapa banyak catatan yang diimbangi: params.offset, // Tampilkan berapa banyak catatan yang direkam pada halaman sdate: $ ("#strattime"). Val (),}; kembalikan suhu; }; <br> ...Backend mendapatkan data paged, kodenya adalah sebagai berikut:
... <br> int pageIndex = 0; int offset = toolbox.filterint (json1.getString ("offset")); int limit = toolbox.filterint (json1.getString ("limit")); if (offset! = 0) {pageIndex = offset/limit;} pageIndex+= 1; // Berapa halaman <br> ...4. Lainnya
Bootstrap3 kompatibel dengan browser IE8! Lihat artikel: //www.vevb.com/article/83366.htm
Jika Anda belum belajar cukup, Anda dapat mengklik di sini untuk belajar dan kemudian melampirkan topik yang indah kepada Anda: Tutorial Pembelajaran Bootstrap
Di atas adalah semua tentang artikel ini. Saya harap ini dapat membantu Anda mempelajari tabel Bootstrap Artefak Komponen Tabel JS dengan lebih baik.