JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

摘要：BootstrapTable是轻量级的和功能丰富的以表格的形式显示的数据，支持单选，复选框，排序，分页,显示/隐藏列,固定标题滚动表,响应式...

Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据，支持单选，复选框，排序，分页,显示/隐藏列,固定标题滚动表,响应式设计，Ajax加载JSON数据，点击排序的列，卡片视图等。今天就结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法。

bootstrap table系列：

JS表格组件神器bootstrap table详解（基础版）

JS组件系列之Bootstrap table表格组件神器【终结篇】

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

一、效果展示

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

1、父子表效果图

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】1

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】2

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】3

2、行调序

调序前

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】4

拖动行调序到第一行

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】5

3、列调序

调序前

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】6

拖动列标题调序

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】7

调序后

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】8

二、父子表代码详解

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

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

$("#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即可。

2、我们来看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，然后再注册这个对象的表格初始化即可。是不是很简单~~

三、行调序代码详解

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

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

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

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

四、列调序代码详解

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

1、额外引用几个js和css

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

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

五、控件过滤

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

1、效果图展示

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】9

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】10

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】11

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】12

2、代码示例

（1）引入额外js

（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传递到服务端。我们来看调试的过程

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】13