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 相关文章推荐
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
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
基于mysql的bbs设计(五)
2006/10/09 PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
php字符串分割函数用法实例
2015/03/17 PHP
php-fpm中max_children的配置
2019/03/15 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
wxPython事件驱动实例详解
2014/09/28 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
selenium如何定位span元素的实现
2021/01/13 Python
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
网络工程师的自我评价
2013/10/02 职场文书
应征英语教师求职信
2013/11/27 职场文书
《谁的本领大》教后反思
2014/04/25 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
校园安全主题班会
2015/08/12 职场文书
python 实现定时任务的四种方式
2021/04/01 Python
Python中常见的导入方式总结
2021/05/06 Python
Python实现学生管理系统(面向对象版)
2021/06/24 Python
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技