jQuery實(shí)現(xiàn)凍結(jié)表格行和列
更新時間：2015年04月29日 11:18:06 投稿：hebedich
本文給大家分享的是前些日子做的項(xiàng)目中的一個客戶的特殊要求，很少遇到，查詢了好久的度娘，才算找到解決方案，這里分享給大家，有需要的小伙伴可以參考下。
客戶要求實(shí)現(xiàn)對表格數(shù)據(jù)的頭幾行或者頭幾列進(jìn)行凍結(jié)，即滾動時保持這幾行/列不動，通過網(wǎng)上查找代碼，參考已有的代碼的思路，實(shí)現(xiàn)了可以任意對行、列進(jìn)行凍結(jié)。
實(shí)現(xiàn)原理：
創(chuàng)建多個div，div之間通過css實(shí)現(xiàn)層疊，每個div放置當(dāng)前表格的克隆。例如：需要行凍結(jié)時，創(chuàng)建存放凍結(jié)行表格的div，通過設(shè)置z-index屬性和position屬性，讓凍結(jié)行表格在數(shù)據(jù)表格的上層。同理，需要列凍結(jié)時，創(chuàng)建存放凍結(jié)列表格的div，并放置在數(shù)據(jù)表格的上層。如果需要行列都凍結(jié)時，則除了創(chuàng)建凍結(jié)行、凍結(jié)列表格的div，還需要創(chuàng)建左上角的固定行列表格的div，并放置在所有div的最上層。
處理表格的滾動事件，在表格橫向或者縱向滾動時，同時讓相應(yīng)的凍結(jié)行和凍結(jié)列也同步滾動。
處理html的resize事件，同步修改表格的滾動區(qū)域?qū)挾群透叨?/p>
代碼如下:
/*
* 鎖定表頭和列
*
* 參數(shù)定義
* table - 要鎖定的表格元素或者表格ID
* freezeRowNum - 要鎖定的前幾行行數(shù)，如果行不鎖定，則設(shè)置為0
* freezeColumnNum - 要鎖定的前幾列列數(shù)，如果列不鎖定，則設(shè)置為0
* width - 表格的滾動區(qū)域?qū)挾?
* height - 表格的滾動區(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)整鎖定表的寬度和高度，這個函數(shù)在resize事件中調(diào)用
*
* 參數(shù)定義
* table - 要鎖定的表格元素或者表格ID
* width - 表格的滾動區(qū)域?qū)挾?
* height - 表格的滾動區(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;
});
}
});
使用時，只要在table元素設(shè)置freezeRowNum和freezeColumnNum屬性值，即可實(shí)現(xiàn)凍結(jié)效果
復(fù)制代碼 代碼如下:
<table id="reportTable" width="1900" freezeRowNum="2" freezeColumnNum="2" class="report" align="center">
...
</table>
...
</table>
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
您可能感興趣的文章:
- jQuery 選擇表格(table)里的行和列及改變簡單樣式
- jQuery實(shí)現(xiàn)表格行和列的動態(tài)添加與刪除方法【測試可用】
- 基于JQuery的動態(tài)刪除Table表格的行和列的代碼
- jquery如何判斷表格同一列不同行input數(shù)據(jù)是否重復(fù)
- jquery通過select列表選擇框?qū)Ρ砀駭?shù)據(jù)進(jìn)行過濾示例
- jQuery操作表格（table）的常用方法、技巧匯總
- jQuery表格插件datatables用法總結(jié)
- jQuery實(shí)現(xiàn)鼠標(biāo)可拖動調(diào)整表格列寬度
- JQuery 表格操作(交替顯示、拖動表格行、選擇行等)
- jQuery+CSS實(shí)現(xiàn)的table表格行列轉(zhuǎn)置功能示例
相關(guān)文章
jquery實(shí)現(xiàn)簡單的拖拽效果實(shí)例兼容所有主流瀏覽器
拖拽效果個人覺得是一種不錯的用戶體驗(yàn)，抽空研究了一下，原理還蠻簡單的，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-06-06
將要高亮顯示的文字加上<span>段落標(biāo)記， class=”mask”的div 做為遮罩層，使此遮罩層位于文字內(nèi)容之上（z-index屬性，使用Jquery給段落動態(tài)添加樣式類。2009-12-12
本文主要介紹了使用jQuery快速高效制作網(wǎng)頁交互特效的方法，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
基于JQuery的一句代碼實(shí)現(xiàn)表格的簡單篩選
JQuery的強(qiáng)大之處，這里就不用講了。這里將用一行簡單的JQuery代碼實(shí)現(xiàn)簡單的表格篩選。2010-07-07
jQuery 連續(xù)列表實(shí)現(xiàn)代碼
你有沒有手工的編寫過一些重復(fù)的代碼？你也覺得它們是如此的無聊吧。好了，這里有更好的解決辦法。2009-12-12
這篇文章主要為大家詳細(xì)介紹了jquery canvas生成帶有二維碼的海報(bào)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家分享了Jquery日歷插件e-calendar升級版,e-calendar是一個jQuery插件,創(chuàng)建一個事件日歷它很容易使用,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
屬性的類型可以為：圖片、文本框、按鈕，然后選擇需要設(shè)置的屬性值：src、width、height、title、value等等，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-05-05
jquery對標(biāo)簽添加只讀（readonly）或者禁用（disabled）屬性
這篇文章主要介紹了jquery對標(biāo)簽添加只讀（readonly）或者禁用（disabled）屬性，jQuery是一個JavaScript庫。極大地簡化了JavaScript編程，下面關(guān)于其詳細(xì)介紹，需要的小伙伴可以參考一下2022-03-03
jQuery圖片輪播（二）利用構(gòu)造函數(shù)和原型創(chuàng)建對象以實(shí)現(xiàn)繼承
本文主要介紹了利用構(gòu)造函數(shù)和原型創(chuàng)建對象以實(shí)現(xiàn)繼承，并附上完成簡單輪播對象的封裝的示例代碼。有興趣的朋友可以看下2016-12-12