Bootstrap table component artifacts of JS component series [Final] And bootstraptable

Bootstrap table component artifacts of JS component series [Final] And bootstraptable

Bootstrap table series:

Detailed description of JS table component artifact bootstrap table (Basic Edition)

Bootstrap table component artifact of JS component series [Final]

Bootstrap table component artifact of JS component series [2. Parent and Child tables and column order adjustment]

Bootstrap Table is a lightweight and feature-rich Table-based display of data. It supports single choice, check box, sorting, paging, display/hide columns, fixed title scrolling Table, and responsive design, load JSON Data Using Ajax, click the column to be sorted, and view the card. This article introduces the Bootstrap table component (final) in the JS component series. Let's take a look at it!

I. effect display

1. Table row style

For example, we have a requirement to display the order page. Orders in different States are displayed in different colors,

2. edit a table in the row

In the first article, park friends asked the bloggers whether they can support intra-row editing. The answer is yes. Let's take a look at the effect:

Before editing

Click a cell data

After editing

3. MERGE table columns and columns

It is very common for the bloggers to discuss the need for Row-and-column merge, especially for page reports. Let's take a look at the effect:

The current page is incomplete. Click to view details. How is it? The effect is good.

4. Export table data

For table data export, bootstrap table supports three modes: basic, all, and selected. That is, the current page data is exported, all data is exported, and the selected data is exported. You can also export multiple types of files, such as common excel, xml, json, and other formats.

Export the current page to excel

Export all table data

Export selected row data

The export of other types of files is basically the same as that of excel, so no results are displayed.

Ii. Example of table row style code

For the style settings of table rows, the others are the most basic functions. Why should we put them in article 3? The reason is that bloggers think this function may be used everywhere. Of course, the effect is not difficult. You can use jQuery to set the background color of tr, but the blogger thinks that since bootstrap table provides a mechanism to set the background color of rows, why not use its built-in APIs. Let's look at how to implement it.

When initializing a table

// Initialize Table $ ('# tb_order '). bootstrapTable ({url: '/TableStyle/getorder', // request background URL (*) method: 'get', // Request method (*) // toolbar: '# toolbar', // container used by the tool button striped: true, // whether to display the row interval color cache: false, // whether to use the cache. The default value is true, therefore, you need to set this attribute (*) pagination: true, // whether to display paging (*) sortable: false, // whether to enable sorting sortOrder: "asc ", // sorting method queryParams: oTableInit. queryParams, // pass the parameter (*) sidePagination: "server", // paging mode: client page, server Page (*) pageNumber: 1, // initialize and load the first page. The default page is pageSize: 10. // The number of record lines per page (*) pageList: [10, 25, 50,100]. // The number of lines per page (*) search: true, // whether to display table search. this search is a client search and will not go to the server. Therefore, personally, it is of little significance to strictSearch: true, showColumns: true, // whether to display all the columns showRefresh: true, // whether to display the refresh button minimumCountColumns: 2, // The minimum allowed number of columns clickToSelect: true, // whether to enable the height of the selected row: 500, // The Row height. If the height attribute is not set, the table automatically considers the table height uniqueId: "ID" based on the number of records, // the unique identifier of each row, generally showToggle: true, // whether to display the switch button for the detailed view and List View cardView: false, // whether to display the detailed view detailView: false, // whether to display the Parent and Child table rowStyle: function (row, index) {// here, five values represent the colors ['active', 'success', 'info', 'warning', 'danger ']; var strclass = ""; if (row. ORDER_STATUS = "waiting for production") {strclass = 'success '; // There is an active} else if (row. ORDER_STATUS = "deleted") {strclass = 'danger ';} else {return {};} return {classes: strclass }}, columns: [{checkbox: true }, {field: 'order _ no', title: 'order number'}, {field: 'order _ type', title: 'order type'}, {field: 'order _ status', title: 'order status'}, {field: 'remark', title: 'note'},]});

In fact, the focus is on this parameter:

RowStyle: function (row, index) {// here, five values represent the colors ['active', 'success ', 'info', 'warning ', 'danger ']; var strclass = ""; if (row. ORDER_STATUS = "waiting for production") {strclass = 'success '; // There is an active} else if (row. ORDER_STATUS = "deleted") {strclass = 'danger ';} else {return {};} return {classes: strclass }},

Bootstrap table supports the row background colors of tables in table 5, which are 'active', 'success', 'info', 'warning', and 'danger, for each corresponding background color, run the code to see it. With regard to the return value of this method, the author has also studied it for a long time when using it for the first time. According to the bootstrap table rules, an object type in json format such as {classes: strclass} must be returned }.

3. Example code for editing in a table row

Several js files that need to be extended using bootstrap table for table row editing.

1. Introduce additional js files

<link rel="stylesheet" href="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.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-editable.js"></script> 

2. Add two attributes when defining a table on the cshtml page

<Table id = "tb_ments ments"> <thead> <tr> <th data-field = "Name" data-editable = "true"> Department Name </th> <th data -field = "ParentName"> superior department </th> <th data-field = "Level" data-editable = "true"> department Level </th> <th data- field = "Desc" data-editable = "true"> description </th> </tr> </thead> </table>

For initialization in js, the statement is as follows:

{Field: "name", title: "name", editable: true}

3. register the edited and saved event when initializing the table in js

$ ('# Tb_administrative ments '). bootstrapTable ({url: '/Editable/GetDepartment', // request background URL (*) method: 'get', // Request method (*) toolbar: '# toolbar', // container used by the tool button striped: true, // whether to display the row interval color cache: false, // whether to use the cache. The default value is true, therefore, you need to set this attribute (*) pagination: true, // whether to display paging (*) sortable: false, // whether to enable sorting sortOrder: "asc ", // sorting method queryParams: oTableInit. queryParams, // pass the parameter (*) sidePagination: "server", // paging mode: client page, server Page (*) pageNumber: 1, // initialize and load the first page. The default page is pageSize: 10. // The number of record lines per page (*) onEditableSave: function (field, row, oldValue, $ el) {$. ajax ({type: "post", url: "/Editable/Edit", data: {strJson: JSON. stringify (row)}, success: function (data, status) {if (status = "success") {alert ("edited") ;}}, error: function () {alert ("Error") ;}, complete: function (){}});}});

Focus on how to handle this event

OnEditableSave: function (field, row, oldValue, $ el) {$. ajax ({type: "post", url: "/Editable/Edit", data: {strJson: JSON. stringify (row)}, success: function (data, status) {if (status = "success") {alert ("edited") ;}}, error: function () {alert ("Error") ;}, complete: function (){}});}

You need to process the stored logic in the corresponding method. The four parameters field, row, oldValue, and $ el correspond to the name of the current column, the Data Object of the current row, the value before update, and the jQuery object of the edited current cell respectively.

Iv. code example for table row/column merge

The row/column Merge function of a table does not reference other js files. You only need to use the colspan and rowspan of the table on the cshtml page.

1. cshtml page

<Table id = "tb_report"> <thead> <tr> <th colspan = "4" data-valign = "middle" data-align = "center"> quarter 1 </ th> <th colspan = "4" data-valign = "middle" data-align = "center"> Second Quarter </th> <th colspan = "4" data-valign = "middle" data-align = "center"> Quarter 3 </th> <th colspan = "4" data-valign = "middle" data-align = "center"> fourth quarter </th> <th data-field = "TotalCount" rowspan = "2" data-valign = "middle" data-align = "center"> Annual Summary </th> </tr> <th data-field = "JanCount" data-align = "center"> August 1, January </th> <th data-field = "FebCount" data -align = "center"> February </th> <th data-field = "MarCount" data-align = "center"> March </th> <th data-field = "FirstQuarter" data-align = "center"> first quarter </th> <th data-field = "AprCount" data-align = "center"> April </th> <th data-field = "MayCount" data-align = "center"> August 1, May </th> <th data-field = "JunCount" data-align = "center"> August 1, June </th> <th data-field = "SecondQuarter" data-align = "center"> Second 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"> September </th> <th data-field = "ThirdQuarter" data-align = "center"> Quarter 3 </th> <th data-field = "OctCount" data-align = "center"> August 1, October </th> <th data-field = "NovCount" data-align = "center"> August 1, November </th> <th data-field = "DecCount" data-align = "center"> August 1, December </th> <th data-field = "ForthQuarter" data-align = "center"> Fourth Quarter </th> </tr> </thead> </table>

2. js Initialization is not special

$ ('# Tb_report '). bootstrapTable ({url: '/GroupColumns/getreport', // request background URL (*) method: 'get', // Request method (*) toolbar: '# toolbar', // container used by the tool button striped: true, // whether to display the row interval color cache: false, // whether to use the cache. The default value is true, therefore, in general, you need to set this attribute (*) pagination: true, // whether to display paging (*) sortOrder: "asc", // sorting method queryParams: oTableInit. queryParams, // pass the parameter (*) sidePagination: "server", // paging mode: client page, server Page (*) pageNumber: 1, // initialize and load the first page. The default page is pageSize: 10. // The number of record lines per page (*) pageList: [10, 25, 50,100]. // The number of lines per page (*)}) that can be selected (*)});

Is it easy. Of course, some people have said that you can directly set url, paging, and other information using the table attribute in cshtml without js initialization. Indeed, if we have read its api, we will find that every attribute initialized by it corresponds to a table attribute. Type

If your table does not have some special events to handle, this is completely correct.

V. Example code for exporting table data

The export function of table data also requires some extended js support.

1. Introduce additional js files

<script src="~/Content/bootstrap-table/extensions/export/bootstrap-table-export.js"></script><script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>

2. js Initialization

$ ('# Tb_administrative ments '). bootstrapTable ({url: '/Export/GetDepartment', // request background URL (*) method: 'get', // Request method (*) toolbar: '# toolbar', // container used by the tool button striped: true, // whether to display the row interval color cache: false, // whether to use the cache. The default value is true, therefore, you need to set this attribute (*) pagination: true, // whether to display paging (*) sortable: false, // whether to enable sorting sortOrder: "asc ", // sorting method queryParams: oTableInit. queryParams, // pass the parameter (*) sidePagination: "client", // paging mode: client page, server Page (*) pageNumber: 1, // initialize and load the first page. The default page is pageSize: 10. // The number of record lines per page (*) pageList: [10, 25, 50,100]. // The number of rows per page (*) clickToSelect: true, showExport: true, // whether to display the export exportDataType: "basic", // basic ', 'all', 'selected '. columns: [{checkbox: true}, {field: 'name', title: 'department name'}, {field: 'parentname', title: 'superior authorization '}, {field: 'level', title: 'department level'}, {field: 'desc', title: 'description'},]});

Focus: These two attributes

ShowExport: true, // whether to display export exportDataType: "basic", // basic ', 'all', 'selected '. showExport indicates whether to display the export button. exportDataType indicates whether the export mode is the current page, all data, or selected data.

Vi. Summary

The above is the functional effect and simple code for implementation. The blogger found several problems to be solved.

1. the row editing function is to submit each cell to the background. This will cause frequent database operations and is not suitable. I don't know if there is a better way to submit each line to the background.

2. Although the export function is very useful, it is a pity that the IE browser is not supported. The blogger tried example on the official website, and it seems that IE cannot export the function. To be verified.

The above is a summary of the Bootstrap table component [Final] of the JS component series introduced to you. I hope it will help you!