JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案


Posted in Javascript onJune 30, 2017

前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动。遗憾的是,bootstrap table里自带的fixed column功能有一点bug,于是和同事讨论该如何解决,于是就有了这篇文章。

一、起因回顾

最近项目里面有一个表格需求,该表格列是动态产生的,而且列的数量操作一定值以后就会出现横向滚动条,滚动的时候需要前面几列固定。也就是所谓的excel的冻结列功能。该如何实现呢?不用多说,当然是查文档,于是找到了这篇http://issues.wenzhixin.net.cn/bootstrap-table/index.html#extensions/fixed-columns.html。谷歌浏览器效果如下:

第一列固定

JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

貌似问题完美解决!可是,事与愿违,很遗憾,上面说了,这是谷歌浏览器的效果,没有问题。我们来看看IE里面

IE11效果:

JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

IE10效果:

JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

很显然,不管是IE内核版本多少,冻结的列里面的内容都无法显示。怎么办?这可为难死宝宝了!

二、解决方案

还好有万能的开源,查看该页面源代码发现可以找到冻结列这个js的源码。

JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

点击进入可以看到这个js的所有源码,找到源码就好办了,我们试着改改源码看是否能解决这个bug。

我们在bootstrap-table下面的extensions文件夹下面新增加一个文件夹fixed-column

JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

下面就贴出我们改好的源码:

(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 = $([
   '<div class="fixed-table-column" style="position: absolute; background-color: #fff; border-right:1px solid #ddd;">',
   '<table>',
   '<thead></thead>',
   '<tbody></tbody>',
   '</table>',
   '</div>'].join(''));
  this.timeoutHeaderColumns_ = 0;
  this.timeoutBodyColumns_ = 0;
  this.$fixedBody.find('table').attr('class', this.$el.attr('class'));
  this.$fixedHeaderColumns = this.$fixedBody.find('thead');
  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 $tr = this.$header.find('tr:eq(0)').clone(),
   $ths = $tr.clone().find('th');
  $tr.html('');
  for (var i = 0; i < this.options.fixedNumber; i++) {
   $tr.append($ths.eq(i).clone());
  }
  this.$fixedHeaderColumns.html('').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('');
  this.$body.find('> tr[data-index]').each(function () {
   var $tr = $(this).clone(),
    $tds = $tr.clone().find('td');
   $tr.html('');
   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(':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.$fixedBody.find('thead th[data-field="' + visibleFields[index] + '"]')
    .find('.fht-cell').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('margin-top')) - 2),
   height = this.$tableBody.height() - 2;
  if (!this.$body.find('> tr[data-index]').length) {
   this.$fixedBody.hide();
   return;
  }
  this.$body.find('> tr').each(function (i) {
   that.$fixedBody.find('tbody tr:eq(' + i + ')').height($(this).height() - 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-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;
  }

主要修改的地方:

1)源码里面将thead和tbody分别封装成了一个单独的表格,修改后将thead和tbody放到了一个table里面;

2)依次遍历冻结的列放入到固定的tbody里面;

其实也就改了那么几个地方,就能完美解决IE的bug。我们先来看看效果:

IE11

JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

IE10

JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

IE8

JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

我们再来看看如何使用。

1、引用js和对应的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、js调用如下

JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

加两个参数fixedColumns和fixedNumber即可,什么意思不用过多解释,是否冻结列、冻结列的列数。还有一点需要说明的是,这里调用的时候不能指定它的height,如果指定height,表格的冻结显示会有问题。

以上所述是小编给大家介绍的JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
xml 封装与解析(javascript和C#中)
Jul 26 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
9种改善AngularJS性能的方法
Nov 28 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 Javascript
js canvas实现俄罗斯方块
Oct 11 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 #Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 #Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 #Javascript
js实现京东轮播图效果
Jun 30 #Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 #jQuery
Vue和Bootstrap的整合思路详解
Jun 30 #Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 #Javascript
You might like
php,不用COM,生成excel文件
2006/10/09 PHP
使用字符串函数输出整数化的PHP版本号
2006/10/09 PHP
PHP可变函数的使用详解
2013/06/14 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
网页javascript精华代码集
2007/01/24 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
javascript前端实现多视频上传
2020/12/13 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
Python中的字符串替换操作示例
2016/06/27 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Python查看微信撤回消息代码
2018/06/07 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
商场端午节活动方案
2014/01/29 职场文书
业务总经理岗位职责
2014/02/03 职场文书
征婚广告词
2014/03/17 职场文书
股权收购意向书
2014/04/01 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android