Table Columns设置bootstrap table要显示的列

基础设置

使用columns属性设置表格的列，以下代码表示bootstrap table将显示3列，title表示列名称，field表示该列要绑定的数据字段,align 对齐方式center居中left靠左right靠右。

 $table.bootstrapTable({    
   columns: [
   {       
       title: 'ID',   
       field: 'id',
       align : 'center',
    }, 
    {        
         title: '产品名称',   
         field: 'name',
         
      },
     {   
          title: '价格',     
          field: 'price'
      }]
    })

进阶教程

1，单元表格字符串长度大于10个字符就加省略号。
2，状态字段需要把数字转换成中文，如0显示待审核 1显示已审核 2标示已删除。
这时就需要用到formatter参数进行处理，例子代码如下。

//设置需要显示的列
var columns = [{
    field: 'Id',
    title: '编号'
}, {
    field: 'ProductName',
    title: '产品名称'
}
    , {
    field: 'Status',
    title: '状态原始数据'
}
    , {
    field: 'Status',
    title: '状态转换后列',
    formatter: formatter /*****注意这里是刷选函数****/
}];


//bootstrap table初始化数据
$('#table').bootstrapTable({
    columns: columns,
    data: getData(),
    method: 'GET',
    classes: "table table-bordered table-striped table-sm",
    height: 400
});

//注意这里是刷选函数
function formatter(value, row, index) {
    if (row.Status == 0) return "待审核";
    if (row.Status == 1) return "已审核";
    if (row.Status == 2) return "已删除";
}

function getData() {
    var data = [];
    for (var i = 0; i < 5; i++) {
        var item = {
            Id: i,
            ProductName: '香蕉' + i,
            Status: i > 2 ? 0 : i
        };
        data.push(item);
    };
    return data;
}

在线试一试