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
  }


文章目录
快速入门 bootstrap table方法 bootstrap table事件 bootstrap table下载 基础配置 row Attributes设置行属性 custom Sort自定义排序 table Cache缓存数据 content Type设置 response Handler total/Data Field JSON格式 escape显示html标签 idField和selectItemName cardView卡片视图模式 detailView详情视图模式 icons图标相关设置 本地化中文设置 列相关设置 columns基础设置 sortable列排序 column选择操作列 column列属性列表 分页设置 bootstrap table服务端分页 table Method 方式设置 data Type数据格式 custom AJAX 自定义ajax bootstrap table前端分页 bootstrap table查询搜索 smartDisplay作用 分页时保持选择状态 工具栏相关 showHeader显示头部 showFooter显示底部 showColumns开启列刷选 showPaginationSwitch分页 showRefresh刷选按钮 showFullscreen toolbar工具栏设置 样式设置 固定表头并美化表头 设置表格样式隔行变色 rowStyle设置行样式 theadClasses设置表头样式 footerStyle底部样式