性能优化 checklist
项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-table - 启用服务器端分页、排序和筛选
- 配置合理的pageSize (默认20-50条)
- 禁用不必要的列排序和搜索功能
- 为大数据集启用虚拟滚动 (virtualScroll: true)
- 实现请求缓存减少重复请求
- 使用deferLoading延迟初始加载
- 优化formatter函数，避免复杂计算
- 减少DOM操作，使用事件委托
- 启用contentType: 'application/json'
- 配置合理的缓存策略和超时时间
- 使用CDN加载静态资源
- 压缩表格数据响应体积
- 实现数据预加载和预取
- 监控并优化慢查询接口
## 高级功能：企业级扩展方案
### 批量操作与事务处理
```javascript
// 批量操作工具栏
toolbar: '#toolbar',
// 工具栏HTML
<div id="toolbar" class="btn-group">
<div class="btn-group me-2">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-bs-toggle="dropdown">批量操作</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#" onclick="batchUpdateStatus('ACTIVE')">设为正常</a></li>
<li><a class="dropdown-item" href="#" onclick="batchUpdateStatus('INACTIVE')">设为禁用</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item text-danger" href="#" onclick="batchDelete()">删除所选</a></li>
</ul>
</div>
<button id="addBtn" class="btn btn-primary">
<i class="bi bi-plus-lg"></i> 新增用户
</button>
</div>
// 批量操作实现
window.batchUpdateStatus = function(status) {
const selections = $('#userTable').bootstrapTable('getSelections');
if (selections.length === 0) {
showAlert('请选择至少一条记录', 'warning');
return;
}
// 实现代码与前面批量更新类似
// ...
};
实时数据刷新与WebSocket集成
// 启用自动刷新
autoRefresh: true,
autoRefreshInterval: 60, // 自动刷新间隔(秒)
autoRefreshSilent: true, // 静默刷新不显示加载状态
// WebSocket集成
initWebSocket: function() {
// 仅在支持WebSocket的浏览器中启用
if (!window.WebSocket) return;
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsUrl = `${wsProtocol}//${window.location.host}/ws/users`;
this.ws = new WebSocket(wsUrl);
this.ws.onmessage = (event) => {
const data = JSON.parse(event.data);
// 根据消息类型处理
switch(data.type) {
case 'CREATE':
$('#userTable').bootstrapTable('prepend', [data.payload]);
showAlert(`新增用户: ${data.payload.username}`, 'info');
break;
case 'UPDATE':
$('#userTable').bootstrapTable('updateByUniqueId', {
id: data.payload.id,
row: data.payload
});
break;
case 'DELETE':
$('#userTable').bootstrapTable('removeByUniqueId', data.payload.id);
showAlert(`删除用户: ${data.payload.username}`, 'info');
break;
}
};
this.ws.onclose = () => {
// 连接关闭后尝试重连
setTimeout(() => this.initWebSocket(), 5000);
};
},
// 在表格初始化完成后启动WebSocket
onPostBody: function() {
if (!this.ws) {
this.initWebSocket();
}
}
最佳实践：10个核心参数配置
// 最佳实践配置摘要
$('#userTable').bootstrapTable({
// 核心数据交互
url: '/api/users',
method: 'GET',
sidePagination: 'server',
pagination: true,
pageSize: 20,
pageList: [10, 20, 50, 100],
// 性能优化
smartDisplay: true,
maintainMetaData: true,
trimOnSearch: true,
escape: true,
// 用户体验
showRefresh: true,
showToggle: true,
showColumns: true,
search: true,
searchAlign: 'right',
// 功能增强
toolbar: '#toolbar',
toolbarAlign: 'left',
checkboxHeader: true,
maintainSelected: true,
// 事件处理
onClickRow: function(row, $element) {
$element.addClass('table-active').siblings().removeClass('table-active');
},
// 错误处理
loadError: function(status) {
// 错误处理实现
}
});
总结与扩展学习
通过本文的系统讲解，你已经掌握了 Bootstrap Table 与 RESTful API 集成的核心技术，包括基础配置、数据加载、CRUD 操作、错误处理和性能优化。这些知识足以应对大部分企业级数据表格需求。
进阶学习路径
mindmap
root((Bootstrap Table 进阶))
服务端集成
GraphQL 适配器
gRPC Web 集成
实时数据同步
前端框架整合
React 组件封装
Vue 指令集成
Angular 模块开发
高级功能
数据导出与打印
复杂表头与合并单元格
拖拽排序与编辑
性能优化
大数据渲染优化
内存管理
预加载策略创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
