bootstrap table显示隐藏列

背景

最近做项目用到了bootstrap table插件，但需要隐藏id的列，但是如果用bootstrap隐藏就获取不到这个id去传给后端了。然后就使用css来进行隐藏。

<style>
    table td:nth-child(2),  //选中表格第二列td
    table  th:nth-child(2){ //选中表格第二列th
        display: none;  选中所选的td th
    }
</style>

bootstrap table 的显示和隐藏列

一， 隐藏

方式一：在html文件中操作 data-visible=“false”

<th data-align="center" data-field="id" data-visible="false"></th>

方式二：使用js

$('#tabled的选择器').bootstrapTable('hideColumn', '列字段比如：id');

二， 显示

方式一：在html文件中操作 data-visible=“true”

<th data-align="center" data-field="id" data-visible="true"></th>

方式二：使用js

$('#tabled的选择器').bootstrapTable('showColumn', '列字段比如：id');

三，参考

参考官方文档

参考pengjunlee博客

$('#example_table').bootstrapTable({
    showHeader: true,
    showFooter: true,
    showColumns: true,
    showRefresh: true,
    showToggle: true,
    showPaginationSwitch: true,
    showFullscreen: true,
    search: true,
    data: [{
        "id": 89757,
        "name": "姬如雪",
        "deptName": "幻音坊",
        "level": 24
    },
    {
        "id": 89756,
        "name": "叶星云",
        "deptName": "天元神宗",
        "level": 31
    },
    {
        "id": 89755,
        "name": "唐三",
        "deptName": "史莱克学院",
        "level": 33
    }],
    columns: [{
        field: 'column_radio',
        radio: true,
        title: '单选列',
        titleTooltip: '请选择一项',
        showSelectTitle: true,
        clickToSelect: true,
        class: 'class_radio',
        footerFormatter: function(data) {
            return '<div style="color:red;">统计信息</div>';
        },
        width: '100px'
    },
    {
        field: 'column_hidden',
        title: '隐藏列',
        titleTooltip: '你看不见我',
        visible: false,
        cardVisible: false,
        formatter: function(value, row, index) {
            return index;
        }
    },
    {
        field: 'id',
        title: '员工编号',
        rowspan: 1,
        colspan: 1,
        align: 'left',
        halign: 'center',
        falign: 'right',
        valign: 'middle',
        sortable: true,
        switchable: false,
        order: 'asc',
        sortName: 'level',
        sorter: function(a, b) {
            alert(a);
            return a - b;
        },
        cellStyle: function cellStyle(value, row, index, field) {
            return {
                classes: 'text-nowrap another-class',
                css: {
                    "color": "blue",
                    "font-size": "20px"
                }
            }
        },
        escape: false
 
    },
    {
        field: 'name',
        title: '员工姓名',
        searchable: false
    },
    {
        field: 'deptName',
        title: '所属部门'
    },
    {
        field: 'level',
        title: '武功等级'
    },
    {
        field: 'column_operate',
        title: '操作',
        formatter: function(value, row, index) {
            return '<a href="javascript:void(0);" class="say_hi">点我</a>';
        },
        events: {
            'click .say_hi': function(e, value, row, index) {
                alert(row.name + ' 你好');
            }
        }
    }]
});