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 相关文章推荐
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 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的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
jQuery hover 延时器实现代码
2011/03/12 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
js中作用域的实例解析
2017/03/16 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
python实现博客文章爬虫示例
2014/02/26 Python
Python专用方法与迭代机制实例分析
2014/09/15 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
小学生美德少年事迹
2014/02/02 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
工会文体活动总结
2015/05/07 职场文书
高中生物教学反思
2016/02/20 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS