BootstrapTable中如何优雅地手动触发列格式化函数

在实际项目开发中，我们经常需要根据某些状态动态改变表格中单元格的显示样式。BootstrapTable作为一款功能强大的表格插件，提供了列格式化函数(Formatter)来实现这一需求。本文将深入探讨如何在不重新请求服务器数据的情况下，手动触发列格式化函数的执行。

问题背景

假设我们有一个表格需要显示资源锁定状态，当资源被锁定时，我们希望：

1. 在锁定状态列显示红色锁定图标
2. 禁用该行的复选框选择功能

这可以通过两个列格式化函数实现：

// 锁定状态图标格式化函数
function lockIconFormatter(value, row) {
    if (lockedResources.includes(row.id)) {
        return $("<span/>").addClass("bi bi-lock-fill text-danger").prop("outerHTML");
    }
    return $("<span/>").addClass("bi bi-unlock-fill text-success").prop("outerHTML");
}

// 复选框格式化函数
function checkboxFormatter(value, row, index) {
    if (lockedResources.includes(row.id)) {
        return {disabled: true, checked: false};
    }
    return {disabled: false};
}

常见解决方案及其局限性

当锁定状态发生变化时，我们需要重新执行这些格式化函数。常见的方法有：

1. refreshOptions方法：会触发新的数据请求，效率低下
2. filterBy方法：不会请求数据但会重置分页和详细视图
3. resetView方法：不会调用格式化函数
4. resetSearch方法：类似filterBy的问题

最佳实践方案

经过深入分析，我们发现当关闭服务器端分页(serverSide: false)时，使用filterBy方法可以避免重复请求服务器数据：

// 初始化表格时关闭服务器端分页
$('#table').bootstrapTable({
    serverSide: false,
    // 其他配置...
});

// 状态更新后调用
function updateLockStatus() {
    $('#table').bootstrapTable('filterBy', {});
}

技术原理

这种方案之所以有效，是因为：

1. 关闭serverSide后，所有数据已加载到客户端
2. filterBy方法会触发表格重新渲染过程
3. 重新渲染过程中会执行所有列格式化函数
4. 由于没有serverSide，不会产生额外请求

注意事项

1. 对于大数据量表格，建议配合使用虚拟滚动等技术
2. 频繁调用filterBy可能影响性能，可考虑节流处理
3. 如果必须使用serverSide，可考虑前端缓存数据方案

通过这种方案，我们实现了在状态变化时高效更新表格显示，同时保持了良好的用户体验。