Bootstrap Table 多排序功能：multiple-sort 插件使用详解
项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-table 引言：告别单字段排序的痛点
你是否还在为 Bootstrap Table 仅支持单字段排序而困扰？当业务需求要求按"金额(降序)+日期(升序)"或"部门(升序)+职位(升序)+入职时间(降序)"等多维度组合排序时，原生排序功能往往束手无策。本文将系统讲解 multiple-sort 插件的实现原理与使用方法，帮助开发者轻松实现复杂数据排序需求。
读完本文你将掌握：
- 多排序插件的核心实现机制
- 前端/服务端两种排序模式的配置方法
- 10+实用配置项的组合应用
- 常见问题的诊断与解决方案
- 企业级排序场景的最佳实践
插件工作原理
核心架构
multiple-sort 插件通过扩展 Bootstrap Table 的核心功能，实现了多字段组合排序能力。其架构包含三个关键模块：
数据流程
多排序的数据处理流程如下：
排序算法
插件实现了稳定的多字段排序算法，核心代码如下：
// 多字段比较函数
const arrayCmp = (a, b) => {
const arr1 = []
const arr2 = []
// 遍历排序规则数组
for (let i = 0; i < sortPriority.length; i++) {
const fieldName = sortPriority[i].sortName
const order = sortPriority[i].sortOrder === 'desc' ? -1 : 1
// 获取字段值并比较
let aa = Utils.getItemField(a, fieldName)
let bb = Utils.getItemField(b, fieldName)
// 应用排序方向
arr1.push(order * cmp(aa, bb))
arr2.push(order * cmp(bb, aa))
}
return cmp(arr1, arr2)
}
算法特点：
- 支持无限层级的排序规则组合
- 保留相同优先级字段的相对顺序（稳定排序）
- 自动处理数字、字符串、日期等不同类型数据比较
- 支持自定义排序函数接入
快速开始
环境准备
通过以下方式引入插件资源：
<!-- 国内CDN资源 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.21.4/bootstrap-table.min.js"></script>
<!-- 多排序插件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.21.4/extensions/multiple-sort/bootstrap-table-multiple-sort.min.js"></script>
基础配置
<table id="demoTable"></table>
<script>
$('#demoTable').bootstrapTable({
url: 'data.json',
columns: [
{field: 'id', title: 'ID', sortable: true},
{field: 'name', title: '姓名', sortable: true},
{field: 'salary', title: '薪资', sortable: true},
{field: 'joinDate', title: '入职日期', sortable: true}
],
// 多排序核心配置
showMultiSort: true,
sortPriority: [
{sortName: 'salary', sortOrder: 'desc'},
{sortName: 'joinDate', sortOrder: 'asc'}
]
})
</script>
以上配置将实现"薪资(降序)+入职日期(升序)"的默认排序效果。
详细配置指南
核心配置项
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| showMultiSort | Boolean | false | 是否启用多排序功能 |
| showMultiSortButton | Boolean | true | 是否显示多排序按钮 |
| sortPriority | Array | null | 排序规则数组，每个元素包含sortName和sortOrder |
| multiSortStrictSort | Boolean | false | 是否开启严格排序模式（区分大小写） |
| onMultipleSort | Function | () => false | 排序完成后的回调函数 |
排序规则数组格式
sortPriority: [
{sortName: 'field1', sortOrder: 'asc'}, // 第一优先级：字段1升序
{sortName: 'field2', sortOrder: 'desc'}, // 第二优先级：字段2降序
// 可添加更多排序规则
]
模态框本地化配置
通过以下配置自定义排序模态框的显示文本：
formatMultipleSort: () => '多字段排序',
formatAddLevel: () => '添加排序层级',
formatDeleteLevel: () => '删除排序层级',
formatColumn: () => '字段',
formatOrder: () => '排序方向',
formatSortOrders: () => ({
asc: '升序',
desc: '降序'
})
前端排序模式
基本用法
适用于数据量较小（<1000条）的场景，所有排序在浏览器端完成：
$('#demoTable').bootstrapTable({
// 其他基础配置...
showMultiSort: true,
sidePagination: 'client', // 客户端分页模式
sortPriority: [
{sortName: 'department', sortOrder: 'asc'},
{sortName: 'position', sortOrder: 'asc'},
{sortName: 'joinDate', sortOrder: 'desc'}
],
onMultipleSort: () => {
console.log('排序完成，当前规则:', this.options.sortPriority)
}
})
动态修改排序规则
// 获取表格实例
const table = $('#demoTable').data('bootstrap.table')
// 动态设置排序规则
table.multiSort([
{sortName: 'salary', sortOrder: 'desc'},
{sortName: 'name', sortOrder: 'asc'}
])
// 手动触发排序
table.multipleSort()
服务端排序模式
基本配置
适用于大数据量场景，排序逻辑在服务器端实现：
$('#demoTable').bootstrapTable({
// 其他基础配置...
showMultiSort: true,
sidePagination: 'server', // 服务端分页模式
sortPriority: [
{sortName: 'sales', sortOrder: 'desc'},
{sortName: 'region', sortOrder: 'asc'}
],
queryParams: (params) => {
// 扩展查询参数，添加多排序信息
params.multiSort = this.options.sortPriority
return params
}
})
服务端参数接收
后端接收到的参数格式示例：
{
"page": 1,
"rows": 20,
"multiSort": [
{"sortName": "sales", "sortOrder": "desc"},
{"sortName": "region", "sortOrder": "asc"}
]
}
Java Spring Boot 后端处理示例：
@GetMapping("/api/data")
public PageInfo<DataVO> getData(
@RequestParam int page,
@RequestParam int rows,
@RequestParam(required = false) List<SortParam> multiSort) {
// 构建排序条件
List<Sort.Order> orders = new ArrayList<>();
if (multiSort != null) {
for (SortParam param : multiSort) {
orders.add(new Sort.Order(
"desc".equals(param.getSortOrder()) ? Sort.Direction.DESC : Sort.Direction.ASC,
param.getSortName()
));
}
}
// 执行查询
return dataService.findPage(page, rows, Sort.by(orders));
}
static class SortParam {
private String sortName;
private String sortOrder;
// getter/setter
}
高级应用场景
条件排序
根据业务条件动态调整排序规则：
$('#demoTable').bootstrapTable({
// 其他配置...
showMultiSort: true,
sortPriority: [],
onLoadSuccess: () => {
const table = this
// 根据用户角色动态设置排序规则
if (currentUser.role === 'ADMIN') {
table.multiSort([
{sortName: 'department', sortOrder: 'asc'},
{sortName: 'salary', sortOrder: 'desc'}
])
} else {
table.multiSort([
{sortName: 'name', sortOrder: 'asc'}
])
}
}
})
排序状态持久化
结合 localStorage 保存用户排序偏好：
// 初始化时读取保存的排序规则
const savedSort = localStorage.getItem('tableSortRules')
$('#demoTable').bootstrapTable({
// 其他配置...
showMultiSort: true,
sortPriority: savedSort ? JSON.parse(savedSort) : [
{sortName: 'defaultField', sortOrder: 'asc'}
],
onMultipleSort: () => {
// 排序变更时保存规则
localStorage.setItem('tableSortRules',
JSON.stringify(this.options.sortPriority))
}
})
复杂数据类型排序
对自定义数据类型实现多排序：
columns: [
{
field: 'progress',
title: '进度',
sortable: true,
// 自定义排序函数
sorter: (a, b) => {
// a和b是进度值，如"85%"
const valA = parseFloat(a.replace('%', ''))
const valB = parseFloat(b.replace('%', ''))
return valA - valB
}
}
// 其他列...
]
常见问题解决方案
问题1：排序按钮不显示
可能原因：
- 未正确引入插件JS文件
- 配置项showMultiSort未设为true
- 配置项showMultiSortButton被设为false
解决方案：
// 检查核心配置
$('#demoTable').bootstrapTable({
showMultiSort: true, // 必须启用
showMultiSortButton: true, // 确保按钮可见
// 其他配置...
})
// 检查DOM中是否存在插件资源
if (!$('script[src*="bootstrap-table-multiple-sort"]').length) {
console.error('多排序插件JS文件未引入')
}
问题2：服务端未收到排序参数
可能原因：
- 未正确配置queryParams
- 服务器端未正确解析multiSort参数
- sortPriority初始值为null
解决方案：
// 确保正确配置queryParams
queryParams: (params) => {
// 强制注入排序参数
params.multiSort = this.options.sortPriority || []
return params
}
// 初始化时设置默认排序规则
sortPriority: [
{sortName: 'id', sortOrder: 'asc'} // 至少设置一个默认规则
]
问题3：排序结果与预期不符
解决方案：
- 启用调试模式查看排序规则：
onMultipleSort: () => {
console.log('当前排序规则:', JSON.stringify(this.options.sortPriority))
}
- 检查字段类型是否匹配：
// 确保排序字段为可比较类型
columns: [
{
field: 'amount',
title: '金额',
sortable: true,
// 确保数据类型为数字
formatter: (value) => parseFloat(value).toFixed(2)
}
]
性能优化建议
前端排序优化
对于客户端排序，当数据量超过500条时，建议：
- 启用虚拟滚动：
virtualScroll: true,
virtualScrollItemHeight: 50, // 行高
- 限制排序字段数量：
// 最多允许3个字段排序
onMultipleSort: () => {
if (this.options.sortPriority.length > 3) {
this.options.sortPriority = this.options.sortPriority.slice(0, 3)
console.warn('最多支持3个字段排序')
}
}
服务端排序优化
- 索引优化：确保排序字段创建复合索引
-- MySQL示例：为常用排序组合创建索引
CREATE INDEX idx_dept_pos_date ON employees(department, position, join_date DESC);
- 减少不必要排序：仅在排序规则变化时才重新排序
企业级最佳实践
标准化配置模板
// 创建多排序配置工厂函数
const createMultiSortConfig = (defaultRules = []) => ({
showMultiSort: true,
showMultiSortButton: true,
multiSortStrictSort: false,
sortPriority: defaultRules,
onMultipleSort: function() {
// 记录排序日志
logService.info({
module: 'table-sort',
tableId: this.$el.attr('id'),
rules: this.options.sortPriority,
user: currentUser.id,
timestamp: new Date().toISOString()
})
}
})
// 应用到表格
$('#employeeTable').bootstrapTable({
// 其他配置...
...createMultiSortConfig([
{sortName: 'department', sortOrder: 'asc'},
{sortName: 'joinDate', sortOrder: 'desc'}
])
})
多主题适配
multiple-sort 插件支持多种UI主题，确保在不同主题下的兼容性：
// 主题兼容性配置
const theme = $.fn.bootstrapTable.theme
if (['bootstrap5', 'semantic', 'materialize'].includes(theme)) {
// 针对特定主题的调整
console.log('当前主题:', theme)
}
总结与展望
multiple-sort 插件通过灵活的配置和强大的排序能力，极大扩展了 Bootstrap Table 的数据处理能力。无论是简单的双字段排序还是复杂的多维度组合排序，该插件都能提供高效解决方案。
随着Web应用对数据处理要求的不断提高，未来排序功能可能会向智能化方向发展，例如：
- 基于用户行为的排序规则推荐
- 更复杂的条件排序（如"销售额>10000的按利润排序，否则按数量排序"）
- 与数据分析功能的深度集成
掌握 multiple-sort 插件的使用，将为你的数据表格功能带来质的飞跃，为用户提供更专业、更高效的数据浏览体验。
附录：完整配置项参考
// 多排序插件完整配置项
{
showMultiSort: true,
showMultiSortButton: true,
multiSortStrictSort: false,
sortPriority: [
{sortName: 'field1', sortOrder: 'asc'},
{sortName: 'field2', sortOrder: 'desc'}
],
onMultipleSort: function() {
// 排序完成回调
},
// 本地化配置
formatMultipleSort: () => '多字段排序',
formatAddLevel: () => '添加排序层级',
formatDeleteLevel: () => '删除排序层级',
formatColumn: () => '字段',
formatOrder: () => '排序方向',
formatSortBy: () => '首要排序',
formatThenBy: () => '次要排序',
formatSort: () => '执行排序',
formatCancel: () => '取消',
formatDuplicateAlertTitle: () => '发现重复字段',
formatDuplicateAlertDescription: () => '请移除或修改重复的排序字段',
formatSortOrders: () => ({
asc: '升序',
desc: '降序'
})
}
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
