Bootstraptable table component artifact in the JS component series [2. Parent and Child tables and column order adjustment] _ javascript skills

This article introduces the usage of a slightly advanced vertex in combination with the parent/child table of Bootstraptable and the column/column sequence. If you are interested in bootstrap Table components, learn about them. Bootstrap Table is lightweight and feature-rich data displayed in the form of tables. It supports single choice, check boxes, sorting, and paging, display/hide columns, rolling tables with fixed titles, responsive design, Ajax loading of JSON data, click to sort columns, Card view, etc. Today, we will introduce the usage of Bootstrap table parent-child table and row-column sequence.

Bootstrap table series:

Detailed description of JS table component artifact bootstrap table (Basic Edition)

Bootstrap table component artifact of JS component series [Final]

Bootstrap table component artifact of JS component series [2. Parent and Child tables and column order adjustment]

I. effect display

Today, we will slightly change the method. Let's take a look at the implementation effect, and introduce code implementation and precautions later. Come, come on:

1. Parent and Child tables

2. Line order

Pre-order

Drag the row to sort to the first row

3. Column order

Pre-order

Sort the column title

After sorting

Ii. Detailed description of parent and child table code

In the previous chapter, we introduced the basic usage of Bootstrap table. When initializing a table, we set the attribute "detailView" to true, A "+" icon is displayed in front of each line. Click this icon to trigger the subtable loading event. This is probably the principle. It's actually very easy to look at the code.

1. initialize the table and register the Row Expansion 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'},], // register the event for loading the sub-table. 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 function (index, row, $ detail) method corresponding to the onExpandRow sub-Table loading event,

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

Row: The 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 especially important because the table of the generated sub-table is loaded in the $ detail object. Bootstrap table generates the $ detail object for us, and then we only need to fill it with the table we want.

2. Let's look at the oInit. InitSubTable () method.

// Initialize the sub-table (Wireless loop) oInit. InitSubTable = function (index, row, $ detail) {var parentid = row. MENU_ID; var cur_table = paidetail.html ('
 
 '). Find ('table'); $ (cur_table ). bootstrapTable ({url: '/api/MenuApi/GetChildrenMenu', method: 'get', queryParams: {strParentID: parentid}, ajaxOptions: {strParentID: parentid}, clickToSelect: true, detailView: true, // parent and 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'},], // a sub-table is obtained through a wireless loop, until onExpandRow: function (index, row, $ Subdetail) {oInit. initSubTable (index, row, $ Subdetail );}});};

It can be seen that the principle of generating a sub-table is to create a table object cur_table, and then register the table initialization of this object. Isn't it easy ~~

Iii. Detailed explanation of line-based code

The code for line-tuning is simpler. Let's take a look.

1. Two additional js files need to be referenced