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. Today, let’s introduce its slightly more advanced usage in combination with the usage of parent-child tables and row-column ordering of Bootstrap tables.
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]
1. Effect display
Today I will change the following method slightly. Let’s take a look at the implementation effect first, and then introduce the code implementation and precautions later. Come on, let’s send the renderings:
1. Father and son table rendering
2. Row ordering
Before ordering
Drag the line to sort it to the first line
3. Column ordering
Before ordering
Drag column title sort
After ordering
2. Detailed explanation of the father-son table code
In the previous chapter, we introduced the basic usage of Bootstrap table. When initializing the table, there is a property "detailView". Set it to true, and you can see an icon in the shape of "+" in front of each row. Clicking this icon triggers the event that loads the subtable. This is the general principle. Let’s look at the code, it’s actually very simple.
1. Initialize the table and register the line to expand the event
$("#tb_powerset").bootstrapTable({url: '/api/MenuApi/GetParentMenu',method: 'get',detailView: true,//Parent and Child Table//sidePagination: "server",pageSize: 10,pageList: [10, 25],columns: [{field: 'MENU_NAME',title: 'menu name'}, {field: 'MENU_URL',title: 'menu URL'}, {field: 'PARENT_ID',title: 'Parent menu'}, {field: 'MENU_LEVEL',title: 'Men level'}, ],//Register events that load subtables. Note the three parameters here! onExpandRow: function (index, row, $detail) {oInit.InitSubTable(index, row, $detail);}});Let’s take a look at the three parameters of the corresponding method function (index, row, $detail) of the subtable loading event onExpandRow.
index: The row index of the current row of the parent table.
row: Json data object of the current row of the parent table.
$detail: The td object in the new row created under the current row.
The third parameter is particularly important because the generated subtable table is loaded in the $detail object. The bootstrap table generates the $detail object for us, and then we just need to fill it with the table we want.
2. Let's look at the method oInit.InitSubTable()
//Initialize subtable (wireless loop) oInit.InitSubTable = function (index, row, $detail) {var parentid = row.MENU_ID;var cur_table = $detail.html('<table></table>').find('table');$(cur_table).bootstrapTable({url: '/api/MenuApi/GetChildrenMenu',method: 'get',queryParams: { strParentID: parentid },ajaxOptions: { strParentID: parentid },clickToSelect: true,detailView: true,//The parent-child table uniqueId: "MENU_ID",pageSize: 10,pageList: [10, 25],columns: [{checkbox: true}, {field: 'MENU_NAME',title: 'menu name'}, {field: 'MENU_URL',title: 'menu URL'}, {field: 'PARENT_ID',title: 'parent menu'}, {field: 'MENU_LEVEL',title: 'menu level'}, ],//Wireless loop to fetch the child table until there is no record in the child table onExpandRow: function (index, row, $Subdetail) {oInit.InitSubTable(index, row, $Subdetail);}});};From this we can see that the principle of generating a subtable is to create a table object cur_table, and then register the table initialization of this object. Isn't it very simple ~~
3. Detailed explanation of line ordering code
The line ordering code is simpler, let’s take a look.
1. Two additional references are required
<script src="~/Content/jquery-ui-1.11.4.custom/external/jquery.tablednd.js"></script><script src="~/Content/bootstrap-table/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>
2. When defining a table on the cshtml page, add two attributes
<table id="tb_order" data-use-row-attr-func="true" data-reorderable-rows="true"></table>
Then, there is no need to make any modifications when initializing the js table, and the loaded table can realize the row ordering function.
4. Detailed explanation of column ordering code
Similar to line order. Column ordering is used as follows:
1. Reference a few additional js and css
<script src="~/Content/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script><link rel="stylesheet" href="../assets/examples.css"><link rel="stylesheet" href="https://rawgit.com/akottr/dragtable/master/dragtable.css"><script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script><script src="https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script><script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script><script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
2. When defining a table on the cshtml page, add an attribute
<table id="tb_departments" data-reorderable-columns="true"></table>
No modifications are required elsewhere. The loaded table can realize column ordering. Is it easy?
5. Control filtering
Originally, this article was about to end, I suddenly remembered that there was a search function in the previous chapter. It seemed that the search function could not be used when the server paging was used. So I remembered that I had a function similar to filtering each column in CS before. The blogger was curious again. Does bootstrap table also have this kind of filtering each column in table, so I checked the document. The result is fulfilled, and there is really something~~ Let's take a look.
1. Display of renderings
2. Code examples
(1) Introduce extra js
<script src="~/Content/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"></script>
(2) Define table attributes and header attributes
<table id="tb_roles" data-filter-control="true"><thead><tr><th data-field="ROLE_NAME" data-filter-control="select">role name</th><th data-field="DESCRIPTION" data-filter-control="input">role description</th><th data-field="ROLE_DEFAULTURL" data-filter-control="input">role default page</th></tr></tead></table>
Because the attributes of the table header are defined here, there is no need to define columns when initializing js.
(3) js initialization
$('#tb_roles').bootstrapTable({url: '/Role/GetRole',method: 'get',toolbar: '#toolbar',striped: true,cache: false,striped: true,pagination: true,sortable: true,queryParams: function (param) {return param;},queryParamsType: "limit",detailView: false,//parent-son table sidePagination: "server",pageSize: 10,pageList: [10, 25, 50, 100],search: true,showColumns: true,showRefresh: true,minimumCountColumns: 2,clickToSelect: true,});At first, the blogger thought that this kind of search could only be paging the user client, but after debugging, it was not the case. The original search conditions could be passed to the server through json. Let's look at the debugging process
Receive parameters in the background and deserialize them
In this way, we can pass the query conditions well to the background. Very good and powerful. This will eliminate the trouble of expanding the table search function~~
6. Summary
The above are some extension applications of bootstrap table. It may not be incomplete, and there are some advanced usages that are not introduced, such as row and column merging, row and column freezing, etc.
The above content is the relevant knowledge of the Bootstrap table table component artifact [2. Father and Son Table and Row and Column Order] introduced to you by the editor. I hope it will be helpful to everyone!