Detailed explanation of Bootstrap Table frozen column function

This article mainly introduces the Bootstrap Table frozen column function of the JS component seriesIE browser compatibility Solutions to sex problems, friends in need can refer to the following

Foreword: Recent projects You need to use the freeze column function of the table. The so-called "freeze column" means that in some cases, the table has many columns, and you need to fix the first few columns and scroll the following columns. Unfortunately, the fixed column function that comes with bootstrap table has a bug, so I discussed with my colleagues how to solve it, and this article came out.

【Related video recommendation: Bootstrap tutorial】

1. Review of the cause

There is a table requirement in a recent project. The table columns are dynamically generated, and after the number of columns is manipulated to a certain value, a horizontal scroll bar will appear. When scrolling, the first few columns need to be fixed. This is the so-called frozen column function of Excel. How to achieve this? Needless to say, of course I checked the documentation and found this issue.wenzhixin.net.cn/bootstrap-table/index.html#extensions/fixed-columns.html. The effect of Google Chrome is as follows:

The first column is fixed

It seems that the problem is perfectly solved! However, it backfired. Unfortunately, as mentioned above, this is the effect of Google Chrome and there is no problem. Let’s take a look at the

IE11 effect in IE:

IE10 effect:

Obviously , regardless of the IE kernel version, the content in the frozen column cannot be displayed. what to do? This is really embarrassing for the baby!

2. Solution

Fortunately, there is omnipotent open source. Check the source code of this page and find that you can find the source code of the frozen column js.

#Click to enter and you can see all the source code of this js. It will be easy to find the source code. Let’s try to change the source code to see if this bug can be solved.

We added a new folder fixed-column under the extensions folder under bootstrap-table

The source code we modified is posted below:

(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.$fixedBody = $([
   &#39;<p class="fixed-table-column" style="position: absolute; background-color: #fff; border-right:1px solid #ddd;">&#39;,
   &#39;<table>&#39;,
   &#39;<thead></thead>&#39;,
   &#39;<tbody></tbody>&#39;,
   &#39;</table>&#39;,
   &#39;</p>&#39;].join(&#39;&#39;));
  this.timeoutHeaderColumns_ = 0;
  this.timeoutBodyColumns_ = 0;
  this.$fixedBody.find(&#39;table&#39;).attr(&#39;class&#39;, this.$el.attr(&#39;class&#39;));
  this.$fixedHeaderColumns = this.$fixedBody.find(&#39;thead&#39;);
  this.$fixedBodyColumns = this.$fixedBody.find(&#39;tbody&#39;);
  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 $tr = this.$header.find(&#39;tr:eq(0)&#39;).clone(),
   $ths = $tr.clone().find(&#39;th&#39;);
  $tr.html(&#39;&#39;);
  for (var i = 0; i < this.options.fixedNumber; i++) {
   $tr.append($ths.eq(i).clone());
  }
  this.$fixedHeaderColumns.html(&#39;&#39;).append($tr);
 };
 BootstrapTable.prototype.initBody = function () {
  _initBody.apply(this, Array.prototype.slice.apply(arguments));
  if (!this.options.fixedColumns) {
   return;
  }
  var that = this;
  this.$fixedBodyColumns.html(&#39;&#39;);
  this.$body.find(&#39;> tr[data-index]&#39;).each(function () {
   var $tr = $(this).clone(),
    $tds = $tr.clone().find(&#39;td&#39;);
   $tr.html(&#39;&#39;);
   for (var i = 0; i < that.options.fixedNumber; i++) {
    $tr.append($tds.eq(i).clone());
   }
   that.$fixedBodyColumns.append($tr);
  });
 };
 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(&#39;:hidden&#39;) ? 100 : 0);
  clearTimeout(this.timeoutBodyColumns_);
  this.timeoutBodyColumns_ = setTimeout($.proxy(this.fitBodyColumns, this), this.$el.is(&#39;:hidden&#39;) ? 100 : 0);
 };
 BootstrapTable.prototype.fitHeaderColumns = function () {
  var that = this,
   visibleFields = this.getVisibleFields(),
   headerWidth = 0;
  this.$body.find(&#39;tr:first-child:not(.no-records-found) > *&#39;).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.$fixedBody.find(&#39;thead th[data-field="&#39; + visibleFields[index] + &#39;"]&#39;)
    .find(&#39;.fht-cell&#39;).width($this.innerWidth() - 1);
   headerWidth += $this.outerWidth();
  });
  this.$fixedBody.width(headerWidth - 1).show();
 };
 BootstrapTable.prototype.fitBodyColumns = function () {
  var that = this,
   top = -(parseInt(this.$el.css(&#39;margin-top&#39;)) - 2),
   height = this.$tableBody.height() - 2;
  if (!this.$body.find(&#39;> tr[data-index]&#39;).length) {
   this.$fixedBody.hide();
   return;
  }
  this.$body.find(&#39;> tr&#39;).each(function (i) {
   that.$fixedBody.find(&#39;tbody tr:eq(&#39; + i + &#39;)&#39;).height($(this).height() - 1);
  });
  //// events
  this.$tableBody.on(&#39;scroll&#39;, function () {
   that.$fixedBody.find(&#39;table&#39;).css(&#39;top&#39;, -$(this).scrollTop());
  });
  this.$body.find(&#39;> tr[data-index]&#39;).off(&#39;hover&#39;).hover(function () {
   var index = $(this).data(&#39;index&#39;);
   that.$fixedBody.find(&#39;tr[data-index="&#39; + index + &#39;"]&#39;).addClass(&#39;hover&#39;);
  }, function () {
   var index = $(this).data(&#39;index&#39;);
   that.$fixedBody.find(&#39;tr[data-index="&#39; + index + &#39;"]&#39;).removeClass(&#39;hover&#39;);
  });
  this.$fixedBody.find(&#39;tr[data-index]&#39;).off(&#39;hover&#39;).hover(function () {
   var index = $(this).data(&#39;index&#39;);
   that.$body.find(&#39;tr[data-index="&#39; + index + &#39;"]&#39;).addClass(&#39;hover&#39;);
  }, function () {
   var index = $(this).data(&#39;index&#39;);
   that.$body.find(&#39;> tr[data-index="&#39; + index + &#39;"]&#39;).removeClass(&#39;hover&#39;);
  });
 };
})(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;
  }

Main modifications:

1) The source code encapsulates thead and tbody into a separate table. After modification, thead and tbody Put it in a table;

2) Traverse the frozen columns in sequence and put them into the fixed tbody;

In fact, there are only a few changes place, you can perfectly solve IE bugs. Let’s take a look at the effect first:

IE11

IE10

IE8

Let’s take a look at how to use it.

1. Reference js and corresponding css

<script src="~/Content/bootstrap-table/extensions/fixed-column/js/bootstrap-table-fixed-columns.js"></script>
<link href="~/Content/bootstrap-table/extensions/fixed-column/css/bootstrap-table-fixed-columns.css" rel="external nofollow" rel="stylesheet" />

2. The js call is as follows

##Add two parameters fixedColumns and FixedNumber is enough. No need to explain too much about what it means. Whether to freeze columns and the number of frozen columns. Another point that needs to be explained is that the height cannot be specified when calling here. If the height is specified, there will be problems with the frozen display of the table.

The above is the detailed content of Detailed explanation of Bootstrap Table frozen column function. For more information, please follow other related articles on the PHP Chinese website!