bootstrap table 表头固定 、冻结列、横向纵向滚动条

前提：引入对应的js,css

<link rel="stylesheet" type="text/css" href="/kaoqin/js/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/kaoqin/js/bootstrap-table/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="/kaoqin/js/bootstrap-table/bootstrap-table-fixed-columns.css">

<script src="/kaoqin/js/bootstrap/js/bootstrap.min.js"></script>
<script src="/kaoqin/js/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/kaoqin/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/kaoqin/js/bootstrap-table/bootstrap-table-fixed-columns.js"></script>

1 添加样式，设置列宽由表格宽度和列宽度设定：

.table{
    table-layout: fixed;
}

2 bootstrapTable初始化的时候 field设置宽度

{ field : '', title : '' ,align: 'center', valign: 'middle',width:120}

3 bootstrapTable初始化的时候 height设置高度(表头设置有两种方法，这里使用的是在bootstrapTble设置height ，这种方法有缺陷，表格高度固定，这就需要写额外的js去动态设置table的高度)

var h = $(window).height() - 100;

$('#table').bootstrapTable("destroy")
    .bootstrapTable(
        {
            method : 'get', // 服务器数据的请求方式 get or post
            url : "/attendance/record/recordList", // 服务器数据的加载地址
            height:h,

    tips：动态设置高度可以使用 $(window).resize();

4 bootstrapTable初始化的时候 设置fixedColumns 和fixedNumber

fixedColumns: true,
fixedNumber: 5

5 table 标签外的div 添加class=table-responsive

<div class="table-responsive" style="z-index: 1;">
   <table class="table" id="table" style="min-width:100px;"></table>
</div>

6 动态设置冻结列的高度（通过看fix-columns.js源码可以知道，冻结列是通过在table前加div，并是div置于table对应的div之上来实现的）

$(window).resize(function () {
    var h = $(window).height();
    var w = $(window).width();
    var $fixedTableBody = $("#table").closest("div"),
        $fixedTableBodyColumns = $fixedTableBody.prev(),
        $FixedtableContainer = $fixedTableBody.closest("div");
    $FixedtableContainer.height(h - 200);
    $fixedTableBodyColumns.height(h - 253);
});

最后贴出部分代码（bootstarpTalbe初始）

    var columns = [];
    var t1 = { field : 'name', title : '姓名' ,align: 'center', valign: 'middle',width:120};
    var t2 = { field : 'username', title : '账号' ,align: 'center', valign: 'middle',width:120};
    var t3 = { field : 'deptName', title : '部门' ,align: 'center', valign: 'middle',width:120};
    var t4 = { field : 'groupName', title : '考勤组' ,align: 'center', valign: 'middle',width:120};
    columns.push(t1);columns.push(t2);columns.push(t3);columns.push(t4);
    var h = $(window).height() - 100;
    $('#table').bootstrapTable("destroy")
        .bootstrapTable(
            {
                method : 'get', // 服务器数据的请求方式 get or post
                url : "/attendance/record/recordList", // 服务器数据的加载地址
                height:h,
                iconSize : 'outline',
                striped : true, // 设置为true会有隔行变色效果
                dataType : "json", // 服务器返回的数据类型
                pagination : true, // 设置为true会在底部显示分页条
                // queryParamsType : "limit",
                // //设置为limit则会发送符合RESTFull格式的参数
                singleSelect : false, // 设置为true将禁止多选
                // contentType : "application/x-www-form-urlencoded",
                // //发送到服务器的数据编码类型
                pageList: [ 5, 10, 20],
                pageSize : 5, // 如果设置了分页，每页数据条数
                pageNumber : 1, // 如果设置了分布，首页页码
                //search : true, // 是否显示搜索框
                showColumns : false, // 是否显示内容下拉框（选择显示的列）
                sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
                queryParams : function(params) {
                    return {
                        //说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                        limit: params.limit,
                        offset:params.offset
                    };
                },
                columns:columns,
                fixedColumns: true,
                fixedNumber: 5
            });
    $("#table").colResizable();
};