JS組件系列——自己動手擴展BootstrapTable的 凍結列 功能：徹底解決高度問題
前言：一年前，博主分享過一篇關于bootstrapTable組件凍結列的解決方案 JS組件系列——Bootstrap Table 凍結列功能IE瀏覽器兼容性問題解決方案 ，通過該篇，確實可以實現bootstrapTable的凍結列效果，并且可以兼容ie瀏覽器。這一年的時間，不斷有園友以及群里面的朋友問過我關于固定高度之后，凍結列頁面效果不能對齊的問題，奈何博主太忙，一直沒有抽空將這個問題優化。最近項目里面也不斷有人提過這個bug，這下子不能再推了，必須要直面“慘淡的bug”，于是昨天利用一天的時間將原來的擴展做了一下修改，能夠完美解決固定高度之后凍結列的問題，并且，博主還加了一些特性，比如右側列的凍結、凍結列的選中等等，有需要的朋友可以捧個場。相信通過此篇，老板再也不用擔心我的凍結列不能固定高度了~~
本文原創地址：http://www.rzrgm.cn/landeanfen/p/7095414.html
一、問題追蹤
記得在之前的那篇里面介紹過，bootstrapTable組件自帶的凍結列擴展，不能兼容ie瀏覽器，即使最新版本的ie也會無法使用，這是一般的系統不能忍受的，所以在那篇里面給出過解決方案，但并未分析ie瀏覽器不能兼容的原因，昨天博主花了點時間特意調試了下源碼，原來在ie里面，使用jquery的clone()方法和谷歌等瀏覽器有所區別。為了展示這個區別，這里先拋個磚。比如有如下代碼：
<table id="tbtest"> <tr><td>aaa</td><td>bbb</td><td>ccc</td></tr> <tr><td>ddd</td><td>eee</td><td>fff</td></tr> <tr><td>ggg</td><td>hhh</td><td>iii</td></tr> </table> <script type="text/javascript"> var $tr = $('#tbtest tr:eq(0)').clone(); var $tds = $tr.find('td'); $tr.html(''); alert($tds.eq(0).html()); </script>
代碼本身很簡單，只是為了測試用。看到這里你可以試著猜一下alert的結果。
算了，不考大家了，直接貼出來吧，有圖有真相！
相信不用我過多的解釋哪個是ie，哪個是谷歌了吧。
兩者的區別很明顯，谷歌里面得到“aaa”，而ie里面得到空字符串。這是為什么呢？
其實如果你用值類型和引用類型的區別來解釋這個差別你就不難理解了，在谷歌瀏覽器里面，$tr變量是一個引用類型，當你清空了它里面的內容，只是清除了$tr這個變量的“指針”，或者叫指向，$tds變量仍然指向了$tr的原始內容，所以調用$tds.eq(0).html()的時候仍然能得到結果aaa；同樣的代碼在ie瀏覽器里面，$tr變量就是一個值類型，你清空了它里面的內容之后，$tds的內容也被清空了。如果你有更好的解釋，歡迎賜教哈。
之所以組件原生的js不能兼容ie瀏覽器，就是因為它使用了clone()這個方法，導致在不同的瀏覽器看到不同的結果。相信bootstrapTable組件的作者應該是知道這個區別的，只不過沒有太在意這些，從作者做的很多功能的兼容性能夠看出，他做的功能很多沒有太多的考慮ie瀏覽器的效果。
二、效果預覽
還是老規矩，說了這個多，沒圖怎么行，小二，上圖！
沒有固定高度的情況：單列凍結。
多列凍結。
固定任意高度效果
ie瀏覽器也沒有問題，這里就不再重復上圖了。
三、源碼解析
源碼沒啥說的，有興趣可以自己看看，主要的原理還是重寫bootstrapTable構造器的事件，來達到想要的效果。
(function ($) { 'use strict'; $.extend($.fn.bootstrapTable.defaults, { fixedColumns: false, fixedNumber: 1 }); var BootstrapTable = $.fn.bootstrapTable.Constructor, _initHeader = BootstrapTable.prototype.initHeader, _initBody = BootstrapTable.prototype.initBody, _resetView = BootstrapTable.prototype.resetView; BootstrapTable.prototype.initFixedColumns = function () { this.$fixedHeader = $([ '<div class="fixed-table-header-columns">', '<table>', '<thead></thead>', '</table>', '</div>'].join('')); this.timeoutHeaderColumns_ = 0; this.$fixedHeader.find('table').attr('class', this.$el.attr('class')); this.$fixedHeaderColumns = this.$fixedHeader.find('thead'); this.$tableHeader.before(this.$fixedHeader); this.$fixedBody = $([ '<div class="fixed-table-body-columns">', '<table>', '<tbody></tbody>', '</table>', '</div>'].join('')); this.timeoutBodyColumns_ = 0; this.$fixedBody.find('table').attr('class', this.$el.attr('class')); this.$fixedBodyColumns = this.$fixedBody.find('tbody'); this.$tableBody.before(this.$fixedBody); }; BootstrapTable.prototype.initHeader = function () { _initHeader.apply(this, Array.prototype.slice.apply(arguments)); if (!this.options.fixedColumns) { return; } this.initFixedColumns(); var that = this, $trs = this.$header.find('tr').clone(); $trs.each(function () { $(this).find('th:gt(' + (that.options.fixedNumber - 1) + ')').remove(); }); this.$fixedHeaderColumns.html('').append($trs); }; BootstrapTable.prototype.initBody = function () { _initBody.apply(this, Array.prototype.slice.apply(arguments)); if (!this.options.fixedColumns) { return; } var that = this, rowspan = 0; this.$fixedBodyColumns.html(''); this.$body.find('> tr[data-index]').each(function () { var $tr = $(this).clone(), $tds = $tr.find('td'); //$tr.html('');這樣存在一個兼容性問題，在IE瀏覽器里面，清空tr,$tds的值也會被清空。 //$tr.html(''); var $newtr = $('<tr></tr>'); $newtr.attr('data-index', $tr.attr('data-index')); $newtr.attr('data-uniqueid', $tr.attr('data-uniqueid')); var end = that.options.fixedNumber; if (rowspan > 0) { --end; --rowspan; } for (var i = 0; i < end; i++) { $newtr.append($tds.eq(i).clone()); } that.$fixedBodyColumns.append($newtr); if ($tds.eq(0).attr('rowspan')) { rowspan = $tds.eq(0).attr('rowspan') - 1; } }); }; BootstrapTable.prototype.resetView = function () { _resetView.apply(this, Array.prototype.slice.apply(arguments)); if (!this.options.fixedColumns) { return; } clearTimeout(this.timeoutHeaderColumns_); this.timeoutHeaderColumns_ = setTimeout($.proxy(this.fitHeaderColumns, this), this.$el.is(':hidden') ? 100 : 0); clearTimeout(this.timeoutBodyColumns_); this.timeoutBodyColumns_ = setTimeout($.proxy(this.fitBodyColumns, this), this.$el.is(':hidden') ? 100 : 0); }; BootstrapTable.prototype.fitHeaderColumns = function () { var that = this, visibleFields = this.getVisibleFields(), headerWidth = 0; this.$body.find('tr:first-child:not(.no-records-found) > *').each(function (i) { var $this = $(this), index = i; if (i >= that.options.fixedNumber) { return false; } if (that.options.detailView && !that.options.cardView) { index = i - 1; } that.$fixedHeader.find('th[data-field="' + visibleFields[index] + '"]') .find('.fht-cell').width($this.innerWidth()); headerWidth += $this.outerWidth(); }); this.$fixedHeader.width(headerWidth).show(); }; BootstrapTable.prototype.fitBodyColumns = function () { var that = this, top = -(parseInt(this.$el.css('margin-top'))), // the fixed height should reduce the scorll-x height height = this.$tableBody.height() - 18; debugger; if (!this.$body.find('> tr[data-index]').length) { this.$fixedBody.hide(); return; } if (!this.options.height) { top = this.$fixedHeader.height()- 1; height = height - top; } this.$fixedBody.css({ width: this.$fixedHeader.width(), height: height, top: top + 1 }).show(); this.$body.find('> tr').each(function (i) { that.$fixedBody.find('tr:eq(' + i + ')').height($(this).height() - 0.5); var thattds = this; debugger; that.$fixedBody.find('tr:eq(' + i + ')').find('td').each(function (j) { $(this).width($($(thattds).find('td')[j]).width() + 1); }); }); // events this.$tableBody.on('scroll', function () { that.$fixedBody.find('table').css('top', -$(this).scrollTop()); }); this.$body.find('> tr[data-index]').off('hover').hover(function () { var index = $(this).data('index'); that.$fixedBody.find('tr[data-index="' + index + '"]').addClass('hover'); }, function () { var index = $(this).data('index'); that.$fixedBody.find('tr[data-index="' + index + '"]').removeClass('hover'); }); this.$fixedBody.find('tr[data-index]').off('hover').hover(function () { var index = $(this).data('index'); that.$body.find('tr[data-index="' + index + '"]').addClass('hover'); }, function () { var index = $(this).data('index'); that.$body.find('> tr[data-index="' + index + '"]').removeClass('hover'); }); }; })(jQuery);
.fixed-table-header-columns, .fixed-table-body-columns { position: absolute; background-color: #fff; display: none; box-sizing: border-box; overflow: hidden; } .fixed-table-header-columns .table, .fixed-table-body-columns .table { border-right: 1px solid #ddd; } .fixed-table-header-columns .table.table-no-bordered, .fixed-table-body-columns .table.table-no-bordered { border-right: 1px solid transparent; } .fixed-table-body-columns table { position: absolute; animation: none; } .bootstrap-table .table-hover > tbody > tr.hover > td { background-color: #f5f5f5; }
如何使用呢？這里博主單獨搞了一個靜態的html測試頁，還是貼出來供大家參考。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <!--必須的css引用--> <link href="Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link href="Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /> <link href="Content/bootstrap-table/extensions/fixed-column/bootstrap-table-fixed-columns.css" rel="stylesheet" /> </head> <body> <div class="panel-body" style="padding-bottom:0px;"> <!--<div class="panel panel-default"> <div class="panel-heading">查詢條件</div> <div class="panel-body"> <form id="formSearch" class="form-horizontal"> <div class="form-group" style="margin-top:15px"> <label class="control-label col-sm-1" for="name">員工姓名</label> <div class="col-sm-3"> <input type="text" class="form-control" id="name"> </div> <label class="control-label col-sm-1" for="address">家庭住址</label> <div class="col-sm-3"> <input type="text" class="form-control" id="address"> </div> <div class="col-sm-4" style="text-align:left;"> <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查詢</button> </div> </div> </form> </div> </div>--> <div id="toolbar" class="btn-group"> <button id="btn_add" type="button" class="btn btn-success"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> </div> <table id="tb_user"></table> </div> <!--新增或者編輯的彈出框--> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">操作</h4> </div> <div class="modal-body"> <div class="row" style="padding:10px;"> <label class="control-label col-xs-2">姓名</label> <div class="col-xs-10"> <input type="text" name="Name" class="form-control" placeholder="姓名"> </div> </div> <div class="row" style="padding:10px;"> <label class="control-label col-xs-2">年齡</label> <div class="col-xs-10"> <input type="text" name="Age" class="form-control" placeholder="年齡"> </div> </div> <div class="row" style="padding:10px;"> <label class="control-label col-xs-2">學校</label> <div class="col-xs-10"> <input type="text" name="School" class="form-control" placeholder="學校"> </div> </div> <div class="row" style="padding:10px;"> <label class="control-label col-xs-2">家庭住址</label> <div class="col-xs-10"> <input type="text" name="Address" class="form-control" placeholder="學校"> </div> </div> <div class="row" style="padding:10px;"> <label class="control-label col-xs-2">備注</label> <div class="col-xs-10"> <textarea class="form-control" placeholder="備注" name="Remark"></textarea> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>關閉</button> <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button> </div> </div> </div> </div> <!--必須的js文件--> <script src="Content/jquery-1.9.1.min.js"></script> <script src="Content/bootstrap/js/bootstrap.min.js"></script> <script src="Content/bootstrap-table/bootstrap-table.min.js"></script> <script src="Content/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script> <script src="Content/bootstrap-table/extensions/fixed-column/bootstrap-table-fixed-columns.js"></script> <script type="text/javascript"> //頁面加載完成之后 var data = [ { Id: 1, Name: 'Jim', Age: 30, School: '光明小學', Address: '北京市光明小學旁', Remark: 'My Name is Jim Green' }, { Id: 2, Name: 'Kate', Age: 30, School: '光明小學', Address: '深圳市', Remark: 'My Name is Jim Green' }, { Id: 3, Name: 'Lucy', Age: 30, School: '光明小學', Address: '廣州天河機場', Remark: 'My Name is Jim Green' }, { Id: 4, Name: 'Lilei', Age: 30, School: '光明小學', Address: '北京市光明小學旁', Remark: 'My Name is Jim Green' }, { Id: 5, Name: 'Lintao', Age: 30, School: '光明小學', Address: '北京市光明小學旁', Remark: 'My Name is Jim Green' }, { Id: 6, Name: 'Lily', Age: 30, School: '光明小學', Address: '北京市光明小學旁', Remark: 'My Name is Jim Green' }, { Id: 7, Name: 'Hanmeimei', Age: 30, School: '光明小學', Address: '北京市光明小學旁', Remark: 'My Name is Jim Green' }, { Id: 8, Name: '張三', Age: 46, School: '光明小學', Address: '北京市光明小學旁', Remark: 'My Name is Jim Green' }, { Id: 9, Name: '李四', Age: 23, School: '光明小學', Address: '北京市光明小學旁', Remark: 'My Name is Jim Green' }, { Id: 10, Name: '王五', Age: 33, School: '光明小學', Address: '北京市光明小學旁', Remark: 'My Name is Jim Green' }, { Id: 11, Name: '趙六', Age: 22, School: '光明小學', Address: '北京市光明小學旁', Remark: 'My Name is Jim Green' }, { Id: 12, Name: 'Polly', Age: 300, School: '光明小學', Address: '北京市光明小學旁', Remark: 'My Name is Jim Green' }, { Id: 13, Name: 'Uncle', Age: 50, School: '光明小學', Address: '北京市光明小學旁', Remark: 'My Name is Jim Green' }, ]; var childData = [ { SourceField: 'A', BackField: 'BB' }, { SourceField: 'CC', BackField: 'UU' }, { SourceField: 'DD', BackField: 'J' }, ]; $(function () { //表格的初始化 $('#tb_user').bootstrapTable({ data: data, //直接從本地數據初始化表格 method: 'get', //請求方式（*） toolbar: '#toolbar', //工具按鈕用哪個容器 striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*） pagination: true, //是否顯示分頁（*） sortable: false, //是否啟用排序 sortOrder: "asc", //排序方式 queryParams: function (params) { return params; }, //傳遞參數（*） sidePagination: "client", //分頁方式：client客戶端分頁，server服務端分頁（*） pageNumber: 1, //初始化加載第一頁，默認第一頁 pageSize: 5, //每頁的記錄行數（*） pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*） search: true, //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大 strictSearch: true, showColumns: true, //是否顯示所有的列 showRefresh: true, //是否顯示刷新按鈕 minimumCountColumns: 2, //最少允許的列數 height:400, selectItemName: 'parentItem', fixedColumns: true, fixedNumber: 6, //注冊加載子表的事件。注意下這里的三個參數！ onExpandRow: function (index, row, $detail) { InitSubTable(index, row, $detail); }, columns: [{ checkbox: true }, { field: 'Name', title: '姓名', width:200 }, { field: 'Age', title: '年齡', width:200 }, { field: 'School', title: '畢業院校', width:200 }, { field: 'Address', title: '家庭住址', width:100 }, { field: 'Remark', title: '備注', width:100 }, { field: 'Remark', title: '備注', width:100 }, { field: 'Remark', title: '備注', width:100 }, { field: 'Remark', title: '備注', width:100 }, { field: 'Remark', title: '備注', width:100 }, { field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ field: 'Remark', title: '備注', width:100 },{ title: '操作', width:200, formatter: function (value, row, index) {//這里的三個參數：value表示當前行當前列的值；row表示當前行的數據；index表示當前行的索引（從0開始）。 var html = '<button type="button" onclick="editModel('+row.Id+')" class="btn btn-primary"><span class="glyphicon glyphicon-pencil" aria- hidden="true" ></span >編輯</button > ' + '<button type="button" onclick="deleteModel(' + row.Id + ')" class="btn btn-danger"><span class="glyphicon glyphicon-remove" aria- hidden="true" ></span >刪除</button >'; return html; } }], onEditableSave: function (field, row, oldValue, $el) { alert("更新保存事件，原始值為" + oldValue); //$.ajax({ // type: "post", // url: "/Editable/Edit", // data: row, // dataType: 'JSON', // success: function (data, status) { // if (status == "success") { // alert('提交數據成功'); // } // }, // error: function () { // alert('編輯失敗'); // }, // complete: function () { // } //}); } }); //新增事件 $("#btn_add").on('click', function () { $('#tb_user').bootstrapTable("resetView"); //彈出模態框 $("#myModal").modal(); //給彈出框里面的各個文本框賦值 $("#myModal input").val(""); $("#myModal textarea").val(""); }); }); //加載子表 var InitSubTable = function (index, row, $detail) { var parentid = row.MENU_ID; var cur_table = $detail.html('<table></table>').find('table'); //子表的初始化和父表完全相同 $(cur_table).bootstrapTable({ //url: '/api/MenuApi/GetChildrenMenu', data: childData, method: 'get', queryParams: { strParentID: parentid }, ajaxOptions: { strParentID: parentid }, clickToSelect: true, uniqueId: "MENU_ID", pageSize: 10, pageList: [10, 25], selectItemName: 'childItem'+index, checkboxHeader:false, columns: [{ checkbox: true }, { field: 'SourceField', title: '源端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }, { field: 'BackField', title: '備端字段' }], //無線循環取子表，直到子表里面沒有記錄 onExpandRow: function (index, row, $Subdetail) { //oInit.InitSubTable(index, row, $Subdetail); } }); }; //編輯事件 var editModel = function (id) { //根據當前行的id獲取當前的行數據 var row = $("#tb_user").bootstrapTable('getRowByUniqueId', id); //彈出模態框 $("#myModal").modal(); //給彈出框里面的各個文本框賦值 $("#myModal input[name='Name']").val(row.Name); $("#myModal input[name='Age']").val(row.Age); $("#myModal input[name='School']").val(row.School); $("#myModal input[name='Address']").val(row.Address); $("#myModal textarea[name='Remark']").val(row.Remark); } //刪除事件 var deleteModel = function (id) { alert("刪除id為" + id + "的用戶"); } </script> </body> </html>
代碼釋疑：
1、源碼各個方法解釋
- BootstrapTable.prototype.initFixedColumns ：當初始化的時候配置了fixedColumns: true時需要執行的凍結列的方法。
- BootstrapTable.prototype.initHeader：重寫組件的的初始化表頭的方法，加入凍結的表頭。
- BootstrapTable.prototype.initBody：重寫組件的初始化表內容的方法，加入凍結的表內容。
- BootstrapTable.prototype.resetView：重寫“父類”的resetView方法，通過setTimeout去設置凍結的表頭和表體的寬度和高度。
- BootstrapTable.prototype.fitHeaderColumns：設置凍結列的表頭的寬高。
- BootstrapTable.prototype.fitBodyColumns ：設置凍結列的表體的寬高，以及滾動條和主體表格的滾動條同步。
2、對于上述拋出的ie和谷歌的兼容性問題的解析
查看BootstrapTable.prototype.initBody方法，你會發現里面寫有部分注釋。
this.$body.find('> tr[data-index]').each(function () { var $tr = $(this).clone(), $tds = $tr.find('td'); //$tr.html('');這樣存在一個兼容性問題，在IE瀏覽器里面，清空tr,$tds的值也會被清空。 //$tr.html(''); var $newtr = $('<tr></tr>'); $newtr.attr('data-index', $tr.attr('data-index')); $newtr.attr('data-uniqueid', $tr.attr('data-uniqueid')); var end = that.options.fixedNumber; if (rowspan > 0) { --end; --rowspan; } for (var i = 0; i < end; i++) { $newtr.append($tds.eq(i).clone()); } that.$fixedBodyColumns.append($newtr); if ($tds.eq(0).attr('rowspan')) { rowspan = $tds.eq(0).attr('rowspan') - 1; } });
這一段做了部分修改，有興趣可以調適細看。
3、項目中的使用
最近在研究學習abp的相關源碼，將bootstrapTable融入abp里面去了，貼出表格凍結的一些效果圖。
4、擴展
除此之外，還特意做了右邊操作列的凍結。
和左邊列的凍結一樣，最右邊列的凍結也是可以做的，最不同的地方莫過于右邊列有一些操作按鈕，如果在點擊凍結列上面的按鈕時觸發實際表格的按鈕事件是難點。如果有這個需求，可以看看。
(function ($) { 'use strict'; $.extend($.fn.bootstrapTable.defaults, { leftFixedColumns: false, leftFixedNumber: 1, rightFixedColumns: false, rightFixedNumber: 1 }); var BootstrapTable = $.fn.bootstrapTable.Constructor, _initHeader = BootstrapTable.prototype.initHeader, _initBody = BootstrapTable.prototype.initBody, _resetView = BootstrapTable.prototype.resetView; BootstrapTable.prototype.initFixedColumns = function () { this.timeoutHeaderColumns_ = 0; this.timeoutBodyColumns_ = 0; if (this.options.leftFixedColumns) { this.$fixedHeader = $([ '<div class="fixed-table-header-columns">', '<table>', '<thead></thead>', '</table>', '</div>'].join('')); this.$fixedHeader.find('table').attr('class', this.$el.attr('class')); this.$fixedHeaderColumns = this.$fixedHeader.find('thead'); this.$tableHeader.before(this.$fixedHeader); this.$fixedBody = $([ '<div class="fixed-table-body-columns">', '<table>', '<tbody></tbody>', '</table>', '</div>'].join('')); this.$fixedBody.find('table').attr('class', this.$el.attr('class')); this.$fixedBodyColumns = this.$fixedBody.find('tbody'); this.$tableBody.before(this.$fixedBody); //this.$fixedBody = $([ // '<div class="fixed-table-column" style="position: absolute; background-color: #fff; border-right:1px solid #ddd;z-index:100;">', // '<table>', // '<thead></thead>', // '<tbody></tbody>', // '</table>', // '</div>'].join('')); //this.$fixedBody.find('table').attr('class', this.$el.attr('class')); //this.$fixedHeaderColumns = this.$fixedBody.find('thead'); //this.$fixedBodyColumns = this.$fixedBody.find('tbody'); //this.$tableBody.before(this.$fixedBody); } if (this.options.rightFixedColumns) { this.$rightfixedHeader = $([ '<div class="fixed-table-header-columns" style="right:14px;z-index:100;background:#fff;">', '<table>', '<thead></thead>', '</table>', '</div>'].join('')); this.$rightfixedHeader.find('table').attr('class', this.$el.attr('class')); this.$rightfixedHeaderColumns = this.$rightfixedHeader.find('thead'); this.$tableHeader.before(this.$rightfixedHeader); this.$rightfixedBody = $([ '<div class="fixed-table-body-columns" style="right:14px;z-index:100;background:#fff;">', '<table>', '<tbody></tbody>', '</table>', '</div>'].join('')); this.$rightfixedBody.find('table').attr('class', this.$el.attr('class')); this.$rightfixedBodyColumns = this.$rightfixedBody.find('tbody'); this.$tableBody.before(this.$rightfixedBody); //this.$rightfixedBody = $([ // '<div class="fixed-table-column" style="position: absolute;right:14px; background-color: #fff; top:0px;border-right:1px solid #ddd;z-index:100;">', // '<table>', // '<thead></thead>', // '<tbody></tbody>', // '</table>', // '</div>'].join('')); //this.$rightfixedBody.find('table').attr('class', this.$el.attr('class')).css('position', 'relative').css('border', '1px solid #ddd'); //this.$rightfixedHeaderColumns = this.$rightfixedBody.find('thead'); //this.$rightfixedBodyColumns = this.$rightfixedBody.find('tbody'); //this.$tableBody.before(this.$rightfixedBody); } }; BootstrapTable.prototype.initHeader = function () { _initHeader.apply(this, Array.prototype.slice.apply(arguments)); if (!this.options.leftFixedColumns && !this.options.rightFixedColumns) { return; } this.initFixedColumns(); var $tr = this.$header.find('tr:eq(0)').clone(), $ths = $tr.clone().find('th'); //$tr.html(''); //左邊列凍結 if (this.options.leftFixedColumns) { var $newtr = $('<tr></tr>'); $newtr.attr('data-index', $tr.attr('data-index')); $newtr.attr('data-uniqueid', $tr.attr('data-uniqueid')); debugger; for (var i = 0; i < this.options.leftFixedNumber; i++) { $newtr.append($ths.eq(i).clone()); } this.$fixedHeaderColumns.html('').append($newtr); } //$tr.html(''); //右邊列凍結 if (this.options.rightFixedColumns) { debugger; var $newtr2 = $('<tr></tr>'); $newtr2.attr('data-index', $tr.attr('data-index')); $newtr2.attr('data-uniqueid', $tr.attr('data-uniqueid')); for (var i = 0; i < this.options.rightFixedNumber; i++) { $newtr2.append($ths.eq($ths.length - this.options.rightFixedNumber + i).clone()); } this.$rightfixedHeaderColumns.html('').append($newtr2); } }; BootstrapTable.prototype.initBody = function () { _initBody.apply(this, Array.prototype.slice.apply(arguments)); if (!this.options.leftFixedColumns && !this.options.rightFixedColumns) { return; } var that = this; if (this.options.leftFixedColumns) { this.$fixedBodyColumns.html(''); this.$body.find('> tr[data-index]').each(function () { var $tr = $(this).clone(), $tds = $tr.clone().find('td'); $tr.html(''); for (var i = 0; i < that.options.leftFixedNumber; i++) { $tr.append($tds.eq(i).clone()); } that.$fixedBodyColumns.append($tr); }); } if (this.options.rightFixedColumns) { this.$rightfixedBodyColumns.html(''); this.$body.find('> tr[data-index]').each(function () { var $tr = $(this).clone(), $tds = $tr.clone().find('td'); $tr.html(''); for (var i = 0; i < that.options.rightFixedNumber; i++) { var indexTd = $tds.length - that.options.rightFixedNumber + i; var oldTd = $tds.eq(indexTd); var fixTd = oldTd.clone(); var buttons = fixTd.find('button'); //事件轉移：凍結列里面的事件轉移到實際按鈕的事件 buttons.each(function (key, item) { $(item).click(function () { that.$body.find("tr[data-index=" + $tr.attr('data-index') + "] td:eq(" + indexTd + ") button:eq(" + key + ")").click(); }); }); $tr.append(fixTd); } that.$rightfixedBodyColumns.append($tr); }); } }; BootstrapTable.prototype.resetView = function () { _resetView.apply(this, Array.prototype.slice.apply(arguments)); if (!this.options.leftFixedColumns && !this.options.rightFixedColumns) { return; } clearTimeout(this.timeoutHeaderColumns_); this.timeoutHeaderColumns_ = setTimeout($.proxy(this.fitHeaderColumns, this), this.$el.is(':hidden') ? 100 : 0); clearTimeout(this.timeoutBodyColumns_); this.timeoutBodyColumns_ = setTimeout($.proxy(this.fitBodyColumns, this), this.$el.is(':hidden') ? 100 : 0); }; BootstrapTable.prototype.fitHeaderColumns = function () { var that = this, visibleFields = this.getVisibleFields(), headerWidth = 0; if (that.options.leftFixedColumns) { this.$body.find('tr:first-child:not(.no-records-found) > *').each(function (i) { var $this = $(this), index = i; if (i >= that.options.leftFixedNumber) { return false; } if (that.options.detailView && !that.options.cardView) { index = i - 1; } that.$fixedHeader.find('thead th[data-field="' + visibleFields[index] + '"]') .find('.fht-cell').width($this.innerWidth() - 1); headerWidth += $this.outerWidth(); }); this.$fixedHeader.width(headerWidth - 1).show(); } if (that.options.rightFixedColumns) { this.$body.find('tr:first-child:not(.no-records-found) > *').each(function (i) { var $this = $(this), index = i; if (i >= visibleFields.length - that.options.rightFixedNumber) { //return false; //if (that.options.detailView && !that.options.cardView) { // index = i - 1; //} debugger; that.$rightfixedHeader.find('thead th[data-field="' + visibleFields[index] + '"]') .find('.fht-cell').width($this.innerWidth()); headerWidth += $this.outerWidth(); } }); debugger; this.$rightfixedHeader.width(headerWidth - 1).show(); } }; BootstrapTable.prototype.fitBodyColumns = function () { var that = this, top = -(parseInt(this.$el.css('margin-top')) - 2), height = this.$tableBody.height() - 2; if (that.options.leftFixedColumns) { if (!this.$body.find('> tr[data-index]').length) { this.$fixedBody.hide(); return; } if (!this.options.height) { top = this.$fixedHeader.height() - 1; height = height - top; } this.$fixedBody.css({ width: this.$fixedHeader.width(), height: height, top: top + 1 }).show(); this.$body.find('> tr').each(function (i) { that.$fixedBody.find('tbody tr:eq(' + i + ')').height($(this).height()); }); //// events this.$tableBody.on('scroll', function () { that.$fixedBody.find('table').css('top', -$(this).scrollTop()); }); this.$body.find('> tr[data-index]').off('hover').hover(function () { var index = $(this).data('index'); that.$fixedBody.find('tr[data-index="' + index + '"]').addClass('hover'); }, function () { var index = $(this).data('index'); that.$fixedBody.find('tr[data-index="' + index + '"]').removeClass('hover'); }); this.$fixedBody.find('tr[data-index]').off('hover').hover(function () { var index = $(this).data('index'); that.$body.find('tr[data-index="' + index + '"]').addClass('hover'); }, function () { var index = $(this).data('index'); that.$body.find('> tr[data-index="' + index + '"]').removeClass('hover'); }); } if (that.options.rightFixedColumns) { if (!this.$body.find('> tr[data-index]').length) { this.$rightfixedBody.hide(); return; } if (!this.options.height) { top = this.$rightfixedHeader.height() - 1; height = height - top; } this.$rightfixedBody.css({ width: this.$rightfixedHeader.width(), height: height - 13, //top: top + 1 }).show(); this.$body.find('> tr').each(function (i) { that.$rightfixedBody.find('tbody tr:eq(' + i + ')').height($(this).height()); }); //// events this.$tableBody.on('scroll', function () { that.$rightfixedBody.find('table').css('top', -$(this).scrollTop()); }); this.$body.find('> tr[data-index]').off('hover').hover(function () { var index = $(this).data('index'); that.$rightfixedBody.find('tr[data-index="' + index + '"]').addClass('hover'); }, function () { var index = $(this).data('index'); that.$rightfixedBody.find('tr[data-index="' + index + '"]').removeClass('hover'); }); this.$rightfixedBody.find('tr[data-index]').off('hover').hover(function () { var index = $(this).data('index'); that.$body.find('tr[data-index="' + index + '"]').addClass('hover'); }, function () { var index = $(this).data('index'); that.$body.find('> tr[data-index="' + index + '"]').removeClass('hover'); }); } }; })(jQuery);
.fixed-table-container thead th .th-inner, .fixed-table-container tbody td .th-inner { line-height: 18px; } .fixed-table-pagination .pagination a { padding: 5px 10px; } .fixed-table-toolbar .bars, .fixed-table-toolbar .search, .fixed-table-toolbar .columns { margin-top: 5px; margin-bottom: 5px; } .fixed-table-header-columns, .fixed-table-body-columns { position: absolute; background-color: #fff; display: none; box-sizing: border-box; overflow: hidden; } .fixed-table-header-columns .table, .fixed-table-body-columns .table { border-right: 1px solid #ddd; } .fixed-table-header-columns .table.table-no-bordered, .fixed-table-body-columns .table.table-no-bordered { border-right: 1px solid transparent; } .fixed-table-body-columns table { position: absolute; animation: none; } .bootstrap-table .table-hover > tbody > tr.hover > td { background-color: #f5f5f5; }
需要說明的是，由于時間問題，右側固定列的代碼和上述解決高度的代碼并未合并，所以如果你既想要解決凍結列的高度，又想要右側列的凍結，需要自己花點時間合并下代碼。
四、總結
至此本文就結束了，關于凍結列的課題終于可以暫時告一段落了，這個問題博主糾結了很久，總算是解決了。如果你覺得本文能夠幫助你，可以右邊隨意 打賞 博主，打賞后可以獲得博主永久免費的技術支持。
本文原創出處：http://www.rzrgm.cn/landeanfen/
歡迎各位轉載，但是未經作者本人同意，轉載文章之后必須在文章頁面明顯位置給出作者和原文連接，否則保留追究法律責任的權利
浙公網安備 33010602011771號