jQuery实现冻结表格行和列


Posted in Javascript onApril 29, 2015

客户要求实现对表格数据的头几行或者头几列进行冻结,即滚动时保持这几行/列不动,通过网上查找代码,参考已有的代码的思路,实现了可以任意对行、列进行冻结。

实现原理:

创建多个div,div之间通过css实现层叠,每个div放置当前表格的克隆。例如:需要行冻结时,创建存放冻结行表格的div,通过设置z-index属性和position属性,让冻结行表格在数据表格的上层。同理,需要列冻结时,创建存放冻结列表格的div,并放置在数据表格的上层。如果需要行列都冻结时,则除了创建冻结行、冻结列表格的div,还需要创建左上角的固定行列表格的div,并放置在所有div的最上层。
处理表格的滚动事件,在表格横向或者纵向滚动时,同时让相应的冻结行和冻结列也同步滚动。
处理html的resize事件,同步修改表格的滚动区域宽度和高度

代码如下:

/*
 * 锁定表头和列
 * 
 * 参数定义
 *   table - 要锁定的表格元素或者表格ID
 *   freezeRowNum - 要锁定的前几行行数,如果行不锁定,则设置为0
 *   freezeColumnNum - 要锁定的前几列列数,如果列不锁定,则设置为0
 *   width - 表格的滚动区域宽度
 *   height - 表格的滚动区域高度
 */
function freezeTable(table, freezeRowNum, freezeColumnNum, width, height) {
  if (typeof(freezeRowNum) == 'string')
    freezeRowNum = parseInt(freezeRowNum)
    
  if (typeof(freezeColumnNum) == 'string')
    freezeColumnNum = parseInt(freezeColumnNum)

  var tableId;
  if (typeof(table) == 'string') {
    tableId = table;
    table = $('#' + tableId);
  } else
    tableId = table.attr('id');
    
  var divTableLayout = $("#" + tableId + "_tableLayout");
  
  if (divTableLayout.length != 0) {
    divTableLayout.before(table);
    divTableLayout.empty();
  } else {
    table.after("<div id='" + tableId + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
    
    divTableLayout = $("#" + tableId + "_tableLayout");
  }
  
  var html = '';
  if (freezeRowNum > 0 && freezeColumnNum > 0)
    html += '<div id="' + tableId + '_tableFix" style="padding: 0px;"></div>';
    
  if (freezeRowNum > 0)
    html += '<div id="' + tableId + '_tableHead" style="padding: 0px;"></div>';
    
  if (freezeColumnNum > 0)
    html += '<div id="' + tableId + '_tableColumn" style="padding: 0px;"></div>';
    
  html += '<div id="' + tableId + '_tableData" style="padding: 0px;"></div>';
  
  
  $(html).appendTo("#" + tableId + "_tableLayout");
  
  var divTableFix = freezeRowNum > 0 && freezeColumnNum > 0 ? $("#" + tableId + "_tableFix") : null;
  var divTableHead = freezeRowNum > 0 ? $("#" + tableId + "_tableHead") : null;
  var divTableColumn = freezeColumnNum > 0 ? $("#" + tableId + "_tableColumn") : null;
  var divTableData = $("#" + tableId + "_tableData");
  
  divTableData.append(table);
  
  if (divTableFix != null) {
    var tableFixClone = table.clone(true);
    tableFixClone.attr("id", tableId + "_tableFixClone");
    divTableFix.append(tableFixClone);
  }
  
  if (divTableHead != null) {
    var tableHeadClone = table.clone(true);
    tableHeadClone.attr("id", tableId + "_tableHeadClone");
    divTableHead.append(tableHeadClone);
  }
  
  if (divTableColumn != null) {
    var tableColumnClone = table.clone(true);
    tableColumnClone.attr("id", tableId + "_tableColumnClone");
    divTableColumn.append(tableColumnClone);
  }
  
  $("#" + tableId + "_tableLayout table").css("margin", "0");
  
  if (freezeRowNum > 0) {
    var HeadHeight = 0;
    var ignoreRowNum = 0;
    $("#" + tableId + "_tableHead tr:lt(" + freezeRowNum + ")").each(function () {
      if (ignoreRowNum > 0)
        ignoreRowNum--;
      else {
        var td = $(this).find('td:first, th:first');
        HeadHeight += td.outerHeight(true);
        
        ignoreRowNum = td.attr('rowSpan');
        if (typeof(ignoreRowNum) == 'undefined')
          ignoreRowNum = 0;
        else
          ignoreRowNum = parseInt(ignoreRowNum) - 1;
      }
    });
    HeadHeight += 2;
    
    divTableHead.css("height", HeadHeight);
    divTableFix != null && divTableFix.css("height", HeadHeight);
  }
  
  if (freezeColumnNum > 0) {
    var ColumnsWidth = 0;
    var ColumnsNumber = 0;
    $("#" + tableId + "_tableColumn tr:eq(" + freezeRowNum + ")").find("td:lt(" + freezeColumnNum + "), th:lt(" + freezeColumnNum + ")").each(function () {
      if (ColumnsNumber >= freezeColumnNum)
        return;
        
      ColumnsWidth += $(this).outerWidth(true);
      
      ColumnsNumber += $(this).attr('colSpan') ? parseInt($(this).attr('colSpan')) : 1;
    });
    ColumnsWidth += 2;

    divTableColumn.css("width", ColumnsWidth);
    divTableFix != null && divTableFix.css("width", ColumnsWidth);
  }
  
  divTableData.scroll(function () {
    divTableHead != null && divTableHead.scrollLeft(divTableData.scrollLeft());
    
    divTableColumn != null && divTableColumn.scrollTop(divTableData.scrollTop());
  });
  
  divTableFix != null && divTableFix.css({ "overflow": "hidden", "position": "absolute", "z-index": "50" });
  divTableHead != null && divTableHead.css({ "overflow": "hidden", "width": width - 17, "position": "absolute", "z-index": "45" });
  divTableColumn != null && divTableColumn.css({ "overflow": "hidden", "height": height - 17, "position": "absolute", "z-index": "40" });
  divTableData.css({ "overflow": "scroll", "width": width, "height": height, "position": "absolute" });
  
  divTableFix != null && divTableFix.offset(divTableLayout.offset());
  divTableHead != null && divTableHead.offset(divTableLayout.offset());
  divTableColumn != null && divTableColumn.offset(divTableLayout.offset());
  divTableData.offset(divTableLayout.offset());
}

/*
 * 调整锁定表的宽度和高度,这个函数在resize事件中调用
 * 
 * 参数定义
 *   table - 要锁定的表格元素或者表格ID
 *   width - 表格的滚动区域宽度
 *   height - 表格的滚动区域高度
 */
function adjustTableSize(table, width, height) {
  var tableId;
  if (typeof(table) == 'string')
    tableId = table;
  else
    tableId = table.attr('id');
  
  $("#" + tableId + "_tableLayout").width(width).height(height);
  $("#" + tableId + "_tableHead").width(width - 17);
  $("#" + tableId + "_tableColumn").height(height - 17);
  $("#" + tableId + "_tableData").width(width).height(height);
}

function pageHeight() {
  if ($.browser.msie) {
    return document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
  } else {
    return self.innerHeight;
  }
};

//返回当前页面宽度
function pageWidth() {
  if ($.browser.msie) {
    return document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth;
  } else {
    return self.innerWidth;
  }
};

$(document).ready(function() {
  var table = $("table");
  var tableId = table.attr('id');
  var freezeRowNum = table.attr('freezeRowNum');
  var freezeColumnNum = table.attr('freezeColumnNum');
  
  if (typeof(freezeRowNum) != 'undefined' || typeof(freezeColumnNum) != 'undefined') {
    freezeTable(table, freezeRowNum || 0, freezeColumnNum || 0, pageWidth(), pageHeight());
    
    var flag = false;
    $(window).resize(function() {
      if (flag) 
        return ;
      
      setTimeout(function() { 
        adjustTableSize(tableId, pageWidth(), pageHeight()); 
        flag = false; 
      }, 100);
      
      flag = true;
    });
  }
});

使用时,只要在table元素设置freezeRowNum和freezeColumnNum属性值,即可实现冻结效果

<table id="reportTable" width="1900" freezeRowNum="2" freezeColumnNum="2" class="report" align="center">

...

</table>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
jQuery timers计时器简单应用说明
Oct 28 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
Js实现无刷新删除内容
Apr 29 #Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 #Javascript
jQuery()方法的第二个参数详解
Apr 29 #Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 #Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 #Javascript
javascript中in运算符用法分析
Apr 28 #Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 #Javascript
You might like
php读取msn上的用户信息类
2008/12/05 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
videocapture库制作python视频高速传输程序
2013/12/23 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
详谈python read readline readlines的区别
2017/09/22 Python
Python简单生成随机数的方法示例
2018/03/31 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
SQL SERVER面试资料
2013/03/30 面试题
一套Delphi的笔试题二
2013/05/11 面试题
中专生职业生涯规划书范文
2013/12/29 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
学习演讲稿范文
2014/05/10 职场文书
家属答谢词
2015/01/05 职场文书
大连星海广场导游词
2015/02/10 职场文书
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android