BootStrap Table：列参数

    官方文档地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

列参数

    表格的列参数定义在 jQuery.fn.bootstrapTable.columnDefaults 。
    名称    标签    类型    默认    描述
    radio    data-radio    Boolean    FALSE    设置为 True 在列前添加一个固定宽度的 单选按钮
    checkbox    data-checkbox    Boolean    FALSE    设置为 True 在列前添加一个固定宽度的 复选框
    field    data-field    String    undefined    列的名称
    title    data-title    String    undefined    列的标题
    titleTooltip    data-title-tooltip    String    undefined    列标题的提示文本，支持HTML 属性
    class    class / data-class    String    undefined    设置列的 class 属性
    rowspan    rowspan / data-rowspan    Number    undefined    设置一个单元格可以占多少行
    colspan    colspan / data-colspan    Number    undefined    设置一个单元格可以占多少列
    align    data-align    String    undefined    单元格中的数据水平方向的位置，'left', 'right', 'center'
    halign    data-halign    String    undefined    列头中的数据水平方向的位置 ，'left', 'right', 'center'
    falign    data-falign    String    undefined    列尾中的数据水平方向的位置 ，'left', 'right', 'center'
    valign    data-valign    String    undefined    单元格中的数据垂直方向的位置， 'top', 'middle', 'bottom'
    width    data-width    Number {Pixels or Percentage}    undefined    设置列的宽度，可以使用像素或百分比
    sortable    data-sortable    Boolean    FALSE    设置为 True 允许对列进行排序
    order    data-order    String    'asc'    默认的排序方式，'asc' or 'desc'.
    visible    data-visible    Boolean    TRUE    Table模式设置为 False 会隐藏列的内容
    cardVisible    data-card-visible    Boolean    TRUE    Card模式设置为 False 会隐藏列的内容
    switchable    data-switchable    Boolean    TRUE    设置为 False 将禁止对列进行隐藏展示切换
    clickToSelect    data-click-to-select    Boolean    TRUE    设置为 True 点击列的时候选中单选按钮或者复选框
    formatter    data-formatter    Function    undefined    设置该列数据的格式
    footerFormatter    data-footer-formatter    Function    undefined    设置该列列脚的数据格式
    events    data-events    Object    undefined    设置单元格的事件监听器，包含4个参数
    event：jquery事件
    value：监听列的当前单元格的值
    row：当前行完整内容
    index：当前行的索引值
    sorter    data-sorter    Function    undefined    自定义排序方法，包含两个参数
    a：单元格A的数据
    b：单元格B的数据
    sortName    data-sort-name    String    undefined    自定义指定一个其他的列名，并通过这一列的值对当前列进行排序
    cellStyle    data-cell-style    Function    undefined    指定单元格的样式，包含3个参数
    value:列名称
    row:行数据
    index:行号
    searchable    data-searchable    Boolean    TRUE    设置为 True 搜索时可以对本列的内容进行搜索
    searchFormatter    data-search-formatter    Boolean    TRUE    设置为 True 使用格式化数据进行搜索
    escape    data-escape    Boolean    FALSE    设置为 True 转义特殊字符
    showSelectTitle    data-show-select-title    Boolean    FALSE    设置为 True  显示包含  'radio' 、'singleSelect' 'checkbox'选项的列

应用示例

        $('#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 + ' 你好');
                    }
                }
            }]
        });
--------------------- 
作者：pengjunlee 
来源：CSDN 
原文：https://blog.csdn.net/pengjunlee/article/details/80658596 
版权声明：本文为博主原创文章，转载请附上博文链接！