JS 組件系列之Bootstrap Table的凍結(jié)列功能徹底解決高度問(wèn)題

更新時(shí)間：2017年06月30日 16:20:54 作者：懶得安分

這篇文章主要介紹了JS 組件系列之Bootstrap Table的凍結(jié)列功能徹底解決高度問(wèn)題,需要的朋友可以參考下

正文

前言：一年前，博主分享過(guò)一篇關(guān)于bootstrapTable組件凍結(jié)列的解決方案 JS組件系列——Bootstrap Table 凍結(jié)列功能IE瀏覽器兼容性問(wèn)題解決方案，通過(guò)該篇，確實(shí)可以實(shí)現(xiàn)bootstrapTable的凍結(jié)列效果，并且可以兼容ie瀏覽器。這一年的時(shí)間，不斷有園友以及群里面的朋友問(wèn)過(guò)我關(guān)于固定高度之后，凍結(jié)列頁(yè)面效果不能對(duì)齊的問(wèn)題，奈何博主太忙，一直沒(méi)有抽空將這個(gè)問(wèn)題優(yōu)化。最近項(xiàng)目里面也不斷有人提過(guò)這個(gè)bug，這下子不能再推了，必須要直面“慘淡的bug”，于是昨天利用一天的時(shí)間將原來(lái)的擴(kuò)展做了一下修改，能夠完美解決固定高度之后凍結(jié)列的問(wèn)題，并且，博主還加了一些特性，比如右側(cè)列的凍結(jié)、凍結(jié)列的選中等等，有需要的朋友可以捧個(gè)場(chǎng)。相信通過(guò)此篇，老板再也不用擔(dān)心我的凍結(jié)列不能固定高度了~~

一、問(wèn)題追蹤

記得在之前的那篇里面介紹過(guò)，bootstrapTable組件自帶的凍結(jié)列擴(kuò)展，不能兼容ie瀏覽器，即使最新版本的ie也會(huì)無(wú)法使用，這是一般的系統(tǒng)不能忍受的，所以在那篇里面給出過(guò)解決方案，但并未分析ie瀏覽器不能兼容的原因，昨天博主花了點(diǎn)時(shí)間特意調(diào)試了下源碼，原來(lái)在ie里面，使用jquery的clone()方法和谷歌等瀏覽器有所區(qū)別。為了展示這個(gè)區(qū)別，這里先拋個(gè)磚。比如有如下代碼：

<table id="tbtest">
 <tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
 <tr><td>ddd</td><td>eee</td><td>fff</td></tr>
 <tr><td>ggg</td><td>hhh</td><td>iii</td></tr>
</table>
<script type="text/javascript">
 var $tr = $('#tbtest tr:eq(0)').clone();
 var $tds = $tr.find('td');
 $tr.html('');
 alert($tds.eq(0).html());
</script>

代碼本身很簡(jiǎn)單，只是為了測(cè)試用?？吹竭@里你可以試著猜一下alert的結(jié)果。

算了，不考大家了，直接貼出來(lái)吧，有圖有真相！

相信不用我過(guò)多的解釋哪個(gè)是ie，哪個(gè)是谷歌了吧。

兩者的區(qū)別很明顯，谷歌里面得到“aaa”，而ie里面得到空字符串。這是為什么呢？

其實(shí)如果你用值類(lèi)型和引用類(lèi)型的區(qū)別來(lái)解釋這個(gè)差別你就不難理解了，在谷歌瀏覽器里面，$tr變量是一個(gè)引用類(lèi)型，當(dāng)你清空了它里面的內(nèi)容，只是清除了$tr這個(gè)變量的“指針”，或者叫指向，$tds變量仍然指向了$tr的原始內(nèi)容，所以調(diào)用$tds.eq(0).html()的時(shí)候仍然能得到結(jié)果aaa；同樣的代碼在ie瀏覽器里面，$tr變量就是一個(gè)值類(lèi)型，你清空了它里面的內(nèi)容之后，$tds的內(nèi)容也被清空了。如果你有更好的解釋，歡迎賜教哈。

之所以組件原生的js不能兼容ie瀏覽器，就是因?yàn)樗褂昧薱lone()這個(gè)方法，導(dǎo)致在不同的瀏覽器看到不同的結(jié)果。相信bootstrapTable組件的作者應(yīng)該是知道這個(gè)區(qū)別的，只不過(guò)沒(méi)有太在意這些，從作者做的很多功能的兼容性能夠看出，他做的功能很多沒(méi)有太多的考慮ie瀏覽器的效果。

二、效果預(yù)覽

還是老規(guī)矩，說(shuō)了這個(gè)多，沒(méi)圖怎么行，小二，上圖！

沒(méi)有固定高度的情況：?jiǎn)瘟袃鼋Y(jié)。

多列凍結(jié)。

固定任意高度效果

ie瀏覽器也沒(méi)有問(wèn)題，這里就不再重復(fù)上圖了。

三、源碼解析

源碼沒(méi)啥說(shuō)的，有興趣可以自己看看，主要的原理還是重寫(xiě)bootstrapTable構(gòu)造器的事件，來(lái)達(dá)到想要的效果。

(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('');這樣存在一個(gè)兼容性問(wèn)題，在IE瀏覽器里面，清空tr,$tds的值也會(huì)被清空。
   //$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 height
   height = 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);
   });
  });
  // events
  this.$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);

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

如何使用呢？這里博主單獨(dú)搞了一個(gè)靜態(tài)的html測(cè)試頁(yè)，還是貼出來(lái)供大家參考。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <title></title>
 <!--必須的css引用-->
 <link href="Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
 <link href="Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
<link href="Content/bootstrap-table/extensions/fixed-column/bootstrap-table-fixed-columns.css" rel="stylesheet" />
</head>
<body>
 <div class="panel-body" style="padding-bottom:0px;">
  <!--<div class="panel panel-default">
   <div class="panel-heading">查詢條件</div>
   <div class="panel-body">
    <form id="formSearch" class="form-horizontal">
     <div class="form-group" style="margin-top:15px">
      <label class="control-label col-sm-1" for="name">員工姓名</label>
      <div class="col-sm-3">
       <input type="text" class="form-control" id="name">
      </div>
      <label class="control-label col-sm-1" for="address">家庭住址</label>
      <div class="col-sm-3">
       <input type="text" class="form-control" id="address">
      </div>
      <div class="col-sm-4" style="text-align:left;">
       <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查詢</button>
      </div>
     </div>
    </form>
   </div>
  </div>-->
  <div id="toolbar" class="btn-group">
   <button id="btn_add" type="button" class="btn btn-success">
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
   </button>
  </div>
  <table id="tb_user"></table>
 </div>
 <!--新增或者編輯的彈出框-->
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     <h4 class="modal-title" id="myModalLabel">操作</h4>
    </div>
    <div class="modal-body">
     <div class="row" style="padding:10px;">
      <label class="control-label col-xs-2">姓名</label>
      <div class="col-xs-10">
       <input type="text" name="Name" class="form-control" placeholder="姓名">
      </div>
     </div>
     <div class="row" style="padding:10px;">
      <label class="control-label col-xs-2">年齡</label>
      <div class="col-xs-10">
       <input type="text" name="Age" class="form-control" placeholder="年齡">
      </div>
     </div>
     <div class="row" style="padding:10px;">
      <label class="control-label col-xs-2">學(xué)校</label>
      <div class="col-xs-10">
       <input type="text" name="School" class="form-control" placeholder="學(xué)校">
      </div>
     </div>
     <div class="row" style="padding:10px;">
      <label class="control-label col-xs-2">家庭住址</label>
      <div class="col-xs-10">
       <input type="text" name="Address" class="form-control" placeholder="學(xué)校">
      </div>
     </div>
     <div class="row" style="padding:10px;">
      <label class="control-label col-xs-2">備注</label>
      <div class="col-xs-10">
       <textarea class="form-control" placeholder="備注" name="Remark"></textarea>
      </div>
     </div>
    </div>
    <div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>關(guān)閉</button>
     <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
    </div>
   </div>
  </div>
 </div>
  <!--必須的js文件-->
  <script src="Content/jquery-1.9.1.min.js"></script>
  <script src="Content/bootstrap/js/bootstrap.min.js"></script>
  <script src="Content/bootstrap-table/bootstrap-table.min.js"></script>
  <script src="Content/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="Content/bootstrap-table/extensions/fixed-column/bootstrap-table-fixed-columns.js"></script>
  <script type="text/javascript">
   //頁(yè)面加載完成之后
   var data = [
    { Id: 1, Name: 'Jim', Age: 30, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
    { Id: 2, Name: 'Kate', Age: 30, School: '光明小學(xué)', Address: '深圳市', Remark: 'My Name is Jim Green' },
    { Id: 3, Name: 'Lucy', Age: 30, School: '光明小學(xué)', Address: '廣州天河機(jī)場(chǎng)', Remark: 'My Name is Jim Green' },
    { Id: 4, Name: 'Lilei', Age: 30, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
    { Id: 5, Name: 'Lintao', Age: 30, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
    { Id: 6, Name: 'Lily', Age: 30, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
    { Id: 7, Name: 'Hanmeimei', Age: 30, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
    { Id: 8, Name: '張三', Age: 46, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
    { Id: 9, Name: '李四', Age: 23, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
    { Id: 10, Name: '王五', Age: 33, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
    { Id: 11, Name: '趙六', Age: 22, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
    { Id: 12, Name: 'Polly', Age: 300, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
    { Id: 13, Name: 'Uncle', Age: 50, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
   ];
   var childData = [
    { SourceField: 'A', BackField: 'BB' },
    { SourceField: 'CC', BackField: 'UU' },
    { SourceField: 'DD', BackField: 'J' },
   ];
   $(function () {
    //表格的初始化
    $('#tb_user').bootstrapTable({
     data: data,       //直接從本地?cái)?shù)據(jù)初始化表格
     method: 'get',      //請(qǐng)求方式（*）
     toolbar: '#toolbar',    //工具按鈕用哪個(gè)容器
     striped: true,      //是否顯示行間隔色
     cache: false,      //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
     pagination: true,     //是否顯示分頁(yè)（*）
     sortable: false,      //是否啟用排序
     sortOrder: "asc",     //排序方式
     queryParams: function (params) {
      return params;
     },         //傳遞參數(shù)（*）
     sidePagination: "client",   //分頁(yè)方式：client客戶端分頁(yè)，server服務(wù)端分頁(yè)（*）
     pageNumber: 1,      //初始化加載第一頁(yè)，默認(rèn)第一頁(yè)
     pageSize: 5,      //每頁(yè)的記錄行數(shù)（*）
     pageList: [10, 25, 50, 100],  //可供選擇的每頁(yè)的行數(shù)（*）
     search: true,      //是否顯示表格搜索，此搜索是客戶端搜索，不會(huì)進(jìn)服務(wù)端，所以，個(gè)人感覺(jué)意義不大
     strictSearch: true,
     showColumns: true,     //是否顯示所有的列
     showRefresh: true,     //是否顯示刷新按鈕
     minimumCountColumns: 2,    //最少允許的列數(shù)
     height:400,
   selectItemName: 'parentItem',
     fixedColumns: true,
     fixedNumber: 6,
     //注冊(cè)加載子表的事件。注意下這里的三個(gè)參數(shù)！
     onExpandRow: function (index, row, $detail) {
      InitSubTable(index, row, $detail);
     },
     columns: [{
      checkbox: true
     }, {
      field: 'Name',
      title: '姓名',
width:200
     }, {
      field: 'Age',
      title: '年齡',
width:200
     }, {
      field: 'School',
      title: '畢業(yè)院校',
width:200
     }, {
      field: 'Address',
      title: '家庭住址',
width:100
     }, {
      field: 'Remark',
      title: '備注',
width:100
     }, 
 {
      field: 'Remark',
      title: '備注',
width:100
     }, {
      field: 'Remark',
      title: '備注',
width:100
     }, {
      field: 'Remark',
      title: '備注',
width:100
     }, {
      field: 'Remark',
      title: '備注',
width:100
     }, {
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      field: 'Remark',
      title: '備注',
width:100
     },{
      title: '操作',
width:200,
      formatter: function (value, row, index) {//這里的三個(gè)參數(shù)：value表示當(dāng)前行當(dāng)前列的值；row表示當(dāng)前行的數(shù)據(jù)；index表示當(dāng)前行的索引（從0開(kāi)始）。
       var html = '<button type="button" onclick="editModel('+row.Id+')" class="btn btn-primary"><span class="glyphicon glyphicon-pencil" aria- hidden="true" ></span >編輯</button >&nbsp;&nbsp;' +
          '<button type="button" onclick="deleteModel(' + row.Id + ')" class="btn btn-danger"><span class="glyphicon glyphicon-remove" aria- hidden="true" ></span >刪除</button >';
       return html;
      }
     }],
     onEditableSave: function (field, row, oldValue, $el) {
      alert("更新保存事件，原始值為" + oldValue);
      //$.ajax({
      // type: "post",
      // url: "/Editable/Edit",
      // data: row,
      // dataType: 'JSON',
      // success: function (data, status) {
      //  if (status == "success") {
      //   alert('提交數(shù)據(jù)成功');
      //  }
      // },
      // error: function () {
      //  alert('編輯失敗');
      // },
      // complete: function () {
      // }
      //});
     }
    });
    //新增事件
    $("#btn_add").on('click', function () {
$('#tb_user').bootstrapTable("resetView");
     //彈出模態(tài)框
     $("#myModal").modal();
     //給彈出框里面的各個(gè)文本框賦值
     $("#myModal input").val("");
     $("#myModal textarea").val("");
    });
   });
   //加載子表
   var InitSubTable = function (index, row, $detail) {
    var parentid = row.MENU_ID;
    var cur_table = $detail.html('<table></table>').find('table');
    //子表的初始化和父表完全相同
    $(cur_table).bootstrapTable({
     //url: '/api/MenuApi/GetChildrenMenu',
     data: childData,
     method: 'get',
     queryParams: { strParentID: parentid },
     ajaxOptions: { strParentID: parentid },
     clickToSelect: true,
     uniqueId: "MENU_ID",
     pageSize: 10,
     pageList: [10, 25],
   selectItemName: 'childItem'+index,
   checkboxHeader:false,
     columns: [{
      checkbox: true
     }, {
       field: 'SourceField',
      title: '源端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }, {
      field: 'BackField',
      title: '備端字段'
     }],
     //無(wú)線循環(huán)取子表，直到子表里面沒(méi)有記錄
     onExpandRow: function (index, row, $Subdetail) {
      //oInit.InitSubTable(index, row, $Subdetail);
     }
    });
   };
   //編輯事件
   var editModel = function (id) {
    //根據(jù)當(dāng)前行的id獲取當(dāng)前的行數(shù)據(jù)
    var row = $("#tb_user").bootstrapTable('getRowByUniqueId', id);
    //彈出模態(tài)框
    $("#myModal").modal();
    //給彈出框里面的各個(gè)文本框賦值
    $("#myModal input[name='Name']").val(row.Name);
    $("#myModal input[name='Age']").val(row.Age);
    $("#myModal input[name='School']").val(row.School);
    $("#myModal input[name='Address']").val(row.Address);
    $("#myModal textarea[name='Remark']").val(row.Remark);
   }
   //刪除事件
   var deleteModel = function (id) {
    alert("刪除id為" + id + "的用戶");
   }
  </script>
</body>
</html>
bootstrapTableFixColumns.html

代碼釋疑：

1、源碼各個(gè)方法解釋

BootstrapTable.prototype.initFixedColumns ：當(dāng)初始化的時(shí)候配置了fixedColumns: true時(shí)需要執(zhí)行的凍結(jié)列的方法。
BootstrapTable.prototype.initHeader：重寫(xiě)組件的的初始化表頭的方法，加入凍結(jié)的表頭。
BootstrapTable.prototype.initBody：重寫(xiě)組件的初始化表內(nèi)容的方法，加入凍結(jié)的表內(nèi)容。
BootstrapTable.prototype.resetView：重寫(xiě)“父類(lèi)”的resetView方法，通過(guò)setTimeout去設(shè)置凍結(jié)的表頭和表體的寬度和高度。
BootstrapTable.prototype.fitHeaderColumns：設(shè)置凍結(jié)列的表頭的寬高。
BootstrapTable.prototype.fitBodyColumns ：設(shè)置凍結(jié)列的表體的寬高，以及滾動(dòng)條和主體表格的滾動(dòng)條同步。

2、對(duì)于上述拋出的ie和谷歌的兼容性問(wèn)題的解析

查看BootstrapTable.prototype.initBody方法，你會(huì)發(fā)現(xiàn)里面寫(xiě)有部分注釋。

this.$body.find('> tr[data-index]').each(function () {
  var $tr = $(this).clone(),
  $tds = $tr.find('td');
  //$tr.html('');這樣存在一個(gè)兼容性問(wèn)題，在IE瀏覽器里面，清空tr,$tds的值也會(huì)被清空。
  //$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;
  }
 });

這一段做了部分修改，有興趣可以調(diào)適細(xì)看。

3、項(xiàng)目中的使用

最近在研究學(xué)習(xí)abp的相關(guān)源碼，將bootstrapTable融入abp里面去了，貼出表格凍結(jié)的一些效果圖。

4、擴(kuò)展

除此之外，還特意做了右邊操作列的凍結(jié)。

和左邊列的凍結(jié)一樣，最右邊列的凍結(jié)也是可以做的，最不同的地方莫過(guò)于右邊列有一些操作按鈕，如果在點(diǎn)擊凍結(jié)列上面的按鈕時(shí)觸發(fā)實(shí)際表格的按鈕事件是難點(diǎn)。如果有這個(gè)需求，可以看看。

 bootstrap-table-fixed-columns.js
 bootstrap-table-fixed-columns.css

需要說(shuō)明的是，由于時(shí)間問(wèn)題，右側(cè)固定列的代碼和上述解決高度的代碼并未合并，所以如果你既想要解決凍結(jié)列的高度，又想要右側(cè)列的凍結(jié)，需要自己花點(diǎn)時(shí)間合并下代碼。

以上所述是小編給大家介紹的JS 組件系列之Bootstrap Table的凍結(jié)列功能徹底解決高度問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: