bootstrap table 헤더 고정, 동결 열, 가로 세로 스크롤 바

전제: 대응 하 는 js, css 도입

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

<span style="color:#bababa;">src=</span><span style="color:#a5c261;">"/kaoqin/js/bootstrap/js/bootstrap.min.js"</span><span style="color:#e8bf6a;">>
<span style="color:#bababa;">src=</span><span style="color:#a5c261;">"/kaoqin/js/bootstrap-table/bootstrap-table.min.js"</span><span style="color:#e8bf6a;">>
<span style="color:#bababa;">src=</span><span style="color:#a5c261;">"/kaoqin/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"</span><span style="color:#e8bf6a;">>
<span style="color:#bababa;">src=</span><span style="color:#a5c261;">"/kaoqin/js/bootstrap-table/bootstrap-table-fixed-columns.js"</span><span style="color:#e8bf6a;">>

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 추가
class="table-responsive" style="z-index: 1;">
   class="table" id="table" style="min-width:100px;">
  
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();
};