1,简短说明
使用 superTables.js 实现:
@1:复杂表头固定(向下滚动时表头固定,向右滚动时表头跟随数据列)
@2:复杂表头列点击事件(如:列数据的升降序)
@3:左侧列固定
2,案例
html
<html>
<head>
<link rel="stylesheet" href="css/tableStyle.css" />
<link rel="stylesheet" href="css/superTables.css" />
</head>
<body>
<!-- 简单结构 -->
<div id="div_container">
<div class="fakeContainer">
<table id="myTableId">
<thead>
<tr>
<th rowspan="2">1</th><th colspan="2">2</th>
<tr>
<tr>
<th>2-1</th><th>2-2</th>
<tr>
</thead>
<tbody>
<tr>
<td>1-1</td><td>2-1</td><td>2-2</td>
<tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
js
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/superTables.js"></script>
<script>
var myST = new superTable("myTableId", {
cssSkin : "sDefault",
headerRows : 1, // 头部固定行数
fixedCols : 2, // 固定列数
colWidths : [100, 230, 220, -1, 120, -1, -1, 120], // 列宽设置,-1为自动匹配列宽
onStart : function () {
this.start = new Date();
},
onFinish : function () {
alert("Finished... " + ((new Date()) - this.start) + "ms.");
}
});
$("#div_container").css("width","1000px");//这个宽度是容器宽度,不同容器宽度不同
$(".fakeContainer").css("height","400px");//这个高度是整个table可视区域的高度,不同情况高度不同
//.sData是调用superTables.js之后页面自己生成的 这块就是出现滚动条 达成锁定表头和列的效果
$(".sData").css("width","885px");//这块的宽度是用$("#div_container")的宽度减去锁定的列的宽度
$(".sData").css("height","325px");//这块的高度是用$("#div_container")的高度减去锁定的表头的高度
</script>
3,补充
@1:表头样式调 th 标签
@2:表头点击事件,需要找到覆盖在上面的标签,浏览器看不出来
需要在 superTables.css 中 对比 .sHeader、.sHeaderInner、.sFHeader
会发现最外层显示的是 .sHeaderInner 对应的标签
@3:列宽处理,数据有几列,对应设值即可:
colWidths : [100, 230, 220, -1, 120, -1, -1, 120], // 列宽设置,-1为自动匹配列宽
@4:无数据时,table处理:
$("#div_container").css(“width”,“1000px”);//这个宽度是容器宽度,不同容器宽度不同
$(".fakeContainer").css(“height”,“400px”);//这个高度是整个table可视区域的高度,不同情况高度不同
简单分析:两个div包裹,.fakeContainer对应的div负责滚动条,若左侧固定几列,.fakeContainer对应的div的宽度要做相应调整,若无数据时,固定列属性要去掉,要不样式会乱掉,这里mark一下
@5:实际案例效果图
4,相关附件下载
http://www.17sucai.com/pins/25287.html
5,参考链接
http://supertable.sourceforge.net/index.shtml
http://www.codeforge.cn/read/215923/superTables.css__html