首页 >

jQuery实现冻结表格行和列【jquery】

Posted on | by liu
web前端|js教程jQuery实现冻结表格行和列【jquery】
jQuery,冻结表格行和列
web前端-js教程
客户要求实现对表格数据的头几行或者头几列进行冻结，即滚动时保持这几行/列不动，通过网上查找代码，参考已有的代码的思路，实现了可以任意对行、列进行冻结。
爱码平台网站源码,vscode注释说明,ubuntu最新官方消息,服务无tomcat,htc手机使用sqlite,分页显示插件,适合crm系统的前端框架,python爬虫每日一话,php 类 对象,seo私域,主题制作网站,网页的下拉菜单制作,gb模板下载,plc vb编写程序lzw
实现原理：
php md5解密源码,vscode背景图全屏显示,ubuntu 命名端口,tomcat窗口不显示,nodejs爬虫会话,php 图像验证码,石家庄seo排名优化价格,公司网站java 源代码lzw
创建多个div，div之间通过css实现层叠，每个div放置当前表格的克隆。例如：需要行冻结时，创建存放冻结行表格的div，通过设置z-index属性和position属性，让冻结行表格在数据表格的上层。同理，需要列冻结时，创建存放冻结列表格的div，并放置在数据表格的上层。如果需要行列都冻结时，则除了创建冻结行、冻结列表格的div，还需要创建左上角的固定行列表格的div，并放置在所有div的最上层。
处理表格的滚动事件，在表格横向或者纵向滚动时，同时让相应的冻结行和冻结列也同步滚动。
处理html的resize事件，同步修改表格的滚动区域宽度和高度
php卡密系统源码,vscode支持vue,飞腾安装ubuntu黑屏,tomcat安全域,sqlite 打开xml,ecshop购物车加强插件,mes用什么前端框架,利用爬虫下单,php $sql,yeon seo,政府网站模板源码 php,网页搜索子菜单,微赞后台模板修改,h5页面滚动效果,crm客户管理系统源码开放,搜索引擎蜘蛛程序源码lzw
代码如下:

/* * 锁定表头和列 *  * 参数定义 *   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("
");        divTableLayout = $("#" + tableId + "_tableLayout");  }    var html = '';  if (freezeRowNum > 0 && freezeColumnNum > 0)    html += '
';      if (freezeRowNum > 0)    html += '
';      if (freezeColumnNum > 0)    html += '
';      html += '
';      $(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属性值，即可实现冻结效果

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

  • 暂无相关文章