A-A+
JS实现Table冻结行列
最近要实现冻结表格行列的效果,如下:
于是找了几个JavaScript插件试了一下,比如"Fixed-Header-Table",这个插件第一感觉是比较好的,从调用和配置的方式上来说,比较符合日常使用的习惯,但是唯一的问题在于,一旦Table内包含中文,它的样式就会走形,反复调试了多次,因为时间的关系,就放弃了。
后来用的是网上找的一段代码,因为它不是以插件方式开放的,就是引用JS脚本,然后再以函数方式调用,虽然感觉很别扭,但是倒是可以实现效果。据说在大数据场景下表现的不好,毕竟它的实现其实是将表格复制到4个DIV中,再辅以绝对定位而实现的,那么数据量过大,会导致复制的内容过多,不过一般情况下(比如我现在的应用)足以应付,而且表现还不错。
原文地址在这里:http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html
源码如下:
- /*
- * 锁定表头和列
- *
- * 参数定义
- * TableID - 要锁定的表格元素或者表格ID
- * FixColumnNumber - 要锁定列的个数,从0列开始
- * width - 表格的滚动区域宽度
- * height - 表格的滚动区域高度
- */
- jQuery.extend({
- browser: function()
- {
- var
- rwebkit = /(webkit)\/([\w.]+)/,
- ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
- rmsie = /(msie) ([\w.]+)/,
- rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,
- browser = {},
- ua = window.navigator.userAgent,
- browserMatch = uaMatch(ua);
- if (browserMatch.browser) {
- browser[browserMatch.browser] = true;
- browser.version = browserMatch.version;
- }
- return { browser: browser };
- },
- });
- function uaMatch(ua)
- {
- ua = ua.toLowerCase();
- var match = rwebkit.exec(ua)
- || ropera.exec(ua)
- || rmsie.exec(ua)
- || ua.indexOf("compatible") < 0 && rmozilla.exec(ua)
- || [];
- return {
- browser : match[1] || "",
- version : match[2] || "0"
- };
- }
- function FixTable(TableID, FixColumnNumber, width, height) {
- /// <summary>
- /// 锁定表头和列
- /// <para> sorex.cnblogs.com </para>
- /// </summary>
- /// <param name="TableID" type="String">
- /// 要锁定的Table的ID
- /// </param>
- /// <param name="FixColumnNumber" type="Number">
- /// 要锁定列的个数
- /// </param>
- /// <param name="width" type="Number">
- /// 显示的宽度
- /// </param>
- /// <param name="height" type="Number">
- /// 显示的高度
- /// </param>
- if ($("#" + TableID + "_tableLayout").length != 0) {
- $("#" + TableID + "_tableLayout").before($("#" + TableID));
- $("#" + TableID + "_tableLayout").empty();
- }
- else {
- $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
- }
- $('<div id="' + TableID + '_tableFix"></div>'
- + '<div id="' + TableID + '_tableHead"></div>'
- + '<div id="' + TableID + '_tableColumn"></div>'
- + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
- var oldtable = $("#" + TableID);
- var tableFixClone = oldtable.clone(true);
- tableFixClone.attr("id", TableID + "_tableFixClone");
- $("#" + TableID + "_tableFix").append(tableFixClone);
- var tableHeadClone = oldtable.clone(true);
- tableHeadClone.attr("id", TableID + "_tableHeadClone");
- $("#" + TableID + "_tableHead").append(tableHeadClone);
- var tableColumnClone = oldtable.clone(true);
- tableColumnClone.attr("id", TableID + "_tableColumnClone");
- $("#" + TableID + "_tableColumn").append(tableColumnClone);
- $("#" + TableID + "_tableData").append(oldtable);
- $("#" + TableID + "_tableLayout table").each(function () {
- $(this).css("margin", "0");
- });
- var HeadHeight = $("#" + TableID + "_tableHead thead").height();
- HeadHeight += 2;
- $("#" + TableID + "_tableHead").css("height", HeadHeight);
- $("#" + TableID + "_tableFix").css("height", HeadHeight);
- var ColumnsWidth = 0;
- var ColumnsNumber = 0;
- $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
- ColumnsWidth += $(this).outerWidth(true);
- ColumnsNumber++;
- });
- ColumnsWidth += 2;
- if ($.browser.msie) {
- switch ($.browser.version) {
- case "7.0":
- if (ColumnsNumber >= 3) ColumnsWidth--;
- break;
- case "8.0":
- if (ColumnsNumber >= 2) ColumnsWidth--;
- break;
- }
- }
- $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
- $("#" + TableID + "_tableFix").css("width", ColumnsWidth);
- $("#" + TableID + "_tableData").scroll(function () {
- $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
- $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
- });
- $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
- $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
- $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
- $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
- if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
- $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
- $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
- }
- if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
- $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
- $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
- }
- $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
- $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
- $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
- $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
- }
学习带来乐趣,谢谢博主!