Bootstrap Table Fixed Columns

解决在使用原插件时出现的样式问题，增加支持tfoot的展示

bootstrap-table-fixed-columns.css

.fixed-table-header-columns,
.fixed-table-body-columns,
.fixed-table-footer-columns {position: absolute;background-color: #F4F6FE;/* #E7EBEE */display: none;box-sizing: border-box;overflow: hidden;
}.fixed-table-header-columns .table,
.fixed-table-body-columns .table,
.fixed-table-footer-columns .table {border-right: 1px solid #ddd;
}.fixed-table-header-columns .table.table-no-bordered,
.fixed-table-body-columns .table.table-no-bordered,
.fixed-table-footer-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-fixed-columns.js

(function ($) {'use strict';$.extend($.fn.bootstrapTable.defaults, {fixedColumns: false,fixedNumber: 1});var BootstrapTable = $.fn.bootstrapTable.Constructor,_initHeader = BootstrapTable.prototype.initHeader,_initBody = BootstrapTable.prototype.initBody,_initFooter = BootstrapTable.prototype.initFooter,_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);this.$fixedFooter = $(['<div class="fixed-table-footer-columns">','<table>','<tfoot></tfoot>','</table>','</div>'].join(''));this.timeoutFooterColumns_ = 0;this.$fixedFooter.find('table').attr('class', this.$el.attr('class'));this.$fixedFooterColumns = this.$fixedFooter.find('tfoot');this.$tableFooter.before(this.$fixedFooter);};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();/****************固定列复选框事件****************/var $ths = $trs.find('th');      var headTh = $ths.eq(0);var input=headTh.find('input'); var inp=that.$header.find("th[data-field=" + 0 + "] input");input.click(function () {inp.click();});/*********************************************************/$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('');/*******固定列操作事件转移及复选框事件*******/for (var i = 0; i < that.options.fixedNumber; i++) {var indexTd = i;var oldTd = $tds.eq(indexTd);var fixTd = oldTd.clone();var buttons = fixTd.find('a');//事件转移：冻结列里面的事件转移到实际按钮的事件buttons.each(function (key, item) {$(item).click(function () {that.$body.find("tr[data-index=" + $tr.attr('data-index') + "] td:eq(" + indexTd + ") a:eq(" + key + ")").click();});});if(i==0){var inputs=fixTd.find('input');var index=inputs.data("index");var inp=that.$body.find("tr[data-index=" + index + "] td:eq(" + 0 + ") input[data-index=" + index + "]");inputs.click(function () {inp.click();});                }$tr.append(fixTd);}that.$fixedBodyColumns.append($tr);/********************************************************/
//            var end = that.options.fixedNumber;
//            if (rowspan > 0) {
//                --end;
//                --rowspan;
//            }
//            for (var i = 0; i < end; i++) {
//                $tr.append($tds.eq(i).clone());
//            }
//            that.$fixedBodyColumns.append($tr);
//
//            if ($tds.eq(0).attr('rowspan')){
//              rowspan = $tds.eq(0).attr('rowspan') - 1;
//            }});};BootstrapTable.prototype.initFooter = function () {_initFooter.apply(this, Array.prototype.slice.apply(arguments));if (!this.options.fixedColumns) {return;}var that = this, $trs = this.$tableBody.find('table tfoot tr').clone();$trs.each(function () {$(this).find('th:gt(' + (that.options.fixedNumber - 1) + ')').remove();});this.$fixedFooterColumns.html('').append($trs); };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);clearTimeout(this.timeoutFooterColumns_);this.timeoutFooterColumns_ = setTimeout($.proxy(this.fitFooterColumns, 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.find('th').height(this.$header.find('tr').find('th:first-child').innerHeight());this.$fixedHeader.width(headerWidth + 1).show();};BootstrapTable.prototype.fitBodyColumns = function () {var that = this,top = -(parseInt(this.$el.css('margin-top')) - 2),height = this.$tableBody.find('table tbody').height();if (!this.$body.find('> tr[data-index]').length) {this.$fixedBody.hide();return;}if (!this.options.height) {top = this.$fixedHeader.height();}this.$fixedBody.css({width: this.$fixedHeader.width()-1,height: height,top: top}).show();this.$body.find('> tr').each(function (i) {that.$fixedBody.find('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');});};BootstrapTable.prototype.fitFooterColumns = function () {var that = this,top = -(parseInt(this.$el.css('margin-top')) - 2),visibleFields = this.getVisibleFields(),height = this.$tableBody.find('table tfoot').height(),footerWidth = 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());footerWidth += $this.outerWidth();});if (!this.options.height) {top = this.$fixedHeader.height() + this.$tableBody.find('table tbody').height();}this.$fixedFooter.css({width: footerWidth,height : height,top: top - 1}).show();};})(jQuery);

对于冻结列的复选框和操作事件这边没有做优化，仍旧有bug，后面有机会改好了继续上传

Bootstrap Table Fixed Columns相关推荐

bootstrap Table API和一些简单使用方法
官网: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 后端分页问题:后端返回"rows"."& ...
bootstrap table 列拖动变宽
需要导入 colResizable-1.6.min.js /**_ _____ _ _ _ | | __ \ (_) | | | | ___ ___ | | |__) |___ ___ _ _____ ...
bootstraptable 汇总_JS组件系列——表格组件神器：bootstrap table
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
vue下的bootstrap table + jquery treegrid, treegrid无法渲染的问题
在mian.js导入的包如下:该bootstrap-table-treegrid.js需要去下载,在复制到jquery-treegrid/js/ 1 import $ from 'jquery' 2 ...
php bootstraptable分页,Bootstrap table分页问题汇总【附答案代码】
本篇文章为大家总结了几个使用bootstrap table实现分页时可能会遇到的问题,希望能够对大家有所帮助. 问题1 :服务器端取不到form值,querystring没有问题,但是request. ...
bootstrap table php,bootstrap table Tooltip
bootstrap table Tooltip怎么用?直接上代码$("#tables").bootstrapTable({ search: true, pagination: tr ...
[转]bootstrap table 动态列数
原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...
bootstrap table教程--使用入门基本用法
笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...
bootstrap table使用参考
https://www.cnblogs.com/landeanfen/p/5821192.html 转载阅读目录一.x-editable组件介绍二.bootstrapTable行内编辑初始方案 ...
JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

Bootstrap Table Fixed Columns

Bootstrap Table Fixed Columns相关推荐

最新文章

热门文章