JS組件系列——表格組件神器：bootstrap table（二：父子表和行列調序）

前言：上篇 JS組件系列——表格組件神器：bootstrap table 簡單介紹了下Bootstrap Table的基礎用法，沒想到討論還挺熱烈的。有園友在評論中提到了父子表的用法，今天就結合Bootstrap table的父子表和行列調序的用法再來介紹下它稍微高級點的用法。

bootstrap table系列：

• JS組件系列——表格組件神器：bootstrap table
• JS組件系列——表格組件神器：bootstrap table（二：父子表和行列調序）
• JS組件系列——表格組件神器：bootstrap table（三：終結篇，最後的乾貨福利）

1、效果展現

今天稍微改變下方式，先來看看實現效果，後面再介紹代碼實現及注意事項。來，效果圖來一發：

一、父子表效果圖

二、行調序

調序前

拖動行調序到第一行

三、列調序

調序前

拖動列標題調序

調序後

 

2、父子表代碼詳解

上章咱們介紹Bootstrap table基礎用法的時候介紹過，初始化表格的時候有一個屬性「detailView」，將它設置爲true，在每行的前面便可看到一個「+」形狀的圖標。點擊這個圖標即觸發加載子表格的事件。大概的原理就是如此，來看看代碼，其實也很簡單。

一、初始化表格，註冊行展開事件

　　　 　　　　$("#tb_powerset").bootstrapTable({
                url: '/api/MenuApi/GetParentMenu',
                method: 'get',
                detailView: true,//父子表
                //sidePagination: "server",
                pageSize: 10,
                pageList: [10, 25],
                columns: [{
                    field: 'MENU_NAME',
                    title: '菜單名稱'
                }, {
                    field: 'MENU_URL',
                    title: '菜單URL'
                }, {
                    field: 'PARENT_ID',
                    title: '父級菜單'
                }, {
                    field: 'MENU_LEVEL',
                    title: '菜單級別'
                }, ],
                //註冊加載子表的事件。注意下這裏的三個參數！
                onExpandRow: function (index, row, $detail) {
                    oInit.InitSubTable(index, row, $detail);
                }
            });

仍是來看看子表加載事件onExpandRow對應方法function (index, row, $detail)的三個參數，

index：父表當前行的行索引。

row：父表當前行的Json數據對象。

$detail：當前行下面建立的新行裏面的td對象。

第三個參數尤爲重要，由於生成的子表的table在裝載在$detail對象裏面的。bootstrap table爲咱們生成了$detail這個對象，而後咱們只須要往它裏面填充咱們想要的table便可。

二、咱們來看oInit.InitSubTable()這個方法

    //初始化子表格(無線循環)
    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,//父子表
            uniqueId: "MENU_ID",
            pageSize: 10,
            pageList: [10, 25],
            columns: [{
                checkbox: true
            }, {
                field: 'MENU_NAME',
                title: '菜單名稱'
            }, {
                field: 'MENU_URL',
                title: '菜單URL'
            }, {
                field: 'PARENT_ID',
                title: '父級菜單'
            }, {
                field: 'MENU_LEVEL',
                title: '菜單級別'
            }, ],
            //無線循環取子表，直到子表裏面沒有記錄
            onExpandRow: function (index, row, $Subdetail) {
                oInit.InitSubTable(index, row, $Subdetail);
            }
        });
    };

由此能夠看出生成子表的原理就是建立一個table對象cur_table，而後再註冊這個對象的表格初始化便可。是否是很簡單~~

3、行調序代碼詳解

行調序的代碼就更簡單了，來看看。

一、須要額外引用兩個js文件

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

二、在cshtml頁面定義表格時，添加兩個屬性

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

而後js表格初始化的時候不須要作任何修改，加載出來的表格便可實現行調序的功能。

4、列調序代碼詳解

和行調序相似。列調序的使用以下：

一、額外引用幾個js和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>

二、在cshtml頁面定義表格時，添加一個屬性

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

其餘地方不用作任何修改。加載出來的表格便可實現列調序。有沒有很簡單。

5、控件過濾

原本這篇準備結束的，忽然想起上章裏面有一個搜索的功能，好像是服務端分頁的時候搜索功能無法使用，因而想起以前再CS裏面作過一個相似每一個列過濾的功能，博主好奇心又起來了，bootstrap table是否也有這種表格每列過濾的功能，因而查看文檔。結果不負所望，還真有~~咱們來看看。

一、效果圖展現

二、代碼示例

（1）引入額外js

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

（2）定義表格屬性及表頭屬性

 　　<table id="tb_roles" data-filter-control="true">
        <thead>
            <tr>
                <th data-field="ROLE_NAME" data-filter-control="select">角色名稱</th>
                <th data-field="DESCRIPTION" data-filter-control="input">角色描述</th>
                <th data-field="ROLE_DEFAULTURL" data-filter-control="input">角色默認頁面</th>
            </tr>
        </thead>
    </table>

由於這裏定義了表頭的屬性，因此，js初始化的時候就不用定義列了。

（3）js初始化

 $('#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,//父子表
        sidePagination: "server",
        pageSize: 10,
        pageList: [10, 25, 50, 100],
        search: true,
        showColumns: true,
        showRefresh: true,
        minimumCountColumns: 2,
        clickToSelect: true,
        
    });

最開始，博主覺得這種搜索只能用戶客戶端分頁的狀況，但是通過調試發現並不是如此，原來搜索的條件都能經過json傳遞到服務端。咱們來看調試的過程

後臺接收參數，並反序列化

這樣咱們就能將查詢的條件很好地傳遞到後臺。很好很強大啊。這樣就免去了擴展表格搜索功能的煩惱~~

 

6、總結

以上就是bootstrap table的一些擴展應用。可能未不全面，還有一些高級用法也沒有介紹，好比行、列合併，行列凍結等等。但博主相信只要有文檔，使用起來應該問題不大。源碼還需整理，待整理好再發上來。園友們暫且先看看！！