bootstrapTable 根据条件隐藏/显示某列

最新推荐文章于 2025-10-12 09:33:29 发布

原创最新推荐文章于 2025-10-12 09:33:29 发布 · 2.2w 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap-table

Bootstrap 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用Bootstrap Table的showColumn和hideColumn方法来动态显示或隐藏数据列，以及如何通过表格加载成功后的回调函数实现根据特定条件自动隐藏列的功能。

bootstrap-table方法之：showColumn/hideCoulumn显示或隐藏指定数据列

 $table.bootstrapTable('showColumn', $this.val());//显示某列
 $table.bootstrapTable('hideColumn', $this.val());//隐藏某列

获取表格columns数组

$table.data('bootstrap.table').columns;

如下例子所示，table加载成功后根据条件隐藏某列

$table.bootstrapTable({
    ajax: function (params) {
        $.post('__APP__/Monitor/AlarmInfo/getAllAlarmListByVarKey', params.data, function (e) {
            if(params.data.pageNumber<=1){
                $total = e.total;
            }
            params.success({rows:e.rows,total:$total});
        }, 'json')
    },
    idField: 'id',//指定主键列
    uniqueId: "id",//对每一行指定唯一标识符
    pageSize: 10,
    pageNumber:1,
    striped: true,
    queryParamsType:"",
    sidePagination:'server',
    pagination: true,
    paginationDetailHAlign: 'right',  
    columns: [[
        {
            field: 'id', visible: false
        },
        {
            field: 'alarmdatetime', title: '告警时间'
        },
        {
            field: 'variablevalue', title: '告警值'
        },
        
        {
            field: 'equipname', title: '所属设备'
        }
    ]],
    onLoadSuccess: function () {
        if ($varkey.indexOf("A") <= 0) {
            $table.bootstrapTable('hideColumn', 'variablevalue');//隐藏上述variablevalue列
    }
})