1.框架：bootstrap4

CSS样式： bootstrap-table.min.css，

bootstrap-treeview.css，

bootstrap-table-fixed-columns.css

JS样式：jquery.min.js

bootstrap.min.js,

bootstrap-table.min.js,

bootstrap-table-zh-CN.min.js,

bootstrap-treeview.js,

bootstrap-table-fixed-columns.js

2.修改的地方：在bootstrap-table.min.js中找到源码：

if (!this.options.cardView && this.options.showHeader && this.options.height) {this.$tableHeader.show();//注释下面两行//this.resetHeader();//padding += this.$header.outerHeight(true) + 1
}

3.项目中引入bootstrap-table-fixed-columns.css：

.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;
}

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,_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 heightheight = 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);});});// 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');});};})(jQuery);

4.前端HTML或者JSP页面中：

 <table id="bootstrap-home-table" style="table-layout:fixed!important;word-break:break-all;"></table>

在js中：

在初始化表格initTable()方法的第一行加入：
$('#bootstrap-home-table').bootstrapTable('destroy');
在方法内加入：
fixedColumns: true,//固定列
fixedNumber:6,//固定前6列

最后运行项目并测试，左侧固定列功能已完成。

如果文章有用，麻烦点个赞，给个评论，谢谢。

bootstrap-table固定左侧列+表头和内容对齐相关推荐

Table固定表头固定左侧列
效果图: 思路:把需要固定的内容进行拆封,比如左侧的表头和内容,右侧的表头和内容,都单独的存放在一个table中,在滚动条滚动的时候通过jquery scroll()区分横向纵向滚动条的方法来实现左侧 ...
Bootstrap Table固定列及IE11兼容性问题解决
最近项目的前端用的是bootstrap,用Bootstrap Table做的表格显示.有一部分表格比较特殊,需要实现固定前面几列,后面的拖动.给的原型是用的superTable实现的,整合进项目用Bo ...
bootstrap Table实现锁定列不滚动功能
当表格中的数据列比较多,各列的数据宽度大于页面的可用显示宽度时,就会出现横向滚动条,向右滚动时,左侧的数据列会隐藏,有时左侧列数据标识数据,隐藏了不方便数据查看,所以这时可以指定左侧的特定几列不进行滚 ...
bootstrap table固定列导致复选框失效的解决方法
//获取选中多行数据 function getSelectedRow_st() {//解決固定列导致选择复选框选不中的问题//首先判断表格是否为固定列表格,使用bootstrapTable('getO ...
关于bootstrap table 固定列宽
首先为table 设置 style= " table-layout : fixed ; " <table id="assessStage" data- ...
bootstrap table 分组_bootstrap-table组合表头的实现方法
最近需要做一个表格样式,需要组合表头,现在把做出来的分享给大家, 1.效果图 2.html代码 3.javascript代码 $("#table").bootstrapTable( ...
关于bootstrap table 获取隐藏列
例如数据库的id我们并不想让使用者发现但在删除操作时我们又需要将id发送到后端此时就需要隐藏某一列使用下方属性将该列隐藏 visible: false 之后使用转义符将该行信息获取到 \'' ...
bootstrap table表头错位，火狐浏览器下滚动条挤像素问题解决方案。
首先这篇文章是一个关于bootstrap table的七零八碎各种bug的内容,后续可能会接着更新编辑. 1:前后端分离项目,后端往往要求前端请求后端时,携带着登陆时后端给你的token. boots ...
Bootstrap Table列宽拖动的方法
Bootstrap Table可拖动列,需要用到它的Resizable扩展插件需要引入 bootstrap-table扩展插件 bootstrap-table-resizable.js 这个插件还依 ...

bootstrap-table固定左侧列+表头和内容对齐

1.框架：bootstrap4

CSS样式： bootstrap-table.min.css，

bootstrap-treeview.css，

bootstrap-table-fixed-columns.css

JS样式：jquery.min.js

bootstrap.min.js,

bootstrap-table.min.js,

bootstrap-table-zh-CN.min.js,

bootstrap-treeview.js,

bootstrap-table-fixed-columns.js

2.修改的地方：在bootstrap-table.min.js中找到源码：

3.项目中引入bootstrap-table-fixed-columns.css：

bootstrap-table-fixed-columns.js

4.前端HTML或者JSP页面中：

在js中：

最后运行项目并测试，左侧固定列功能已完成。

bootstrap-table固定左侧列+表头和内容对齐相关推荐

最新文章

热门文章