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

痛定思痛。 2022-07-13 02:54 198阅读 0赞

前言：上篇 [JS组件系列——表格组件神器：bootstrap table][JS_bootstrap table] 简单介绍了下Bootstrap Table的基础用法，没想到讨论还挺热烈的。有园友在评论中提到了父子表的用法，今天就结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法。

bootstrap table系列：

*  [JS组件系列——表格组件神器：bootstrap table][JS_bootstrap table]
 *  [JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）][JS_bootstrap table 1]
 *  [JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）][JS_bootstrap table 2]

## 一、效果展示 ##

今天稍微改变下方式，先来看看实现效果，后面再介绍代码实现及注意事项。来，效果图来一发：

### 1、父子表效果图 ###

![459756-20151125095519031-1112038884.png][]

![459756-20151125105048281-1591625543.png][]

![459756-20151125105101952-1647800120.png][]

### 2、行调序 ###

调序前

![459756-20151125105444374-1167407956.png][]

拖动行调序到第一行

![459756-20151125105518390-1186788407.png][]

### 3、列调序 ###

调序前

![459756-20151125105557265-1640887989.png][]

拖动列标题调序

![459756-20151125105634999-1118495771.png][]

调序后

![459756-20151125105700062-1780517177.png][]

## 二、父子表代码详解 ##

上章我们介绍Bootstrap table基础用法的时候介绍过，初始化表格的时候有一个属性“detailView”，将它设置为true，在每行的前面即可看到一个“+”形状的图标。点击这个图标即触发加载子表格的事件。大概的原理就是如此，来看看代码，其实也很简单。

### 1、初始化表格，注册行展开事件 ###

![复制代码][copycode.gif]

$("#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);
                    }
                });

![复制代码][copycode.gif]

还是来看看子表加载事件onExpandRow对应方法function (index, row, $detail)的三个参数，

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

row：父表当前行的Json数据对象。

$detail：当前行下面创建的新行里面的td对象。

第三个参数尤其重要，因为生成的子表的table在装载在$detail对象里面的。bootstrap table为我们生成了$detail这个对象，然后我们只需要往它里面填充我们想要的table即可。

### 2、我们来看oInit.InitSubTable()这个方法 ###

![复制代码][copycode.gif]

//初始化子表格(无线循环)
        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);
                }
            });
        };

![复制代码][copycode.gif]

由此可以看出生成子表的原理就是创建一个table对象cur\_table，然后再注册这个对象的表格初始化即可。是不是很简单~~

## 三、行调序代码详解 ##

行调序的代码就更简单了，来看看。

### 1、需要额外引用两个js文件 ###

### 2、在cshtml页面定义表格时，添加两个属性 ###

然后js表格初始化的时候不需要做任何修改，加载出来的表格即可实现行调序的功能。

## 四、列调序代码详解 ##

和行调序类似。列调序的使用如下：

### 1、额外引用几个js和css ###

![复制代码][copycode.gif]

![复制代码][copycode.gif]

### 2、在cshtml页面定义表格时，添加一个属性 ###

其他地方不用做任何修改。加载出来的表格即可实现列调序。有没有很简单。

## 五、控件过滤 ##

本来这篇准备结束的，突然想起上章里面有一个搜索的功能，好像是服务端分页的时候搜索功能没法使用，于是想起之前再CS里面做过一个类似每个列过滤的功能，博主好奇心又起来了，bootstrap table是否也有这种表格每列过滤的功能，于是查看文档。结果不负所望，还真有~~我们来看看。

### 1、效果图展示 ###

![459756-20151125121840749-344259751.png][]

![459756-20151125121852031-415867172.png][]

![459756-20151125121902452-1985954276.png][]

![459756-20151125121938484-1207312183.png][]

### 2、代码示例 ###

（1）引入额外js

（2）定义表格属性及表头属性

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

因为这里定义了表头的属性，所以，js初始化的时候就不用定义列了。

（3）js初始化

![复制代码][copycode.gif]

$('#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,
            
        });

![复制代码][copycode.gif]

最开始，博主以为这种搜索只能用户客户端分页的情况，可是经过调试发现并非如此，原来搜索的条件都能通过json传递到服务端。我们来看调试的过程

![459756-20151125122814906-1700708765.png][]

后台接收参数，并反序列化

![459756-20151125123101109-1991845816.png][]

这样我们就能将查询的条件很好地传递到后台。很好很强大啊。这样就免去了扩展表格搜索功能的烦恼~~

六、总结

以上就是bootstrap table的一些扩展应用。可能未不全面，还有一些高级用法也没有介绍，比如行、列合并，行列冻结等等。但博主相信只要有文档，使用起来应该问题不大。源码还需整理，待整理好再发上来。园友们暂且先看看！！

[JS_bootstrap table]: http://www.cnblogs.com/landeanfen/p/4976838.html
[JS_bootstrap table 1]: http://www.cnblogs.com/landeanfen/p/4993979.html
[JS_bootstrap table 2]: http://www.cnblogs.com/landeanfen/p/5005367.html
[459756-20151125095519031-1112038884.png]: /images/20220713/3860ba02f08f4582a070efe97a7c6e46.png
[459756-20151125105048281-1591625543.png]: /images/20220713/778e3ff78bb14899974ab83cd5d8151a.png
[459756-20151125105101952-1647800120.png]: /images/20220713/1e5770885e3c46998d5952a34a717963.png
[459756-20151125105444374-1167407956.png]: /images/20220713/8e07f89265f84d0e9167a60032ce815a.png
[459756-20151125105518390-1186788407.png]: /images/20220713/b4971120d837447182f48483372c931a.png
[459756-20151125105557265-1640887989.png]: /images/20220713/e20780eaf51e416ab57fab9351058e2a.png
[459756-20151125105634999-1118495771.png]: /images/20220713/d4cfbb360eeb4936afa61ce1a770175f.png
[459756-20151125105700062-1780517177.png]: /images/20220713/21296f564c53433f93af4f054f3d36fe.png
[copycode.gif]: /images/20220713/b77f5464caff4ca6bcfc730e714ece9b.png
[459756-20151125121840749-344259751.png]: /images/20220713/2ae5cf8eb3564b768aef4a0caec0e545.png
[459756-20151125121852031-415867172.png]: /images/20220713/91405da413ef4e098158f7182b7832fa.png
[459756-20151125121902452-1985954276.png]: /images/20220713/da2294a3f074447194165aecd13362b0.png
[459756-20151125121938484-1207312183.png]: /images/20220713/c26e03202820407eac46ccd668839af0.png
[459756-20151125122814906-1700708765.png]: /images/20220713/4601931964464973b0a9880447fe5c8d.png
[459756-20151125123101109-1991845816.png]: /images/20220713/3729b41d0fad4973839a53ff7e29c35e.png