对于锁定表头和固定列(Fixed table head and columns)文章中所引用的function FixTable(TableID, FixColumnNumber, width, height)方法，在页面实现后，几个层之间列的高度和宽度有对不齐的情况，因此，对该方法进行了改写，列的高度实现了完全对齐，但列的宽度未完全实现对齐，有部分列出现稍许错位。可能是几个层的叠加的实现方式会出现的问题，后续考虑换一种方式实现，以解决错位的问题。
View Code
1 function FixTable(TableID, FixColumnNumber, width, height) { 2 if ($("#" + TableID + "_tableLayout").length != 0) { 3 $("#" + TableID + "_tableLayout").before($("#" + TableID)); 4 $("#" + TableID + "_tableLayout").empty(); 5 } 6 else { 7 $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; " + width + "px;'></div>"); 8 } 9 10 $('<div id="' + TableID + '_tableFix"></div>' 11 + '<div id="' + TableID + '_tableHead"></div>' 12 + '<div id="' + TableID + '_tableColumn"></div>' 13 + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout"); 14 15 //_tableFix：表题头的锁定列；_tableHead：表题头的全部列；_tableColumn：表题头锁定列对应的所有行；_tableData：数据层。 16 var oldtable = $("#" + TableID); 17 18 var tableFixClone = oldtable.clone(true); 19 tableFixClone.attr("id", TableID + "_tableFixClone"); 20 $("#" + TableID + "_tableFix").append(tableFixClone); 21 var tableHeadClone = oldtable.clone(true); 22 tableHeadClone.attr("id", TableID + "_tableHeadClone"); 23 $("#" + TableID + "_tableHead").append(tableHeadClone); 24 var tableColumnClone = oldtable.clone(true); 25 tableColumnClone.attr("id", TableID + "_tableColumnClone"); 26 $("#" + TableID + "_tableColumn").append(tableColumnClone); 27 $("#" + TableID + "_tableData").append(oldtable); 28 29 $("#" + TableID + "_tableLayout table").each(function () { 30 $(this).css("margin", "0"); 31 }); 32 33 34 35 var AllHeight = $("#" + TableID + "_tableData").height(); 36 var HeadHeight = $("#" + TableID + "_tableColumn th").height(); 37 HeadHeight += 2; 38 $("#" + TableID + "_tableHead ").css("height", HeadHeight); 39 $("#" + TableID + "_tableFix ").css("height", HeadHeight); 40 $("#" + TableID + "_tableColumn").css("height", AllHeight); 41 42 43 //--设定_tableFix，_tableColumn层的宽度----- 44 var ColumnsWidth = 0; 45 var ColumnsNumber = 0; 46 var oneColumnsNumber=0 47 $("#" + TableID + "_tableData tr:last td:lt(" + FixColumnNumber + ")").each(function () { 48 49 ColumnsWidth += $(this).outerWidth(true); 50 ColumnsNumber++; 51 }); 52 53 ColumnsWidth += 10; 54 55 if ($.browser.msie) { 56 switch ($.browser.version) { 57 case "7.0": 58 if (ColumnsNumber >= 3) ColumnsWidth--; 59 break; 60 case "8.0": 61 if (ColumnsNumber >= 2) ColumnsWidth--; 62 break; 63 } 64 } 65 $("#" + TableID + "_tableColumn").css("width", ColumnsWidth); 66 $("#" + TableID + "_tableFix").css("width", ColumnsWidth); 67 //设置_tableHead的宽度 68 var allNumber=24; 69 $("#" + TableID + "_tableData tr:last td:lt(" + allNumber + ")").each(function () { 70 71 oneColumnsWidth = $(this).outerWidth(true); 72 oneColumnsNumber++; 73 var ee=oneColumnsWidth-2 74 $("#"+TableID+"_tableHead .t"+oneColumnsNumber).css("width",ee); 75 76 var cc=oneColumnsNumber-1 77 var aa=$("#reportTable_tableHead .t"+oneColumnsNumber).width(); 78 var bb=$("#reportTable_tableData tr:last td:eq("+cc+")").width(); 79 alert(oneColumnsWidth+"::"+ee+"::"+aa+"::"+bb+":t"+oneColumnsNumber) 80 81 }); 82 83 84 85 //--设定_tableFix，_tableColumn层的宽度----- 86 87 $("#" + TableID + "_tableData").scroll(function () { 88 $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft()); 89 $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop()); 90 }); 91 92 $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50","border-collapse":"collapse","border":"solid #999","border-width":"1px 0 0 1px","background-color":"yellow" } ); 93 $("#" + TableID + "_tableFix th").css({"border":"solid #A9A9A9","border-width":"0 1px 1px 0"}); 94 $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width-19, "position": "relative", "z-index": "65","border-collapse":"collapse","border":"solid #999","border-width":"1px 0 0 1px","background-color":"yellow" }); 95 $("#" + TableID + "_tableHead th").css({"border":"solid #A9A9A9","border-width":"0 1px 1px 0"}); 96 $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height-17 , "position": "relative", "z-index": "40","border-collapse":"collapse","border":"solid #999","border-width":"1px 0 0 1px","background-color":"blue" }); 97 $("#" + TableID + "_tableColumn th").css({"border":"solid #A9A9A9","border-width":"0 1px 1px 0"}); 98 $("#" + TableID + "_tableColumn td").css({"border":"solid #A9A9A9","border-width":"0 1px 1px 0"}); 99 $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35","border-collapse":"collapse","border":"solid #999","border-width":"1px 0 0 1px","background-color":"red" }); 100 $("#" + TableID + "_tableData th").css({"border":"solid #A9A9A9","border-width":"0 1px 1px 0"}); 101 $("#" + TableID + "_tableData td").css({"border":"solid #A9A9A9","border-width":"0 1px 1px 0"}); 102 103 104 $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset()); 105 $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset()); 106 $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset()); 107 $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset()); 108 109 if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) { 110 $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width()); 111 $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() ); 112 } 113 if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) { 114 $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height()); 115 $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableFix table").height() ); 116 } 117 }
网上还有一种HTML Table表格双向滚动控制的实现方法，通过设定特定列的CSS来实现，如下图所示：
但在设定CSS时，使用了expression行为，只有IE才能识别，其他浏览器不通用，所以限制了使用范围。
在此实现思路的基础上，对锁定表头和固定列(Fixed table head and columns)文章中所列的方法进行改写，以jquery实现此效果，以满足各浏览器的展现。
一、设定CSS
<style > #reportTable { border-collapse:collapse; /* 关键属性：合并表格内外边框(其实表格边框有2px，外面1px，里面还有1px哦) */ border:solid #999; /* 设置边框属性；样式(solid=实线)、颜色(#999=灰) */ border-width:1px 0 0 1px; /* 设置边框状粗细：上 右 下 左 = 对应：1px 0 0 1px */ } #reportTable th,#reportTable td {border:solid #A9A9A9; border-width:0 1px 1px 0; } .tabelFontBold{ font-weight: bold; } .newLocked { z-index: 30; position: relative; background-color: #CAE8EA; text-align: center; } .newHLocked { z-index: 10; position: relative; text-align: center; background-color: #ffffff; } .newVLocked { z-index: 20; position: relative; background-color: #CAE8EA ; text-align: center; } </style>
二、JS函数
/*报表获取初始化容器大小*/ function initSize(w,h) //函数：获取尺寸 { //获取窗口宽度 if (window.innerWidth) { winWidth = window.innerWidth; } else if ((document.body) && (document.body.clientWidth)) { winWidth = document.body.clientWidth; //获取窗口宽度 } if (window.innerHeight) { winHeight = window.innerHeight; } else if ((document.body) && (document.body.clientHeight)) { winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测，获取窗口大小 } if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; } newWidth = winWidth-w ; newHeight = winHeight*h ; }
1 function FixTable(TableID, width, height) { 2 3 $("#" + TableID).after("<div id='" + TableID + "_tableData' style='overflow:hidden;height:" + height + "px; " + width + "px;'></div>"); 4 5 var oldtable = $("#" + TableID); 6 $("#" + TableID + "_tableData").append(oldtable); 7 $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative"}); 8 9 $("#" + TableID + "_tableData").scroll(function () { 10 11 $("#" + TableID + "_tableData .newLocked").css("left",$("#" + TableID + "_tableData").scrollLeft()); 12 $("#" + TableID + "_tableData .newHLocked").css("left",$("#" + TableID + "_tableData").scrollLeft()); 13 $("#" + TableID + "_tableData .newLocked").css("top",$("#" + TableID + "_tableData").scrollTop()); 14 $("#" + TableID + "_tableData .newVLocked").css("top",$("#" + TableID + "_tableData").scrollTop()); 15 16 }); 17 }
三、调用函数：
1 $(document).ready(function(){ 2 3 initSize(10,0.72); 4 5 FixTable("reportTable",newWidth, newHeight); 6 7 });
四、HTML中设定class
1 <table id="reportTable" border="1"> 2 <thead > 3 <tr > 4 <th class="newLocked" rowspan="2" nowrap="nowrap">序 号</th> 5 <th class="newLocked" rowspan="2" nowrap="nowrap" >合同名称</th> 6 <th class="newLocked" colspan="5" nowrap="nowrap">合同基本情况</th> 7 <th class="newVLocked" rowspan="2" nowrap="nowrap">截止本年前<br/>累计支付金额</th> 8 <th class="newVLocked" rowspan="2" nowrap="nowrap">占合同额%</th> 9 <th class="newVLocked" colspan="12" nowrap="nowrap">月度支付计划金额</th> 10 <th class="newVLocked" rowspan="2" nowrap="nowrap">年度支付<br/>计划总金额</th> 11 <th class="newVLocked" rowspan="2" nowrap="nowrap">本年末累计<br/>占合同额%</th> 12 <th class="newVLocked" rowspan="2" nowrap="nowrap">预计余额</th> 13 </tr> 14 <tr > 15 <th class="newLocked" nowrap="nowrap">合同<br/>签订单位</th> 16 <th class="newLocked" nowrap="nowrap">合同<br/>签订时间</th> 17 <th class="newLocked" nowrap="nowrap">合 同 价</th> 18 <th class="newLocked" nowrap="nowrap">规 模</th> 19 <th class="newLocked" nowrap="nowrap" >合同约定支付条件</th> 20 <th class="newVLocked" nowrap="nowrap" >一月</th> 21 <th class="newVLocked" nowrap="nowrap" >二月</th> 22 <th class="newVLocked" nowrap="nowrap" >三月</th> 23 <th class="newVLocked" nowrap="nowrap" >四月</th> 24 <th class="newVLocked" nowrap="nowrap" >五月</th> 25 <th class="newVLocked" nowrap="nowrap" >六月</th> 26 <th class="newVLocked" nowrap="nowrap" >七月</th> 27 <th class="newVLocked" nowrap="nowrap" >八月</th> 28 <th class="newVLocked" nowrap="nowrap" >九月</th> 29 <th class="newVLocked" nowrap="nowrap" >十月</th> 30 <th class="newVLocked" nowrap="nowrap" >十一月</th> 31 <th class="newVLocked" nowrap="nowrap" >十二月</th> 32 </tr> 33 </thead> 34 <c:forEach items="${ctrPlanReports}" varStatus="index" var="ctrPlanReport"> 35 <tr <c:if test="${ctrPlanReport.isFont==1}"> class="tabelFontBold"</c:if>> 36 <td class="newHLocked" nowrap="nowrap">${ctrPlanReport.no} </td> 37 <td class="newHLocked" <c:choose><c:when test="${ctrPlanReport.isFont==1}">style="text-align:center;"</c:when><c:otherwise>style="text-align:left;"</c:otherwise> </c:choose>>${ctrPlanReport.ctrName} </td> 38 <td class="newHLocked" nowrap="nowrap" >${ctrPlanReport.ctrDept} </td> 39 <td class="newHLocked" nowrap="nowrap"><fmt:formatDate value="${ctrPlanReport.signDate}" pattern="yyyy-MM-dd"/> </td> 40 <td class="newHLocked" style="text-align: right" nowrap="nowrap"><fmt:formatNumber pattern="#,##0.0000" value="${ctrPlanReport.ctrSum}" /> </td> 41 <td class="newHLocked" nowrap="nowrap">${ctrPlanReport.summary} </td> 42 <td class="newHLocked" nowrap="nowrap">${ctrPlanReport.payClause} </td> 43 <td nowrap="nowrap" style="text-align: right"><fmt:formatNumber pattern="#,##0.0000" value="${ctrPlanReport.countPlanPaySum}" /> </td> 44 <td nowrap="nowrap" style="text-align: right"><fmt:formatNumber pattern="#,##0.00" value="${ctrPlanReport.ctrPercent}" />% </td> 45 <td nowrap="nowrap" style="text-align: right"><fmt:formatNumber pattern="#,##0.0000" value="${ctrPlanReport.janSum}" /> </td> 46 <td nowrap="nowrap" style="text-align: right"><fmt:formatNumber pattern="#,##0.0000" value="${ctrPlanReport.febSum}" /> </td> 47 <td nowrap="nowrap" style="text-align: right"><fmt:formatNumber pattern="#,##0.0000" value="${ctrPlanReport.marSum}" /> </td> 48 <td nowrap="nowrap" style="text-align: right"><fmt:formatNumber pattern="#,##0.0000" value="${ctrPlanReport.aprSum}" /> </td> 49 <td nowrap="nowrap" style="text-align: right"><fmt:formatNumber pattern="#,##0.0000" value="${ctrPlanReport.maySum}" /> </td> 50 <td nowrap="nowrap" style="text-align: right"><fmt:formatNumber pattern="#,##0.0000" value="${ctrPlanReport.junSum}" /> </td> 51 <td nowrap="nowrap" style="text-align: right"><fmt:formatNumber pattern="#,##0.0000" value="${ctrPlanReport.julSum}" /> </td> 52 <td nowrap="nowrap" style="text-align: right"><fmt:formatNumber pattern="#,##0.0000" value="${ctrPlanReport.augSum}" /> </td> 53 <td nowrap="nowrap" style="text-align: right"><fmt:formatNumber pattern="#,##0.0000" value="${ctrPlanReport.sepSum}" /> </td> 54 <td nowrap="nowrap" style="text-align: right"><fmt:formatNumber pattern="#,##0.0000" value="${ctrPlanReport.octSum}" /> </td> 55 <td nowrap="nowrap" style="text-align: right"><fmt:formatNumber pattern="#,##0.0000" value="${ctrPlanReport.novSum}" /> </td> 56 <td nowrap="nowrap" style="text-align: right"><fmt:formatNumber pattern="#,##0.0000" value="${ctrPlanReport.decSum}" /> </td> 57 <td nowrap="nowrap" style="text-align: right"><fmt:formatNumber pattern="#,##0.0000" value="${ctrPlanReport.countYearPlanPaySum}" /> </td> 58 <td nowrap="nowrap" style="text-align: right"><fmt:formatNumber pattern="#,##0.00" value="${ctrPlanReport.yearCtrPercent}" />% </td> 59 <td nowrap="nowrap" style="text-align: right"><fmt:formatNumber pattern="#,##0.0000" value="${ctrPlanReport.planBalance}" /> </td> 60 </tr> 61 </c:forEach> 62 </table>
这四步完成后，其功能基本实现，只是在拖拽滚动条时，设定class的td、th应该是固定不动显示，但实际有左右或上下晃动的感觉。后期想办法解决。