js表格实现行、列冻结

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

实现原理：

创建多个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 id="reportTable" width="1900" freezeRowNum="2" freezeColumnNum="2" class="report" align="center">  ...  </table>

转载http://aystnd.iteye.com/blog/1872879

js表格实现行、列冻结相关推荐

html表格第一列和最后一列冻结
html表格第一列和最后一列冻结阿闰使用div思路,div溢出滚动, js动态获取宽度, 缺陷,滚动条不是很美观 .zuo{ width: 15%; height: 100%; /* border ...
JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案参考文章: (1)JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 (2) ...
谷歌浏览器网页表格复制一列_如何冻结或隐藏Google表格中的列和行
谷歌浏览器网页表格复制一列 The greater the number of rows and columns in your Google Sheets spreadsheet, the more ...
Angular8简单方式实现表格固定表头和冻结列
Angular8简单方式实现表格固定表头和冻结列 html页面: <style> .tableheader {position: relative; top: 0px; z-index: ...
微信小程序表格列冻结功能的实现
微信小程序表格列冻结功能的实现 **由于公司项目功能需求:查询日考勤报表,如图,用户需要增加横向滚动功能,重点是冻结年月日这列,就像EXCEL那样. 效果如下: 微信小程序表格列冻结功能的实现.mp4 ...
table表格实现行、列冻结
客户要求实现对表格数据的头几行或者头几列进行冻结,即滚动时保持这几行/列不动,通过网上查找代码,参考已有的代码的思路,实现了可以任意对行.列进行冻结. 实现原理: 创建多个div,div之间通过css ...
使用fixed进行表格列冻结之后出现的问题
使用fixed进行表格列冻结之后出现滚动条遮挡 .el-table__fixed {bottom: 17px !important;height: auto !important; } 解决了遮挡之后 ...
HTML 锁定表格首行首列、拖拽表格列宽
摘自:http://s.yanghao.org/program/viewdetail.php?i=61717 因为与自己的实际情况有些不同,简单的改造了下...如果有版权问题,请留言... 锁定Tab ...
layui表格添加链接列_Layui表格之多列合并展示
前言: 当我们在使用Layui的时候,有时表格中的列比较多,展示出来肯定是有问题的,这样就不得不舍弃一些列不展示,不展示是一种解决方案,但是更好的解决方案应该是合并展示. 实现效果: 实现代码参考: ...
java mvc 分页查询条件_java分页条件查询-GridManager.js表格插件+Pageable分页对象+mybatis pagehelper分页插件...
总览: 一. GridManager.js表格插件直接上插件API:链接地址感觉该插件简单好用,插件作者也是有问必答,nice 二. 添加依赖后端: pom文件添加: 1.7.0.RELEASE ...

js表格实现行、列冻结

js表格实现行、列冻结相关推荐

最新文章

热门文章