Explication détaillée de la fonction de colonne gelée de la table Bootstrap

Cet article présente principalement la fonction de colonne gelée Bootstrap Table de la série de composants JS Compatible avec le navigateur IE Solutions aux problèmes sexuels, les amis dans le besoin peuvent s'y référer

Avant-propos : Projets récents Vous Vous devez utiliser la fonction de gel de colonne du tableau. Ce que l'on appelle « geler la colonne » signifie que dans certains cas, le tableau comporte de nombreuses colonnes, et les premières colonnes doivent être corrigées et les colonnes suivantes défilent. Malheureusement, la fonction de colonne fixe fournie avec la table d'amorçage présente un bug, j'ai donc discuté avec mes collègues de la façon de le résoudre, et cet article est sorti.

[Recommandations vidéo associées : Tutoriel Bootstrap]

Revue des causes

Il existe une exigence de table dans un projet récent. Les colonnes du tableau sont générées dynamiquement, et une fois le nombre de colonnes manipulé jusqu'à une certaine valeur, une barre de défilement horizontale apparaîtra lors du défilement, les premières colonnes. besoin d'être réparé. Il s’agit de la fonction dite de colonne gelée d’Excel. Comment y parvenir ? Inutile de dire que bien sûr, j'ai vérifié la documentation et trouvé ce issue.wenzhixin.net.cn/bootstrap-table/index.html#extensions/fixed-columns.html. L'effet de Google Chrome est le suivant :

La première colonne est corrigée

Il semble que le problème soit parfaitement résolu ! Malheureusement, comme mentionné ci-dessus, c'est l'effet de Google Chrome et il n'y a aucun problème. Jetons un coup d'œil à l'effet

IE11 dans IE :

Effet IE10 :

Évidemment, quelle que soit la version du noyau IE, le contenu de la colonne gelée ne peut pas être affiché. ce qu'il faut faire? C'est vraiment gênant pour le bébé !

2. Solution

Heureusement, il existe un open source omnipotent Vérifiez le code source de cette page et constatez que vous pouvez trouver le code source de la colonne gelée js. .

Cliquez pour entrer et vous pourrez voir tout le code source de ce js. Il sera facile de trouver le code source. Essayons de changer le code source pour voir si. ce bug peut être résolu.

Nous avons ajouté un nouveau dossier colonne fixe sous le dossier extensions sous bootstrap-table

Le code source que nous avons modifié est publié ci-dessous :

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

Principales modifications :

1) Le code source encapsule la tête et le corps dans une table séparée, modifiez Enfin, mettez la tête et le corps dans une table ;

2) Parcourez les colonnes gelées en séquence et placez-les dans le corps corrigé

En fait, c'est en changeant quelques endroits, les bugs d'IE ; peut être parfaitement résolu. Jetons d'abord un coup d'œil à l'effet :

IE11

IE10

IE8

Voyons comment l'utiliser.

1. Référence js et css correspondant

<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 L'appel js est le suivant

Ajoutez-en deux. Les paramètres FixedColumns et fixedNumber suffisent. Pas besoin de trop expliquer ce qu'ils signifient. S'il faut geler les colonnes et le nombre de colonnes gelées. Un autre point qui doit être expliqué est que la hauteur ne peut pas être spécifiée lors de l'appel ici. Si la hauteur est spécifiée, il y aura des problèmes avec l'affichage gelé du tableau.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!