Bootstrap表格插件Bootstrap Table配置教程

Bootstrap Table Column列属性设置

Bootstrap Table Column的相关列属性和设置例如field、title、titleTooltip、width、class等属性,要使用Bootstrap Table首先要定义列,一般我们如下进行列的定义。

//设置需要显示的列
var columns = [{
       field: 'Id',
       title: '编号'
          },{
       field: 'CatalogName',
        title: '分类'}]; 
   
 //bootstrap table初始化数据
 $('#table').bootstrapTable({
    columns: columns,
    data: data
 });

属性列表

以下重要或非常有用的属性用进行了标记

列属性名称html属性说明
fielddata-field设置该列要绑定显示的字段如field:"id"
titledata-title设置该列显示的文字标题,比如你绑定了num字段,你好显示num吧,设置title:"库存" 用户一看就明白了
titleTooltipdata-titleTooltiptitleTooltip:"本月销售剩余库存",鼠标移动到列头上就会出现提示文字“本月销售剩余库存”
classdata-class对某列设置单独的样式
widthdata-widthwidth:200",该列的宽度为200 ,注意这里是数字类型不带单位px或者%
widthUnitdata-widthUnitwidthUnit:"px" 列的宽度的单位如px或%
rowspandata-rowspanrowspan:2 合两2行
colspandata-colspancolspan:2 合并两列
haligndata-halign表格头部列名对齐方式 'left', 'right', 'center'
aligndata-align表格数据的对齐方式 'left', 'right', 'center'
faligndata-falign表格底部列对齐方式 'left', 'right', 'center'
valigndata-valign垂直方向对齐方式 'top', 'middle', 'bottom'
cellStyledata-cellStyle自定义函数,单元格自定义样式function(value, row, index){ return "样式类名";}
radiodata-radioradio:true 表示该列为单选选择列
checkboxdata-checkboxcheckbox:true 表示该列为复选框选择列
checkboxEnableddata-checkboxEnabledcheckboxEnabled:false 禁用复选框列
clickToSelectdata-clickToSelect{field:"name",clickToSelect:false}表示点击name这列时不会触发选中事件。
showSelectTitledata-showSelectTitleshowSelectTitle:"操作",在选择列的列头显示的名称
sortabledata-sortablesortable:true把该列设置为排序列,这时列头就会出现上下两个排序箭头
sortnamedata-sortname指定按那列进行排序,例如<th data-field="name" data-sortable="true" data-sort-name="id" data-sort-order="desc">Item Name</th> 表示用户点击name这列的排序事件 按id字段进行倒序进行排序
orderdata-order排序方式 order:"asc"或者 order:"desc" 顺序或倒序进行排序
visibledata-visiblevisible:false 或者 true 隐藏或显示列
switchabledata-switchabletrue/false 当开启了列刷选时,switchable可以控制当前列是否可被刷选,默认为true
cardVisibledata-cardVisibletrue/false 当开启卡片模式时,设置该列是否在卡片中显示,默认true
searchabledata-searchabletrue/false 设置当前列数据是否可以被搜索,这里说的搜索是前端查询匹配非服务器端。
formatterdata-formatter自定义函数,比如状态字段在数据库中是0,1 可以通过formatter转换成 启用/停用 这样的文字显示而不是显示0或者1这样的数字,   formatter: function(value, item, index) {
        if (value==0) {
            return '正常';
        }
        else if (value==1) {
           return '禁用';
        }
    }
footerFormatterdata-footerFormatter列底部格式化函数,可以用来做合计等功能
 function nameFormatter(data) {
    return data.length
  }