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 相关文章推荐
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
JavaScript 闭包的使用场景
Sep 17 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
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+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中自定义函数的教程
2015/04/27 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
python实现随机梯度下降法
2020/03/24 Python
python语言元素知识点详解
2019/05/15 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
python将图片转base64,实现前端显示
2020/01/09 Python
python开发入门——列表生成式
2020/09/03 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
JAVA和C++区别都有哪些
2015/03/30 面试题
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
主持人大赛开场白
2015/05/29 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python
Python之matplotlib绘制折线图
2022/04/13 Python