Due to recent work needs, I have further studied and understood Bootstrap. In the actual application process, I found that it is more convenient and intuitive to use tables to display data and information, so I started to use the table function of bootstrap, but the table of bootstrap mainly provides some basic The style's JS control function is relatively weak, so a more powerful table plug-in is needed to solve the problem. At this time, bootstrap-table comes into play.
Advantages of Bootstrap-Table:
1. Because it is based on Bootstrap, the corresponding styles are standardized.
2. Provides powerful operation options and method API, only need to pay attention to the assembly of business data fields and does not need to pay attention to various styles.
3. Detailed documents and examples, especially the common table application methods in the example documents, are basically available, and you can directly copy and modify them.
4. Many third-party extension plug-ins are provided to meet complex application scenarios.
The following is a sample table implementation based on Bootstrap-Table
The acquisition and use of Bootstrap-Table
1. Download directly from Git
https://github.com/wenzhixin/bootstrap-table
Download the unzipped legend:
2. You can directly reference it on the html page
Note that bootstrap-table is based on bootsrap and jQuery, so it is necessary to introduce these two js libraries as shown below, import js and css of bootsrap-table.
a. First introduce jQuery and Bootstrap
b. Introduce bootstrap-table again
Note: Bootstrap-table-zh-CN.min.js is introduced to support Chinese localization. Bootstrap-table supports multiple languages and can be imported as needed.
3. Assemble the header fields of the Table
bootstrap-table supports two ways to define tables, one is to use the data attribute of html, and the other is to use the JavaScript script method.
JavaScript operation process:
a. First, define the table tag in the html page and add the corresponding attributes. Each attribute is marked with data-xx="x". For the detailed definition of each attribute, please refer to the [Table Parameters] section of the official document.
Detailed documentation of bootstrap-table
b. Write JavaScript to define the header, as follows:
$("#caseListTable").bootstrapTable({}); The table can be dynamically generated by putting a json object in ().
columns : [{}] is used to define the field name of the header, a json object corresponds to the definition of the format of a field,
c. Assemble the data into a table:
Get the server-side data through jQuery's ajax, and then load it into the table, as shown below:
$("#caseListTable").bootstrapTable('load',caseData);
'load' is the method name, and caseData is a json array. If the key in the returned json data and the field in the table cannot be applied one by one, you need to write another function to process the json data, that is, the packagingDataForCaseListTable function in this figure.
Note that if the returned data format is an array in json format, each array item represents a row of data: the key in the json data should correspond to the name of the [field] defined in step b, such as: field: case_name, which applies to The json data format is {"case_name": "myCase"},) as shown in the following json format example:
