Bootstraptable table component artifact in the JS component series [Final] _ javascript skills

BootstrapTable is a lightweight and feature-rich table-based data display. It supports single choice, check boxes, sorting, paging, hidden columns display, fixed title scrolling tables, and responsive design, load JSON Data Using Ajax, click the column to be sorted, and view the card. This article introduces the Bootstraptable table component (final) in the JS component series. Let's take a look at it. 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