快捷導(dǎo)航

jQuery實(shí)現(xiàn)凍結(jié)表格行和列

更新時(shí)間：2015年04月29日 11:18:06 投稿：hebedich

本文給大家分享的是前些日子做的項(xiàng)目中的一個(gè)客戶的特殊要求，很少遇到，查詢了好久的度娘，才算找到解決方案，這里分享給大家，有需要的小伙伴可以參考下。

客戶要求實(shí)現(xiàn)對表格數(shù)據(jù)的頭幾行或者頭幾列進(jìn)行凍結(jié)，即滾動(dòng)時(shí)保持這幾行/列不動(dòng)，通過網(wǎng)上查找代碼，參考已有的代碼的思路，實(shí)現(xiàn)了可以任意對行、列進(jìn)行凍結(jié)。

實(shí)現(xiàn)原理：

創(chuàng)建多個(gè)div，div之間通過css實(shí)現(xiàn)層疊，每個(gè)div放置當(dāng)前表格的克隆。例如：需要行凍結(jié)時(shí)，創(chuàng)建存放凍結(jié)行表格的div，通過設(shè)置z-index屬性和position屬性，讓凍結(jié)行表格在數(shù)據(jù)表格的上層。同理，需要列凍結(jié)時(shí)，創(chuàng)建存放凍結(jié)列表格的div，并放置在數(shù)據(jù)表格的上層。如果需要行列都凍結(jié)時(shí)，則除了創(chuàng)建凍結(jié)行、凍結(jié)列表格的div，還需要?jiǎng)?chuàng)建左上角的固定行列表格的div，并放置在所有div的最上層。
處理表格的滾動(dòng)事件，在表格橫向或者縱向滾動(dòng)時(shí)，同時(shí)讓相應(yīng)的凍結(jié)行和凍結(jié)列也同步滾動(dòng)。
處理html的resize事件，同步修改表格的滾動(dòng)區(qū)域?qū)挾群透叨?/p>

代碼如下:

/*
 * 鎖定表頭和列
 * 
 * 參數(shù)定義
 *   table - 要鎖定的表格元素或者表格ID
 *   freezeRowNum - 要鎖定的前幾行行數(shù)，如果行不鎖定，則設(shè)置為0
 *   freezeColumnNum - 要鎖定的前幾列列數(shù)，如果列不鎖定，則設(shè)置為0
 *   width - 表格的滾動(dòng)區(qū)域?qū)挾?
 *   height - 表格的滾動(dòng)區(qū)域高度
 */
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());
}

/*
 * 調(diào)整鎖定表的寬度和高度，這個(gè)函數(shù)在resize事件中調(diào)用
 * 
 * 參數(shù)定義
 *   table - 要鎖定的表格元素或者表格ID
 *   width - 表格的滾動(dòng)區(qū)域?qū)挾?
 *   height - 表格的滾動(dòng)區(qū)域高度
 */
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;
  }
};

//返回當(dāng)前頁面寬度
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;
    });
  }
});

使用時(shí)，只要在table元素設(shè)置freezeRowNum和freezeColumnNum屬性值，即可實(shí)現(xiàn)凍結(jié)效果

復(fù)制代碼代碼如下:

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

...

</table>

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

jQuery實(shí)現(xiàn)凍結(jié)表格行和列

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具