js方式锁定表头
js代码修改版：
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();
$("#" + 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+=1;//左边栏最右侧边框1像素，不加则没有边框
$("#" + 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": "#00765c" });
$("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "#00765c" });
$("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "#00765c" });
$("#" + 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());
}
$(document).ready(function () {
//固定表头
FixTable("MyTable", 3, $(window).width()-40, 315);
});css代码：
<style type="text/css">
* { padding: 0; margin: 0}
tr th{
text-align: center;
font:bold 12px '宋体';
border: 0px;
color: #ffffff;
border-bottom: 0px;
border-right:1px solid #000000;
border-top:1px solid #000000;
}
.left{
font:bold 12px '宋体';
text-align:center;
border-right: 1px solid #000;
border-bottom:1px solid #000;
}
.data{
font:12px '宋体';
text-align:right;
border-right: 1px solid #000;
border-bottom:1px solid #000;
}
</style>
table代码：
<pre name="code" class="html"><table
style=" width: ${fn:length(rs[1])*50+300 };height: ${fn:length(rs[2])*25+60 }; color: #000000; font-size: medium; "
id="MyTable"
cellspacing="0"
cellpadding="0"
>
<thead>
<tr style="height:30px;">
<th style="text-align: center; width: 100px;border-bottom:1px solid #000;border-left:1px solid #000000;" rowspan="2">
地区
</th>
<th style="text-align: center; width: 40px;border-bottom:1px solid #000;" rowspan="2">
序号
</th>
<th style="text-align: center; width: 160px;border-bottom:1px solid #000;" rowspan="2">
零售点
</th>
//这里可以写模拟数据，生成表头
<c:forEach items="${rs[0]}" var="r" varStatus="sta">
<c:if test="${sta.index==0}">
<th style="text-align: center;" colspan="${r['SUM'] }">
${r['PPMC'] }
</th>
</c:if>
<c:if test="${sta.index!=0}">
<th style="text-align: center;" colspan="${r['SUM'] }">
${r['PPMC'] }
</th>
</c:if>
</c:forEach>
</tr>
<tr style="height:30px;">
// 这里可以写模拟数据，生成表头
<c:forEach items="${rs[1]}" var="r" varStatus="sta">
<c:if test="${sta.index==0}">
<th style="text-align: center; width: 50px;border-bottom:1px solid #000;">
${r['GGJC'] }
</th>
</c:if>
<c:if test="${sta.index!=0}">
<th style="text-align: center; width: 50px;border-bottom:1px solid #000;">
${r['GGJC'] }
</th>
</c:if>
</c:forEach>
</tr>
</thead>
<tbody>
<!--
这里包括了左边栏和右边数据部分，其实就是一个的tr，模拟数据解决就可以了
-->
<!-- 数据行 -->
<!-- 合并城市单元格 -->
<c:set value="${rs[3]}" var="csCnt"></c:set>
<c:set value="0" var="csbs"></c:set>
<c:set value="1" var="i"></c:set>
<c:forEach items="${rs[2]}" var="r" varStatus="s">
<tr style="height:25px;">
<c:if test="${csbs==0 || csbs!=r['CSBS']}">
<td class="left" style="border-left:1px solid #000;background-color:white;" rowspan="${csCnt[r['CSBS']] }">
${r['CSMC'] }
</td>
</c:if>
<c:if test="${csbs==0 || csbs!=r['CSBS']}">
<c:set value="1" var="i"></c:set>
<td class="left" style="background-color:white;">
${i }
</td>
<c:set value="${i+1}" var="i"></c:set>
</c:if>
<c:if test="${csbs==r['CSBS']}">
<td class="left" style="background-color:white;">
${i }
</td>
<c:set value="${i+1}" var="i"></c:set>
</c:if>
<td class="left" style="background-color:white;">
<c:if test="${r['LSDMC']=='' || r['LSDMC']==null}">
--
</c:if>
<c:if test="${r['LSDMC']!='' && r['LSDMC']!=null}">
${r['LSDMC']}
</c:if>
</td>
<c:set value="${r['CSBS'] }" var="csbs"></c:set>
<!-- 根据零售店获取的每行数据 -->
<c:set value="${rs[4][r['LSDBS']] }" var="rData"></c:set>
<c:forEach items="${rs[1]}" var="v" varStatus="ss">
<td class="data">
<c:if test="${rData[v['GGBS']]==null ||rData[v['GGBS']]=='' }">
--
</c:if>
<c:if test="${rData[v['GGBS']]!=null && rData[v['GGBS']]!='' }">
<fmt:formatNumber pattern="#,###.0">
${rData[v['GGBS']] }
</fmt:formatNumber>
</c:if>
</td>
</c:forEach>
</tr>
</c:forEach>
</tbody>
</table>这里需要注意的是，左边栏最右边的边框线可能会没有，在js代码中有一句
ColumnsWidth+=1;//左边栏最右侧边框1像素，不加则没有边框 这句话可以解决border为1px的线，一般都是1像素，如果多了自己加。
1293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
