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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
angularJS开发注意事项
May 26 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 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
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
php发送与接收流文件的方法
2015/02/11 PHP
PHP微信红包API接口
2015/12/05 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
Python读取图片属性信息的实现方法
2016/09/11 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
荷兰本土平价百货:HEMA
2017/10/23 全球购物
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
介绍下Lucene建立索引的过程
2016/03/02 面试题
初中军训感想300字
2014/03/05 职场文书
校企合作协议书
2014/04/16 职场文书
室内设计专业自荐信
2014/05/31 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
2016公司年会通知范文
2015/04/25 职场文书
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
Python正则表达式中flags参数的实例详解
2022/04/01 Python
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis
mysql数据库如何转移到oracle
2022/12/24 MySQL