本文深入解析 Bootstrap Table 的高级功能，涵盖父子表嵌套展示、行与列的拖拽排序以及每列独立过滤搜索。通过详细代码示例，展示如何配置 detailView、引用 reorder-rows/columns 及 filter-control 扩展插件，实现服务端分页下的数据交互与界面交互优化，帮助开发者快速掌握表格组件的进阶用法。
Bootstrap Table 高级应用概览
Bootstrap Table 是一款轻量级且功能丰富的前端表格组件，支持数据以表格形式展示。它具备单选、复选框、排序、分页、显示或隐藏列、固定表头滚动、响应式设计、Ajax 加载 JSON 数据、点击列排序以及卡片视图等特性。本文将结合父子表嵌套和行列拖拽排序的应用场景，进一步介绍该组件的高级用法。
Bootstrap Table 系列文章导航：
JS表格组件神器 bootstrap table 详解（基础版）
JS组件系列之 Bootstrap table 表格组件神器【终结篇】
JS组件系列之 Bootstrap table 表格组件神器【二、父子表和行列调序】
父子表、行列调序效果展示
一、效果展示
本文采用先展示实现效果、后讲解代码及注意事项的方式。首先来看具体的运行效果图。
1、父子表效果演示
2、行拖拽排序
排序前状态
将某行拖拽至第一行后的状态
3、列拖拽排序
排序前状态
拖拽列标题进行排序
排序后状态
父子表嵌套实现代码详解
二、父子表代码详解
在前一章节介绍 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 已为我们生成该对象，我们只需向其内部填充所需的 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 文件
<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> 2、在 cshtml 页面定义表格时，添加两个特定属性
<table id="tb_order" data-use-row-attr-func="true" data-reorderable-rows="true"></table> 完成上述步骤后，JS 表格初始化代码无需任何修改，加载出的表格即可支持行调序功能。
四、列调序代码详解
列调序的使用方式与行调序类似，具体配置如下：
1、额外引用几个 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> 2、在 cshtml 页面定义表格时，添加一个特定属性
<table id="tb_departments" data-reorderable-columns="true"></table> 其他部分无需任何修改，加载出的表格即可实现列调序功能，操作十分简便。
每列独立过滤与服务端交互
五、控件过滤
本文原计划在此结束，但想起前一章中提到的搜索功能：在服务端分页模式下，常规搜索功能往往无法使用。因此，博主联想到之前在 C# 后端实现过的每列过滤功能，出于好奇查阅了 Bootstrap Table 文档，发现确实支持表格每列过滤功能，具体实现如下。
1、效果演示
2、代码示例
（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 传递至服务端。调试过程如下：
后台接收参数并进行反序列化
这样即可将查询条件顺利传递至后台，功能强大且无需扩展表格搜索功能。
功能总结与展望
六、总结
以上介绍了 Bootstrap Table 的一些扩展应用。内容可能尚不全面，部分高级用法如行/列合并、行列冻结等未作介绍。
以上内容为小编介绍的 JS 组件系列之 Bootstrap table 表格组件神器【二、父子表和行列调序】相关知识，希望对大家有所帮助！