bootstrap table冻结列

在调用table的时候，设置相对应参数，左侧冻结设置 leftFixedColumns: true, leftFixedNumber: 1(冻结列数),右侧冻结同理。

样式可自行在css调节。

(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);}if (this.options.rightFixedColumns) {this.$rightfixedHeader = $(['<div class="fixed-table-header-columns" style="right:0px;top:0;z-index:101;">','<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:0px;top:35px;z-index:100;">','<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);}};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) {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;//}that.$rightfixedHeader.find('thead th[data-field="' + visibleFields[index] + '"]').find('.fht-cell').width($this.innerWidth());headerWidth += $this.outerWidth();}});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());});eventsthis.$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()+2,height: height - 17,//top: top + 1}).show();this.$body.find('> tr').each(function (i) {that.$rightfixedBody.find('tbody tr:eq(' + i + ')').height($(this).height());});eventsthis.$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;box-sizing: border-box;overflow: hidden;
}.fixed-table-header-columns,
.fixed-table-body-columns{border-right: 1px solid #e9e9e9;border-left: 1px solid #e9e9e9;
}
.fixed-table-header-columns table,
.fixed-table-body-columns table{border: none;
}.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;
}
.bootstrap-table .table-container .fixed-table-body-columns td, .table-container .fixed-table-body-columns th{border:1px solid #e9e9e9 !important;
}

bootstrap table冻结列相关推荐

JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案参考文章: (1)JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 (2) ...
bootstrap table 冻结列操作无效
此问题产生的原因感觉是因为冻结列是在上边又盖了一层表格导致无效. 所以点击事件的解决方法的原理是转移点击事件在bootstrap-table-fixed-columns.js 中修改代码本人 ...
bootstrap table 搜索列formatter之后，单字节搜索异常
bootstrap table 搜索列formatter之后,单字节搜索异常最近发现搜索这边出现这个问题,这样搜索没有效果后面发现是因为搜索列formatter之后就会出现这个问题,那么我们就多生 ...
bootstrap table 动态列数据加载（一）
bootstrap table 动态列数据加载(一) 我想把所有的收费项目作为表头,不固定死收费项目,数据库中有啥就显示啥. 动态数据加载时,不能用bean的嵌套,源码中加载表头和数据是分开的,第几列 ...
Bootstrap Table固定列及IE11兼容性问题解决
最近项目的前端用的是bootstrap,用Bootstrap Table做的表格显示.有一部分表格比较特殊,需要实现固定前面几列,后面的拖动.给的原型是用的superTable实现的,整合进项目用Bo ...
JQuery实现table冻结列
由于公司代码框架古老使用静态html画的页面,无法使用bootstrap或easyui实现冻结列最终再github上面找到的冻结列的实现 github地址 https://qiuyaofan.git ...
[转]bootstrap table 动态列数
原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...
若依Bootstrap版本--冻结列无效问题
1.引入js文件 <th:block th:include="include :: bootstrap-table-fixed-columns-js" /> 如图: 2 ...
BootStrap Table：列参数
官方文档地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 列参数表格的列参数定义在 jQuery.fn.bootstra ...

bootstrap table冻结列

bootstrap table冻结列相关推荐

最新文章

热门文章