superTables.js

最新推荐文章于 2019-04-23 18:08:27 发布

原创最新推荐文章于 2019-04-23 18:08:27 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#复杂表头 #superTables.js #superTable #固定表头 #表头

前端js插件专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用superTables.js实现复杂表格功能，包括表头固定、表头列点击事件、左侧列固定等。通过示例代码展示如何设置列宽、处理无数据情况，并提供相关下载和参考链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

<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，相关附件下载