JS Component Series Bootstrap table Table component Artifact "second, parent-child table and row and column sequence" _javascript skills

Bootstrap table is lightweight and feature-rich data displayed in tabular form, supporting radio, check boxes, sorting, paging, show/Hide columns, fixed title scrolling table, responsive design, AJAX loading JSON data, click Sorted columns, card views, etc. Today, the use of bootstrap table's parent-child tables and row-and-column sequences is introduced to a slightly more advanced point.

Bootstrap Table Series:

JS Table component Artifact Bootstrap table detailed (basic version)

JS Component Series Bootstrap table Table component artifact "Terminator"

JS Component Series Bootstrap table Table component Artifact "second, parent-child table and row and column sequence"

One, the effect shows

Today slightly change the way, first look at the implementation effect, followed by the code implementation and considerations. Here, the effect chart comes out:

1, parent-child table effect chart

2. Line-Adjusting sequence

Before you adjust the order

Drag a row to the first line

3, the column to adjust the order

Before you adjust the order

Drag column headings to adjust

After the sequence

Second, the parent-child Table code detailed

In the previous chapter we introduced the Bootstrap table basic usage, when initializes the table has an attribute "DetailView", sets it to true, can see a "+" shape's icon before each row. Clicking on this icon triggers the event that loads the child table. The general principle is this, to look at the code, in fact, is also very simple.

1, initialization of the table, registration line expansion events

$ ("#tb_powerset"). Bootstraptable ({
URL: '/api/menuapi/getparentmenu ', method
: ' Get ',
detailview:true ,//Parent-child table
//sidepagination: "Server",
pagesize:10,
pagelist: [ten],
columns: [{
field: ' Menu _name ',
title: ' Menu Name '
}, {
field: ' Menu_url ',
title: ' Menu URL '
}, {
field: ' parent_id ',
Title: ' Parent menu '
}, {
field: ' Menu_level ',
title: ' Menu Level '},
],
//register event to load child table. Notice the three parameters here!
onexpandrow:function (index, row, $detail) {
oinit.initsubtable (index, row, $detail);
}

Or take a look at the child table Load event onexpandrow three arguments for the corresponding method function (index, row, $detail)

Index: The row index of the current row of the parent table.

Row: The JSON data object for the current row of the parent table.

$detail: The TD object inside the new line created under the current line.

The third parameter is particularly important because the table of the resulting child table is loaded inside the $detail object. Bootstrap table generates the $detail object for us, and then we just have to populate it with the table we want.

2, we look at oinit.initsubtable () this method

Initialize the subform (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,// Parent-child table
uniqueId: "menu_id",
pagesize:10,
pagelist: [ten],
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 '
}
, The wireless loop takes the child table until there are no records in the child table
onexpandrow:function (index, row, $Subdetail) {
oinit.initsubtable (index, row, $ Subdetail);
}
);

It can be seen that the principle of generating the child table is to create a Table object cur_table, and then register the object's table initialization. is not very simple ~ ~

Three, the line to adjust the sequence code detailed

The code for the line sequence is simpler, so take a look.

1, the need for additional reference two JS files

<script src= "~/content/jquery-ui-1.11.4.custom/external/jquery.tablednd.js" ></script>

2, in the Cshtml page definition table, add two properties

Then the JS table initialization time does not need to do any modification, the loaded form can realize the function of line sequence.

Four, column sequence code detailed

Similar to the row sequence. The use of the column sequence is as follows:

1, additional references to a few 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>

2, in the Cshtml page definition table, add a property

No other place to make any changes. The table can be loaded to achieve the column sequence. There is nothing very simple.

Five, Control filter

Originally this article is ready to end, suddenly think of the chapter inside there is a search function, as if the service end of the page when the search function can not be used, so remember before the CS did a similar function of each column filter, Bo main curiosity again up, bootstrap Table also has the ability to filter each column of the table, and then view the document. The result is not negative, there are really ~ ~ Let's see.

1, the effect chart display

2. code example

(1) The introduction of additional JS

(2) Defining table properties and Header properties

<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>
</thead>

Because the properties of the header are defined here, JS initialization does not need to define the column.

(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-child table
Sidepagination: "Server",
pagesize:10,
pagelist: [Ten, M, MB],
search:true,
showcolumns: True,
showrefresh:true,
minimumcountcolumns:2,
clicktoselect:true,

At the beginning, the blogger thought that this kind of search only user client paging, but after debugging found that is not so, the original search conditions can be passed to the server through JSON. Let's look at the debugging process.

Background receive parameters, and deserialize

This way we can pass the conditions of the query to the background well. Very good, very strong. This eliminates the problem of extending the search function of the table ~ ~

Vi. Summary

These are some of the extended applications of bootstrap table. may not be comprehensive, there are some advanced usage also did not introduce, such as row, column merge, row frozen and so on.

The above content is small set to introduce JS Component Series Bootstrap table component Artifact "Two, Father and son table and row order" of the relevant knowledge, I hope to help!