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 + ' 你好');
            }
        }
    }]
});