Bootstrap表格插件Bootstrap Table配置教程

bootstrap table toolbar buttonsToolbar工具栏

通过bootstrap table的toolbar和buttonsToolbar属性可以把网页其他元素插入到bootstrap table的容器里,而不用自己写div布局,我们先通过下图来说明以下bootstrap table的功能区域。

toolbar工具栏

把你自定义的工具栏容器div的id或者样式赋值给toolbar属性,如data-toolbar=".toolbar"或data-toolbar="#toolbar"。
1,自定义工具栏 html代码

<div id="toolbar" class="toolbar">
  <button>删除选中</button>
  <button>查看详情</button>
</div>

2,JS代码

$('#table').bootstrapTable({  
    toolbar:"#toolbar", //设置自定义工具栏容器ID,也可以是容器样式类名.toolbar
   columns: columns,
   data: data
});

在线试一试

toolbarAlign工具栏对其方式

toolbarAlign属性有以下几个值:
 1,left往左对齐  toolbarAlign:"left"  
 2,right往右对齐 toolbarAlign:"right"  

buttonsPrefix与buttonsClass设置按钮工具栏的样式

 buttonsPrefix与buttonsClass都可以设置按钮的class样式,区别就是buttonsClass把样式追加到原有样式后面,buttonsPrefix追加到原有样式之前(测试结果是覆盖原有样式)。为什么要区分前后,因为CSS的优先级是从从前往后的,后面定义的样式可以覆盖前面定义的样式。


文章目录
快速入门 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底部样式