bootstrap-table固定表头固定列

bootstrap-table固定表头固定列

设置表格高度 表头自动固定
$('#table').bootstrapTable('resetView',{
height:$(window).height() - 590,
});

基本表格配置
<table id="table"
data-toggle="table"
data-classes="table table-hover"
data-url="content/data/chengde/supervise_bill.json" data-pagination="true" data-page-size="15"
data-height="350">
<thead>
<tr>
<th data-field="a">序号</th>
<th data-field="b">督查单号</th>
<th data-field="c">督查内容</th>
<th data-field="d">督查流域</th>
<th data-field="e">督察区域</th>
<th data-field="f">主管河长</th>
</tr></thead></table>
$("#table").bootstrapTable('destroy').bootstrapTable({
fixedColumns: true,
fixedNumber: 1 //固定列数
});

bootstrap-table固定表头固定列
1.引入
　　bootstrap依赖于jquery
　　bootstrap-table依赖于bootstrap,所以都需要引入

2. bootstrap-table有两种方式，html、js
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
   <table id="table" class="table table-bordered table-hover" data-toggle="table" //启用bootstrap表格 data-classes="table table-hover" data-show-columns="true" //是否显示内容列下拉框。 data-striped="true" //设置为 <code>true</code> 会有隔行变色效果 data-show-toggle="true" //是否显示切换视图（table/card）按钮。 data-search="true" //是否显示搜索框 data-show-refresh="true" //是否显示刷新按钮 data-toolbar="#toolbar" //工具栏 data-height="500"> //设置表格高度-固定表头生效 <thead> <tr> <th>表格 ID</th> <th>表格 Name</th> <th>表格 Price</th> <th>表格 Price</th> <th>表格 Price</th> <th>表格 Price</th> <th>表格 Price</th> <th>表格 Price</th> <th>表格 Price</th> <th>表格 Price</th> <th>表格 Price</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Item 1</td> <td>$1</td> <td>Item 1</td> <td>$1</td> <td>Item 1</td> <td>$1</td> <td>Item 1</td> <td>$1</td> <td>Item 1</td> <td>$1</td> </tr> <tr> <td>2</td> <td>Item 2</td> <td>$2</td> <td>Item 1</td> <td>$1</td> <td>Item 1</td> <td>$1</td> <td>Item 1</td> <td>$1</td> <td>Item 1</td> <td>$1</td> </tr> </table>
   js方式
   复制代码
   复制代码
   <table id="table"></table>
   <script>
   $("#table").bootstrapTable({
   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'
   }]
   })
   </script>
   复制代码
   复制代码
   固定列代码
   $("#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.下载地址
　　bootstrap-table：http://bootstrap-table.wenzhixin.net.cn/zh-cn/
　　bootstrap-table-fixed-columns：https://github.com/wenzhixin/bootstrap-table-fixed-columns