JS Component Series--table component artifact: Bootstrap table (ii: Parent-child table and row-and-column sequencing)

Original: JS component series--table component artifact: Bootstrap table (ii: Parent-child table and row-and-column sequencing)

Preface: JS Component Series--table component artifact: Bootstrap table briefly introduced the basic usage of the next bootstrap table, and did not expect the discussion to be quite enthusiastic. A friend in the comments mentioned the use of the parent-child table, today, combined with the use of the parent-child table of bootstrap table and row-and-column sequencing to introduce its slightly higher point of use.

Bootstrap Table Series:

• JS Component Series--table component artifact: Bootstrap table
• JS Component Series--table component artifact: Bootstrap table (ii: Parent-child table and row-and-column sequencing)
• JS Component Series--table component artifact: Bootstrap table (third: The end of the article, the last Dry goods welfare)

First, the effect shows

Today slightly change the next way, first to see the implementation of the results, followed by the code implementation and considerations. Come, Come:

1. Parent-child table

2. Line Order

Pre-sequencing

Drag rows to the first row

3. Column sequencing

Pre-sequencing

Drag column header to order

After sequencing

Second, the parent-child Table code detailed

In the previous chapter we introduced bootstrap table basic usage, when initializing a table, there is a property "DetailView", set it to true, and you will see a "+" icon in front of each line. Clicking on this icon triggers an event that loads a sub-table. The general principle is this, to look at the code, in fact, is very simple.

1. Initialize the table, register the row to expand the event

$ ("#tb_powerset"). bootstraptable ({URL:'/api/menuapi/getparentmenu ', Method:' Get ', DetailView:true,//Parent-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:' Menu level '                }, ],                //registers an event that loads a child table. Take note of 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 Onexpandrow corresponding method function (index, row, $detail) for the child table Load event.

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

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

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

The third parameter is especially 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 need to fill it with the table we want.

2, we see oinit.initsubtable () This method

    //Initialize the Sub-table (Wireless loop)Oinit.initsubtable =function(index, row, $detail) {varParentID =row.        menu_id; varcur_table = $detail. html (' <table></table> '). Find (' table '); $ (cur_table). bootstraptable ({URL:'/api/menuapi/getchildrenmenu ', Method:' Get ', Queryparams: {Strparentid:parentid}, Ajaxoptions: {strparentid:parentid}, CLI Cktoselect:true, DetailView:true,//Parent-child tableUniqueId: "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 '            }, ],            //The wireless loop takes the sub-table until there are no records in the child tableOnexpandrow:function(index, row, $Subdetail) {oinit.initsubtable (index, row, $Subdetail);    }        }); };

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

Three, line Regulation code

The code for the line adjustment is much simpler to look at.

1. Additional two JS files are required

<src= "~/content/jquery-ui-1.11.4.custom/external/jquery.tablednd.js"  ></script><src= "~/content/bootstrap-table/ Extensions/reorder-rows/bootstrap-table-reorder-rows.js "></script> 

2. When you define a table on the cshtml page, add two properties

<id= "Tb_order"  data-use-row-attr-func   Data-reorderable-rows= "true"></table>

Then the JS table is initialized without any modification, and the loaded table is able to perform the function of row ordering.

Four, column sequence code detailed

Similar to the line order. The use of column sequencing is as follows:

1, additional reference to several JS and CSS

<Scriptsrc= "~/content/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder-columns.js"></Script><Linkrel= "stylesheet"href=".. /assets/examples.css "><Linkrel= "stylesheet"href= "Https://rawgit.com/akottr/dragtable/master/dragtable.css"><Scriptsrc= "Https://code.jquery.com/ui/1.11.4/jquery-ui.js"></Script><Scriptsrc= "Https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></Script><Scriptsrc= "Https://code.jquery.com/ui/1.11.4/jquery-ui.js"></Script><Scriptsrc= "Https://code.jquery.com/ui/1.11.4/jquery-ui.js"></Script>

2. When you define a table in the Cshtml page, add a property

<id= "tb_departments"  data-reorderable-columns= "true"  ></table>

Other places do not have to make any changes. Columns can be ordered by the loaded table. There is no simple.

V. Control filtering

Originally this 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, and then think of CS inside did a similar to each column filtering function, bloggers curiosity again up, bootstrap Table also has the ability to filter each column of this table, and then view the document. The result is not negative, there is really ~ ~ Let's see.

1. Display

2. code example

(1) Introduction of additional JS

<src= "~/content/bootstrap-table/extensions/filter-control/ Bootstrap-table-filter-control.js "></script>

(2) Define table properties and Header properties

  　　 <TableID= "Tb_roles"Data-filter-control= "true">        <thead>            <TR>                <thData-field= "Role_name"Data-filter-control= "Select">Role name</th>                <thData-field= "DESCRIPTION"Data-filter-control= "Input">Role description</th>                <thData-field= "Role_defaulturl"Data-filter-control= "Input">Role Default Page</th>            </TR>        </thead>    </Table>

Because this defines the properties of the header, it is not necessary to define the column when JS is initialized.

(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) {returnparam; }, Queryparamstype:"Limit", DetailView:false,//Parent-child tableSidepagination: "Server", PageSize:10, pagelist: [10, 25, 50, 100], search:true, Showcolumns:true, Showrefresh:true, Minimumcountcolumns:2, Clicktoselect:true,            });

At first, bloggers thought that this kind of search can only be paged by the user client, but after debugging the discovery is not so, the original search conditions can be passed to the server through JSON. Let's take a look at the debugging process

Background receive parameters, and deserialize

This allows us to pass the conditions of the query well into the background. Very good, very powerful. This eliminates the hassle of extending the form search function ~ ~

Vi. Summary

These are some of the extended applications of bootstrap table. may not be comprehensive, there are also some advanced usage is not introduced, such as row, column merge, rows and columns frozen and so on. But bloggers believe that as long as there is documentation, the use should be less problematic. The source code also need to tidy up, wait to tidy up again send up. Let's take a look at the Park friends!!

JS Component Series--table component artifact: Bootstrap table (ii: Parent-child table and row-and-column sequencing)