锁定表头和固定列(Fixed table head and columns)

复制文章(原文):https://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html

如使用jQuery1.9.x及以上版本,需要引用jQuery Migrate Plugin库,在jQuery官网即可下载到!

因为方法很简单,就未封装成插件的形式,仅仅以代码方式发布。这里把自己做的方式写出来,以资纪念。

支持IE6+,FF3.6+,Opera9+,Chrome9+

一、实现方式

这里的准备使用4个table实现,具体如下图:

image

上图红色部分为要取出来的部分,蓝色部分为拼接后可以看到的部分。最终结果如下图

image

实现后效果:

姓名班级成绩
主科文科理科总分
语文数学英语政治历史地理物理化学生物
学生1班级364 104 150 93 32 82 26 44 83 678 
学生2班级2120 66 150 85 50 72 32 90 670 
学生3班级2133 61 49 97 67 13 64 60 552 
学生4班级3136 105 86 56 11 98 29 18 546 
学生5班级2129 146 62 64 67 70 57 16 612 
学生6班级245 29 51 91 37 26 293 
学生7班级128 25 127 96 43 90 75 13 28 525 
学生8班级378 64 20 29 70 92 100 69 30 552 
学生9班级265 10 139 19 57 86 57 79 76 588 
学生10班级2113 142 100 41 69 12 45 20 546 
学生11班级341 84 42 23 89 88 21 398 
学生12班级1102 111 61 76 12 25 66 39 496 
学生13班级249 144 56 75 18 58 39 13 88 540 
学生14班级1119 81 73 53 37 88 79 69 30 629 
学生15班级3120 78 86 58 50 20 42 24 485 
学生16班级165 71 64 45 31 18 53 361 
学生17班级172 139 24 20 39 49 19 21 23 406 
学生18班级350 84 53 70 77 81 38 80 25 558 
学生19班级156 147 134 59 57 31 48 86 625 
学生20班级1103 38 96 100 21 88 36 37 18 537 
学生21班级1133 150 28 37 96 88 12 36 87 667 
学生22班级2140 59 42 95 94 50 58 63 604 
学生23班级151 19 17 19 93 35 49 292 
学生24班级367 91 23 22 37 79 52 63 436 
学生25班级329 17 149 44 13 29 98 70 455 
学生26班级3126 117 112 11 100 55 87 18 627 
学生27班级3144 115 131 97 19 92 79 72 753 
学生28班级2107 77 143 94 89 90 35 70 708 
学生29班级314 33 44 78 67 27 49 23 340 
学生30班级377 117 51 75 74 43 25 24 488 
学生31班级176 140 148 50 100 33 83 81 23 734 
学生32班级129 25 146 28 79 73 47 91 526 
学生33班级296 44 121 94 17 20 19 418 
学生34班级297 48 68 82 39 16 24 79 79 532 
学生35班级3126 69 40 13 48 34 81 97 513 
学生36班级1144 24 18 71 58 21 12 95 45 488 
学生37班级123 94 93 78 46 88 72 15 90 599 
学生38班级273 103 45 17 69 18 67 55 450 
学生39班级319 16 36 18 50 48 19 75 24 305 
学生40班级144 50 73 58 21 84 49 68 453 
学生41班级294 98 24 34 52 27 87 95 512 
学生42班级227 68 60 75 93 38 44 27 436 
学生43班级3102 146 138 72 58 19 34 57 60 686 
学生44班级251 81 150 95 48 96 90 66 685 
学生45班级193 37 109 84 100 59 90 59 81 712 
学生46班级2125 60 32 70 93 65 74 44 77 640 
学生47班级1139 45 52 54 64 46 45 66 517 
学生48班级214 73 118 36 43 24 73 393 
学生49班级345 114 114 65 94 32 30 501 
学生50班级2112 77 19 33 30 32 90 18 77 488 
学生51班级219 66 140 36 44 34 62 17 34 452 
学生52班级261 98 107 78 17 54 28 89 534 
学生53班级148 23 65 23 70 58 36 45 75 443 
学生54班级181 46 37 86 87 83 39 63 531 
学生55班级148 23 145 53 80 35 31 426 
学生56班级1117 92 44 65 98 70 67 556 
学生57班级3148 25 63 29 96 34 34 34 92 555 
学生58班级151 22 97 58 80 16 19 91 20 454 
学生59班级2118 20 62 26 93 77 66 34 497 
学生60班级3129 19 109 78 33 15 74 67 58 582 
学生61班级3112 68 65 15 79 63 97 72 85 656 
学生62班级3117 14 73 98 81 400 
学生63班级187 103 30 21 43 87 25 398 
学生64班级265 79 49 53 86 33 57 99 83 604 
学生65班级2144 122 47 11 76 64 66 71 608 
学生66班级218 140 96 54 10 45 41 85 495 
学生67班级230 14 70 20 44 25 77 97 20 397 
学生68班级360 147 38 53 88 54 92 546 
学生69班级286 115 23 90 52 50 89 79 42 626 
学生70班级3132 25 21 25 44 86 58 61 455 
学生71班级3149 102 68 98 96 95 25 47 687 
学生72班级228 138 74 30 43 95 57 68 533 
学生73班级354 148 81 40 86 23 91 73 95 691 
学生74班级1143 39 76 55 90 31 18 95 552 
学生75班级283 95 48 86 61 97 68 84 24 646 
学生76班级1138 141 50 14 11 370 
学生77班级325 33 46 25 62 93 41 43 75 443 
学生78班级118 114 93 22 38 73 66 69 79 572 
学生79班级384 10 72 94 30 95 32 41 56 514 
学生80班级2113 39 10 23 28 33 32 23 308 
学生81班级383 36 13 13 89 15 39 71 72 431 
学生82班级352 68 39 22 16 75 37 95 413 
学生83班级390 132 20 36 86 69 39 95 567 
学生84班级161 89 67 10 33 31 99 34 428 
学生85班级183 93 105 79 19 30 84 500 
学生86班级188 143 19 56 56 36 89 77 573 
学生87班级170 115 66 36 76 16 89 468 
学生88班级317 60 49 80 12 99 30 356 
学生89班级1129 128 48 76 47 46 46 89 610 
学生90班级3143 14 86 69 55 85 43 499 
学生91班级244 127 143 22 18 62 33 44 500 
学生92班级137 41 130 71 17 61 68 19 445 
学生93班级345 17 22 10 90 83 31 11 310 
学生94班级219 40 99 59 77 90 68 462 
学生95班级1126 19 68 91 53 68 23 87 85 620 
学生96班级1131 126 126 53 13 18 70 85 33 655 
学生97班级153 47 33 87 98 98 62 28 95 601 
学生98班级1107 88 49 91 17 66 24 58 506 
学生99班级1118 145 69 70 29 43 13 45 536 
学生100班级248 115 63 93 53 91 59 93 623 

二、整体的框架

1、最下面的是原始的Table。

2、用左边的table覆盖在上层,命名为tableColumn。

3、用上部的table覆盖在更上层,命名为tableHead。

4、在左上角覆盖固定不动的table,命名为tableFix。

自然在各自的外层都要用div框起来,以便后面的浮动和覆盖等等,所以结构的html如下:

<div id="MyTable_tableLayout"> <div id="MyTable_tableFix"><table id="MyTable_tableFixClone" border="1" cellspacing="0" cellpadding="0"></table> </div><div id="MyTable_tableHead"> <table id="MyTable_tableHeadClone" border="1" cellspacing="0" cellpadding="0"></table> </div> <div id="MyTable_tableColumn"><table id="MyTable_tableColumnClone" border="1" cellspacing="0" cellpadding="0"></table> </div><div id="MyTable_tableData"> <table id="MyTable" border="1" cellspacing="0" cellpadding="0"></table> </div></div>

三、代码实现

整体框架结构出来后,下面要做的就是确定每个区域的高度,宽度,定位就算完成了。

首先确定下调用接口,调用时已经有table了,我们希望很简单的一行js即可高定,就用了一个方法实现。由于使用项目中table线宽全部都是1,所以未考虑其他线宽问题。

function FixTable(TableID, FixColumnNumber, width, height)

第一个参数:table的ID,第二个参数:要锁定的列数目,第三个参数:显示的宽度,第四个参数:显示的高度。

(一)首先创建上面所诉的框架出来:

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"); });

(二)计算tableFix,tableHead的高度:

var HeadHeight = $("#" + TableID + "_tableHead thead").height(); HeadHeight += 2; $("#" + TableID +"_tableHead").css("height", HeadHeight); $("#" + TableID + "_tableFix").css("height", HeadHeight);

(三)计算tableFix,tableColumn的宽度:

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);

(四)为tableHead和tableColumn添加联动的滚动条事件:

$("#" + TableID + "_tableData").scroll(function () { $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft()); $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID +"_tableData").scrollTop()); });

(五)为较小的table修正样式:

if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableHead table").width()) { $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableHead table").width()); $("#" + TableID +"_tableData").css("width", $("#" + TableID + "_tableHead 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").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" }); $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset()); $("#" + TableID + "_tableHead").offset($("#" + TableID +"_tableLayout").offset()); $("#" + TableID + "_tableColumn").offset($("#" + TableID +"_tableLayout").offset()); $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());

 

四、代码如下

 

完整代码如下:

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());
}


ps:之前的代码有点bug,在高度不够的时候定位会产生错误,在此修正了。

ps2:代码中使用了jquery的msie方法,此方法在1.9.x中删除,需要添加jQuery Migrate Plugin引用,在jQuery官网即可下载到。

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页