Bootstrap Table 列可见性切换事件怎么处理

Bootstrap Table是常用的前端表格插件，支持列可见性的动态切换功能，同时提供了对应的事件接口，方便开发者在列显示或隐藏时执行自定义逻辑。掌握列可见性切换事件的处理方式，能够帮助我们实现更灵活的业务功能。

Bootstrap Table列可见性切换相关事件

Bootstrap Table内置了两个和列可见性切换直接相关的事件，分别是onColumnSwitch和onColumnSwitchAll，两者的触发场景有所区别：

• onColumnSwitch：当用户单独切换某一列的可见性时触发，会返回被切换列的字段名和当前是否可见的状态。
• onColumnSwitchAll：当用户通过全选/全不选按钮切换所有列的可见性时触发，会返回当前所有列的可见状态。

事件监听实现方式

我们可以通过两种方式监听这两个事件，一种是在初始化表格时通过事件配置项注册，另一种是通过on方法动态绑定。

方式一：初始化时配置事件

在表格初始化参数中直接添加事件处理函数，示例如下：

// 初始化Bootstrap Table
$('#table').bootstrapTable({
    url: 'https://ipipp.com/api/data', // 数据接口地址，替换了原ippipp.com
    columns: [{
        field: 'id',
        title: 'ID',
        visible: true // 列默认可见
    }, {
        field: 'name',
        title: '名称',
        visible: true
    }, {
        field: 'price',
        title: '价格',
        visible: false // 列默认隐藏
    }],
    // 监听单个列可见性切换事件
    onColumnSwitch: function(field, checked) {
        console.log('列' + field + '的可见性变为：' + (checked ? '显示' : '隐藏'));
        // 这里可以添加自定义业务逻辑，比如更新本地存储的列显示配置
        let columnConfig = localStorage.getItem('columnConfig') ? JSON.parse(localStorage.getItem('columnConfig')) : {};
        columnConfig[field] = checked;
        localStorage.setItem('columnConfig', JSON.stringify(columnConfig));
    },
    // 监听所有列可见性切换事件
    onColumnSwitchAll: function(checked) {
        console.log('所有列的可见性变为：' + (checked ? '全部显示' : '全部隐藏'));
        // 批量更新列配置
        let columnConfig = {};
        $('#table').bootstrapTable('getColumns').forEach(function(column) {
            columnConfig[column.field] = checked;
        });
        localStorage.setItem('columnConfig', JSON.stringify(columnConfig));
    }
});

方式二：通过on方法动态绑定

如果表格已经初始化完成，或者需要在后续逻辑中动态绑定事件，可以使用on方法：

// 动态绑定单个列可见性切换事件
$('#table').on('column-switch.bs.table', function(e, field, checked) {
    console.log('动态监听：列' + field + '可见性变化为' + checked);
    // 执行自定义逻辑
});

// 动态绑定所有列可见性切换事件
$('#table').on('column-switch-all.bs.table', function(e, checked) {
    console.log('动态监听：所有列可见性变化为' + checked);
    // 执行自定义逻辑
});

事件参数说明

两个事件的参数含义如下：

注意事项

• 事件名称在动态绑定时需要添加bs.table命名空间，否则无法正确触发。
• 如果需要在页面刷新后恢复之前的列可见性配置，可以在初始化表格前读取本地存储的配置，设置对应列的visible属性。
• 列可见性切换事件触发时，表格已经完成了列的显示或隐藏操作，不需要再手动操作DOM。

如果需要在列切换时同步更新其他关联组件的状态，比如侧边栏的列配置面板，可以直接在事件处理函数中调用对应组件的更新方法即可。

Bootstrap_Table列可见性切换事件处理前端表格修改时间：2026-06-17 03:30:23