superTables.js

本文介绍如何使用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>

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

///////////////////////////////////////////////////////////////////////////////////////// // Super Tables v0.30 - MIT Style License // Copyright (c) 2008 Matt Murphy --- www.matts411.com // // Contributors: // Joe Gallo ///////////////////////////////////////////////////////////////////////////////////////// ////// TO CALL: // new superTable([string] tableId, [object] options); // ////// OPTIONS: (order does not matter ) // cssSkin : string ( eg. "sDefault", "sSky", "sOrange", "sDark" ) // headerRows : integer ( default is 1 ) // fixedCols : integer ( default is 0 ) // colWidths : integer array ( use -1 for auto sizing ) // onStart : function ( any this.variableNameHere variables you create here can be used later ( eg. onFinish function ) ) // onFinish : function ( all this.variableNameHere variables created in this script can be used in this function ) // ////// EXAMPLES: // var myST = new superTable("myTableId"); // // var myST = new superTable("myTableId", { // cssSkin : "sDefault", // headerRows : 1, // fixedCols : 2, // colWidths : [100, 230, 220, -1, 120, -1, -1, 120], // onStart : function () { // this.start = new Date(); // }, // onFinish : function () { // alert("Finished... " + ((new Date()) - this.start) + "ms."); // } // }); // ////// ISSUES / NOTES: // 1. No quirksmode support (officially, but still should work) // 2. Element id's may be duplicated when fixedCols > 0, causing getElementById() issues // 3. Safari will render the header row incorrectly if the fixed header row count is 1 and there is a colspan > 1 in one // or more of the cells (fix available) /////////////////////////////////////////////////////////////////////////////////////////
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值