bootstrap table series:
Detailed explanation of JS table component artifact bootstrap table (basic version)
The Bootstrap table table component artifact of JS component series [End Chapter]
The Bootstrap table table component artifact of JS component series [2. Parent-son table and row-column ordering]
Bootstrap Table is lightweight and feature-rich data displayed in table form, supporting single selection, checkboxes, sorting, paging, display/hide columns, fixed title scroll table, responsive design, Ajax loading JSON data, click sorted columns, card views, etc. Then this article introduces the Bootstrap table table component artifact [End Chapter] of the JS component series, let’s learn together!
1. Effect display
1. Table row style
For example, we have a requirement to display the order page, and orders with different statuses show different colors, as shown in the figure:
2. Edit within the form line
In the first article, a friend of the park asked the blogger if he could support the effect of editing within the industry, and the answer was yes. Let's take a look at the effect:
Before editing
Click on a cell data
After editing, complete
3. Combination of rows and columns of tables
Bloggers think it is very common for rank-and-rank mergers, especially when making page reports. Let's take a look at the effect:
The current page is incomplete, click to enter and take a look. How about it? The effect is pretty good.
4. Table data export
Regarding table data export, bootstrap table supports the export of three modes: basic, all, selected. That is, the data export of the current page, all data export, and selected data export. It also supports exporting various types of files, such as common excel, xml, json and other formats.
Export the current page to excel
Export all data in the table
Export selected row data
As for the export of other types of files, it is basically the same as Excel, so the effect will not be displayed.
2. Table row style code example
Regarding the style setting of table rows, other functions are its most basic functions. Why put it in the third article? It's because the blogger thinks this function may be used everywhere. Of course, the effect is not difficult. You can also achieve the background color of tr by using jQuery, but the blogger thinks that since the bootstrap table provides a mechanism to set the background color of the row, why not use its built-in API. Let's see how to implement it.
When initializing the table
//Initialize Table$('#tb_order').bootstrapTable({url: '/TableStyle/GetOrder', //Request URL (*) method: 'get', //Request method (*) //Toolbar: '#toolbar', //Which container striped by the tool button is true, //Where to display line interval color cache: false, //Whether to use cache, default is true, so in general, you need to set this property (*) pagination: true, //Whether to display paging (*) sortable: false, //Whether to enable sortOrder: "asc", //Sorting method queryParams: oTableInit.queryParams,//Pagination parameters (*) sidePagination: "server", //Pagination method: client client pagination, server server pagination (*) pageNumber: 1, //Initialize the first page to load, default first page pageSize: 10, //Number of record rows per page (*) pageList: [10, 25, 50, 100], //Number of rows per page to select (*) search: true, //Does the table search be displayed? This search is a client search and will not enter the server, so I personally feel that it is of little significance to strictSearch: true, showColumns: true, //Does all columns showRefresh: true, //Does the refresh button display minimumCountColumns: 2, //The minimum number of columns allowed clickToSelect: true, //Where to enable click select row height: 500, //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 showToggle: true, //Does the toggle button for detailed view and list view cardView: false, //Does the detailed view detailView: false, //Does the parent-child table rowStyle: function (row, index) {//There are 5 values here representing the colors in 5 ['active', 'success', 'info', 'warning', 'danger'];var strclass = "";if (row.ORDER_STATUS == "To be scheduled") {strclass = 'success';//There is also 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: 'Remarks'}, ]});In fact, the focus is on this parameter:
rowStyle: function (row, index) {//There are 5 values here representing the colors in 5['active', 'success', 'info', 'warning', 'danger'];var strclass = "";if (row.ORDER_STATUS == "To be scheduled") {strclass = 'success';//There is also an active}else if (row.ORDER_STATUS == "Deleted") {strclass = 'danger';}else {return {};}return { classes: strclass }},The bootstrap table supports the row background colors of the table in 5, namely 'active', 'success', 'info', 'warning', 'danger'. As for each corresponding background color, you can see it by running the code. Regarding the return value of this method, the blogger also studied it for a long time when he first used it. According to the rules of bootstrap table, it is necessary to return a json-format object type such as: { classes: strclass } .
3. Example of editing code in the form line
Regarding table editing, several js files that need to be extended using bootstrap table.
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. When defining a table on the cshtml page, add two attributes
<table id="tb_departments"><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">Descriptor</th></tr></tead></table>
If it is initialized in js, the writing method is as follows:
{field: "name", title: "name", editable:true}3. Register edit and save events when initializing the table in js
$('#tb_departments').bootstrapTable({url: '/Editable/GetDepartment', //Request URL (*) method: 'get', //Request method (*) toolbar: '#toolbar', //Which container striped by the tool button is true, //Where to display the line interval color cache: false, //Whether to use cache, the default is true, so in general, you need to set this property (*) pagination: true, //Whether to display paging (*) sortable: false, //Whether to enable sortOrder: "asc", //Sorting method queryParams: oTableInit.queryParams, //Passing parameters (*) sidePagination: "server", //Paging method: client client paging, server server paging (*) pageNumber: 1, //Initialize the first page to load, default first page pageSize: 10, //Number of records 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("Edit successful");}},error: function () {alert("Error");},complete: function () {}});}});The key point is to look at the handling of 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("edit successful");}},error: function () {alert("Error");},complete: function () {}});}The corresponding method needs to handle the saved logic yourself. 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.
4. Example of table row and column merge code
The row-column merging function of the table does not require reference to other js files. It only needs to use table colspan and rowspan on the cshtml page to achieve it.
1. cshtml page
<table id="tb_report"><thead><tr><th colspan="4" data-valign="middle" data-align="center">Q1</th><th colspan="4" data-valign="middle" data-align="center">Quarter</th><th colspan="4" data-valign="middle" data-align="center">Quarter</th><th data-field="TotalCount" rowspan="2" data-valign="middle" data-align="center">Annual Summary</th></tr><tr><th data-field="JanCount" data-align="center">Jan</th><th data-field="FebCount" data-align="center">FebCount</th><th data-field="MarCount" data-align="center">March</th><th data-field="FirstQuarter" data-align="center">FirstQuarter</th><th data-field="AprCount" data-align="center">April</th><th data-field="MayCount" data-align="center">May</th><th data-field="JunCount" data-align="center">Jun</th><th data-field="SecondQuarter" data-align="center">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">Sep</th><th data-field="ThirdQuarter" data-align="center">Quarter 3</th><th data-field="OctCount" data-align="center">October</th><th data-field="NovCount" data-align="center">November</th><th data-field="DecCount" data-align="center">December</th><th data-field="ForthQuarter" data-align="center">Quarter 4</th></tr></thead></table>
2. There is no special js initialization
$('#tb_report').bootstrapTable({url: '/GroupColumns/GetReport', //Request URL (*) method: 'get', //Request method (*) toolbar: '#toolbar', //Which container striped by the tool button is true, //Where to display the line interval color cache: false, //Whether to use cache, the default is true, so in general, you need to set this property (*) pagination: true, //Whether to display pagination (*) sortOrder: "asc", //Sorting method queryParams: oTableInit.queryParams, //Passing parameters (*) sidePagination: "server", //Paging method: client client paging, server server paging (*) pageNumber: 1, //Initialize the first page to load, default first page pageSize: 10, //Number of record lines per page (*) pageList: [10, 25, 50, 100], //Number of rows per page to select (*)});How about it, is it easy? Of course, some people have said that you can use the table attributes to set url, pagination and other information without using js initialization, directly in cshtml. Indeed, if we look at its API, we will find that each attribute it initializes corresponds to the attribute of a table. Type as
If your form does not have some special events to handle, there is no problem at all.
5. Table data export code examples
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. When js is initialized
$('#tb_departments').bootstrapTable({url: '/Export/GetDepartment', //Request URL (*) method: 'get', //Request method (*) toolbar: '#toolbar', //Which container striped by the tool button is true, //Where to display the line interval color cache: false, //Whether to use cache, the default is true, so in general, you need to set this property (*) pagination: true, //Whether to display paging (*) sortable: false, //Whether to enable sortOrder: "asc", //Sorting method queryParams: oTableInit.queryParams, //Passing parameters (*) sidePagination: "client", //Pagination method: client client paging, server server paging (*) pageNumber: 1, //Initialize the first page to load, default first page pageSize: 10, //Number of record lines per page (*) pageList: [10, 25, 50, 100], //Number of rows per page to select (*) clickToSelect: true, showExport: true, //Is exportDataType displayed: "basic", //basic', 'all', 'selected'.columns: [{checkbox: true}, {field: 'Name',title: 'Department name'}, {field: 'ParentName',title: 'Superior department'}, {field: 'Level',title: 'Department level'}, {field: 'Desc',title: 'Description'}, ]});Let's look at the key points: these two attributes
showExport: true, // Whether to display the exportDataType: "basic", //basic', 'all', 'selected'.showExport means whether to display the exported button, exportDataType means whether the exported mode is the current page, all data or selected data.
6. Summary
The above is the effect of the function and the simple code to implement it. The blogger found that there were several problems to be solved.
1. The function of in-line editing is to submit each cell to the background, which will cause frequent operations of the database and feel inappropriate. 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 unfortunately not supported by IE browser. The blogger has tried the example on the official website, and it seems that IE cannot export it. To be verified.
The above is the relevant content of the Bootstrap table table component artifact [End Chapter] of the JS component series introduced to you by the editor. I hope it will be helpful to everyone!