Bootstrap tabulas formas spraudņa izmantošana un datu eksportēšana
Bootstrap Table Form Plugin Usage
Rakstu katalogs
1. Ievads
- Bootstrap tabulas ievads oficiālajā vietnē: http://bootstrap-table.wenzhixin.net.cn/zh-cn/
- Ķīniešu tīkls Bootstrap: http://www.bootcss.com/
- Bootstrap galda demonstrācija ： http://issues.wenzhixin.net.cn/bootstrap-table/index.html
- Bootstrap tabulas API ： http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
- Bootstrap tabulas avota kods: https://github.com/wenzhixin/bootstrap-table
- Boostrap Table paplašinājuma API: http://bootstrap-table.wenzhixin.net.cn/extensions/
2, lappuses atsauce
- Lai atvieglotu sāknēšanas un sāknēšanas tabulu ar oficiālo ieteicamo atsauces metodi, es vēlos lejupielādēt avota kodu un pats to lejupielādēt.
- Papildu 4 js, kas nepieciešami Excel eksportēšanai, var atrast šos 4 failus no šīm divām adresēm, kuras var neņemt vērā bez eksportēšanas.
- Lejupielādēt 1. adresi: https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/export
- Lejupielādēt 2. adresi: https://github.com/hhurz/tableExport.jquery.plugin
- HTML kods
3, vienkāršs piemērs
- Definējiet vienu HTML
table iezīmē
- Ir divi veidi, kā izmantot bootstrapTable, pirmā pāreja
data Atribūtu metode, jo tā nav elastīga, nedariet pārāk daudz demonstrācijas
Item ID Item Name Item Price
- Izmantojot JavaScript, iemācieties bootstrap-table, ir jāapgūst tā API, jāiepazīstas ar parasti lietoto pamata API, lūdzu, pārbaudiet oficiālo dokumentāciju vai skatiet šo emuāru autora tulkojumu: https://blog.csdn.net/rickiyeat/article/details/56483577
The page introduces the following JS
$('#table').bootstrapTable({ // corresponds to the id of the table tag Url: base_path + '/product/list', //AJAX gets the url of the table data Striped: true, // Whether to display the line spacing color (zebra crossing) Pagination: true, // whether to display pagination (*) sidePagination: 'server', //page mode: client client paging, server server paging (*) paginationLoop: false, / / can continue to press when the current page is a boundary queryParams: function (params) { // Parameters sent when requesting server data, you can add additional query parameters here, return false to terminate the request return { Limit: params.limit, // number of data to display per page Offset: params.offset, // the starting line number of the data displayed per page //sort: params.sort, // the field to sort //sortOrder: params.order, // collation //dataId: $('#dataId').val() // additional parameters added } }, / / pass parameters (*) pageNumber: 1, / / Initialize the first page, the default first page pageSize: 10, //Number of rows per page (*) pageList: [10, 25, 50, 100, 'all'], //Number of rows per page (*) contentType: 'application/x-www-form-urlencoded', / / an encoding. Need to be used in the post request. The get request used here, comment out this sentence can also get the data //search: true, // Whether to display the table search, this search is a client search, will not enter the server, so personal feelings are not meaningful strictSearch: false, //whether global match, false fuzzy match showColumns: true, //display all columns showRefresh: true, // whether to display the refresh button minimumCountColumns: 2, // minimum number of allowed columns clickToSelect: false, // whether to enable click to select the row //height: 500, //row height, if the height property is not set, the table automatically feels the height of the table according to the number of records. //uniqueId: 'id', //the unique identifier of each line, generally the primary key column showToggle: true, //Show toggle button for detail view and list view cardView: false, // whether to display the detailed view detailView: false, // whether to display the parent and child tables Cache: false, // set to false disable AJAX data cache, default is true Sortable: true, // whether to enable sorting sortOrder: 'asc', //sort by sortName: 'sn', // the field to sort columns: [ { Field: 'sn', // return the name in the json data Title: 'order number', // table header display text Align: 'center', // centered left and right Valign: 'middle' // centered up and down }, { field: 'productname', Title: 'product name', align: 'center', valign: 'middle' }, { field: 'cost', Title: 'price (¥)', align: 'center', valign: 'middle', sortable: true }, { field: 'brankname', Title: 'Brand', align: 'center', valign: 'middle', }, { field: 'specificationvalues', Title: 'Specification', align: 'center', valign: 'middle', }, { field: 'areaname', Title: 'Place of Origin', align: 'center', valign: 'middle', } ], onLoadSuccess: function () { //execute when loading successfully Console.info('Load successfully') }, onLoadError: function () { //execute when the load fails Console.info('Load data failed') }, //>>>>>>>>>>>>>>Export excel form settings showExport: phoneOrPc (), / / whether to display the export button (this method is written to determine whether the terminal is a computer or a mobile phone, the computer returns true, the phone returns falsee, the phone does not display the button) exportDataType: 'basic', //basic', 'all', 'selected'. exportTypes: ['excel', 'xlsx'], //export type //exportButton: $('#btn_export'), // Export event for button btn_export binding Custom export button (can be used) exportOptions: { //ignoreColumn: [0,0], //Ignore the index of a column fileName: 'data export', //file name setting worksheetName: 'Sheet1', //Table workspace name tableName: 'Product data table', excelstyles: ['background-color', 'color', 'font-size', 'font-weight'], //onMsoNumberFormat: DoOnMsoNumberFormat } //Export excel table settings<<<<<<<<<<<<<<<<< }) 4, pievērsiet uzmanību vietai
- Pārbaudot, lapa vispirms atlasa “klients”. Tā kā lapa ir klients, datu eksportēšana ļaus viegli definēt “pamata”, “visu”, “atlasīto”. Ja lapa ir serveris, pat ja atlasāt “visi”, tiek atlasīta pašreizējā lapa. (“pamata”), ja vēlaties eksportēt visus, vispirms varat parādīt ierakstu skaitu lapā un pēc tam eksportēt pašreizējos lappusē ir visi dati.
- Ja lapa ir Serveris Atgrieztajā Json virknē ir jābūt 2 datiem, viens ir
total 'Tas ir viss datu skaits. Vēl viena “rinda” ir “pašreizējās lapas” saturs. (Skatiet Json virknes formātu zemāk)
5, demonstrācijas karte
Autors: neliela straume uz upēm
Avots: CSDN
Oriģināls: https://blog.csdn.net/javayoucome/article/details/80081771
Paziņojums par autortiesībām: Šis raksts ir emuāru autora oriģināls, lūdzu, pievienojiet emuāra ziņas saiti!
