jQuery實現凍結表格行和列

2024-05-06 16:19:00

字體：大中小

來源：轉載

供稿：網友

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

客戶要求實現對表格數據的頭幾行或者頭幾列進行凍結，即滾動時保持這幾行/列不動，通過網上查找代碼，參考已有的代碼的思路，實現了可以任意對行、列進行凍結。

實現原理：

創建多個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;

    });

  }

});