1.引入
bootstrap依赖于jquery
bootstrap-table依赖于bootstrap,所以都需要引入
2. bootstrap-table有两种方式，html、js
data-toggle="table" //启用bootstrap表格
data-classes="table table-hover"
data-show-columns="true" //是否显示内容列下拉框。
data-striped="true" //设置为 true 会有隔行变色效果
data-show-toggle="true" //是否显示切换视图(table/card)按钮。
data-search="true" //是否显示搜索框
data-show-refresh="true" //是否显示刷新按钮
data-toolbar="#toolbar" //工具栏
data-height="500"> //设置表格高度-固定表头生效
表格 ID表格 Name表格 Price表格 Price表格 Price表格 Price表格 Price表格 Price表格 Price表格 Price表格 Price
1Item 1$1Item 1$1Item 1$1Item 1$1Item 1$12Item 2$2Item 1$1Item 1$1Item 1$1Item 1$1
js方式
toolbar:"#toolbar",
striped:true,//是否显示行间隔色
height:300,
sortable:false,//是否排序
search:true,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端
strictSearch:true,//是否显示刷新
showColumns:true,//是否显示所有的列
showRefresh:true,//是否显示刷新按钮
minimumCountColumns:2,//最少允许的列数
showToggle:true,//是否显示详细视图和列表视图的切换按钮
cardView:false,//是否显示详细视图
columns: [{
field:'id',
title:'Item ID'}, {
field:'name',
title:'Item Name'}, {
field:'price',
title:'Item Price'}],//data可以换成url
data: [{
id:1,
name:'Item 1',
price:'$1'}, {
id:2,
name:'Item 2',
price:'$2'}, {
id:3,
name:'Item 3',
price:'$3'}, {
id:4,
name:'Item 4',
price:'$4'}, {
id:5,
name:'Item 5',
price:'$5'}, {
id:6,
name:'Item 6',
price:'$6'}, {
id:7,
name:'Item 7',
price:'$7'}, {
id:8,
name:'Item 8',
price:'$8'}, {
id:9,
name:'Item 9',
price:'$9'}, {
id:10,
name:'Item 10',
price:'$10'}]
})
固定列代码
$("#table").bootstrapTable('destroy').bootstrapTable({
fixedColumns: true,
fixedNumber: 1 //固定列数
}
效果展示：
3.问题解决
固定表头展示错位
解决办法：给 th 添加宽度 data-width="60px"
固定列也会错位
解决办法：所有内容不折行，展示在一行(感觉应该是line-height导致的差异)
固定表头固定列重叠的表头部分左右滚动的时候 没有固定
解决办法：重叠部分手动加了层级
当浏览器窗口变化是，表头与表格不对齐，应该怎么办？
$('#tableId').bootstrapTable(); // init via javascript
$(window).resize(function () {
$('#tableId').bootstrapTable('resetView');
});
4.下载地址
