superTables锁定表头插件示例

最新推荐文章于 2022-02-20 14:30:04 发布
翻译 最新推荐文章于 2022-02-20 14:30:04 发布 · 4.6k 阅读 · 0
文章标签：

#javascript #插件 #js 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'supertable.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link href="js/superTables/superTables.css" rel="Stylesheet" type="text/css" />
	<script type="text/javascript" src="js/superTables/superTables.js"></script>
	<style>
		.fakeContainer {
		    margin: 20px;
		    padding: 0px;
		    border: none;
		    width: 640px;
		    height: 220px;
		    overflow: hidden;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
		
		   /* new superTable("demoTable", {
		        cssSkin : "sSky", //颜色方案
		        fixedCols : 1 //固定几列
		    });*/
		
		
		    //cssSkin :  "sDefault", "sSky", "sOrange", "sDark"
			new superTable("demoTable", {cssSkin : "sOrange",
				fixedCols : 2,
				headerRows :1,
				onStart : function () {
				   this.start = new Date();
				},
				onFinish : function () {
				   alert("Finished... " + ((new Date()) - this.start) + "ms.");
				}
			});
	
		};
	</script>
	</head>
	<body>
		<!--table外必须要有一个DIV包围table样式为fakeContainer的-->
		<div class="fakeContainer">
			<table id="demoTable"> 
				<tr>
					<th>日账明细ID</th>
					<th>账单类型</th>
					<th>票号</th>
					<th>结算对象ID</th>
					<th>结算对象名称</th>
					<th>账期日期</th>
					<th>企业名称</th>
					<th>订单号</th>
					<th>出账时间</th>
					<th>结算金额</th>
					<th>企业名称</th>
					<th>订单号</th>
					<th>出账时间</th>
					<th>结算金额</th>
				</tr>
				<tr>
				    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>
				   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				<td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				</tr>
				<tr>
				    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>
				   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				<td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				</tr>
				<tr>
				    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>
				   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				<td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				</tr>
				<tr>
				    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>
				   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				<td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				</tr>
				 <tr>
				    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>
				   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				<td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				</tr>
				<tr>
				    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>
				   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				<td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				</tr>
				<tr>
				    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>
				   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				<td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				</tr>
				<tr>
				    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>
				   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				<td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				</tr>
				<tr>
				    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>
				   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				<td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				</tr>
				<tr>
				    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>
				   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				<td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				</tr>
				<tr>
				    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>
				   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				<td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				</tr>
				<tr>
				    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>
				   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				<td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				</tr>
				<tr>
				    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>
				   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				<td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				</tr>
				<tr>
				    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>
				   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				<td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				</tr>
				<tr>
				    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>
				   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				<td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				</tr>
				<tr>
				    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>
				   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				<td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				</tr>
				<tr>
				    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>
				   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				<td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				</tr>
				<tr>
				    <td>47479</td><td>普通账单</td><td>7844101944436</td><td>100000004</td><td>电子商旅服务有限公司</td><td>20130709</td>
				   <td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				<td>电子商旅服务有限公司</td><td>A201307090000046</td><td>2013-07-10 14:56:04</td><td>1440.0</td>
				</tr>
			</table>
		</div>
	</body>
</html>

效果：

插件下载地址：http://pan.baidu.com/s/1mgNuTde

表头固定插件StickyTableHeaders.zip
07-19
StickyTableHeaders 可以在页面滚动时将表头固定在屏幕顶部，这样能使大型的列表能更方便使用。
固定table表头的插件
08-08
固定table表头的插件.zip
Table 固定表头插件
12-20
Fixed Header Table 固定表头 插件
supertable
03-27
colWidths : [100, 230, 220, -1, 120, -1, -1, 120]
固定表头的jQuery插件
07-25
这是一个可以固定表头的jQuery插件。当表格向下滚动时，表头不会跟着动。兼容IE6.7.8.9 ,Chrome ,FF 国外的
Excel 如何锁定表头
热门推荐
ZSJZ_liuzian的博客
08-29 1万+
Excel如何锁定表头 当一个Excel表格内容过多，我们滑动到底部位置时看不到表头，给数据的输入、修改与读取带来不便，因此我们需要锁定表头。 在顶部可以看见表头。 在底部看不见表头 如何锁定 一行（列） 黄色区域为表头。 1、单击“视图”。 2、单击“冻结窗格”。 3、单击“冻结首行（列）”即可锁定表头。 冻结首列后效果如下：无论向右滚动多少，第一列依然可见。...
html table实现复杂表头的示例代码
11-20
复杂表格一般是用到td的两个属性：rowspan 、colspan属性值。 ... 　(1)rowspan 属性规定单元格可横跨的行数;...多表头表格</title> </head> <body> <table id="tab" cellpadding="1
Ext表格列锁定+多表头插件
06-29
在本文中，我们将深入探讨"Ext表格列锁定+多表头插件"这一主题，它在Ext3.4版本中的实现及其相关技术。这个插件主要用于改进Ext Grid的用户体验，特别是处理大量数据时，通过列锁定和多表头功能，使得用户能够更有效...
jQuery fixed-table.js锁定表头Table插件特效代码.zip
11-16
本主题涉及的是使用jQuery实现的一个特定功能——"fixed-table.js"，这是一个用于创建固定表头的Table插件，尤其适用于大数据量表格，确保在滚动时表头始终可见，从而提供更好的用户体验。 jQuery fixed-table.js...
JS锁定表头锁定列1.4
11-24
通过查看和运行示例，开发者可以直观地了解如何将锁定表头和列的功能集成到自己的项目中。 综上所述，"JS锁定表头锁定列1.4"是一个专注于改善大型数据表格用户体验的原生JavaScript库。其核心功能包括表头和列的...
jquery简单好用的固定表头插件
03-27
jquery简单好用的固定表头插件，简单好用，支持简单配置，多种方式
super-table:使用Super Table为您的Craft工作流程加油
04-22
适用于Craft CMS的超级表插件 超级表是Craft CMS字段类型，可让您创建功能强大的表。 您可以在表中利用所有喜欢的本机Craft字段类型，包括资产，用户，条目，甚至矩阵。 还支持许多第三方字段类型。 特征 3种不同的布局，提供最大的灵活性； 行，表和矩阵。 将您的字段嵌套在Matrix块中。 通过Matrix>超级表> Matrix进行3级嵌套来发疯。 静态布局选项-用于何时需要对字段进行分组但不可重复的字段。 无限使用，永久免费。 文献资料 访问“以获取所有文档，指南，价格和开发人员资源。 更新中 更新至Craft 3.5+ 3级嵌套仅支持“矩阵”>“超级表”>“矩阵”字段组合。 在Craft 3.5+中，您可以创建不同的组合，以及更多级别的“超级表/矩阵”字段，但是它们不起作用。 这是由于对Matrix进行的Craft 3.5+更改进行了大量必要的精简。 我们
jQuery自动固定表头插件freezeheader.js
01-28
插件描述：固定表头表格插件.有三种固定表头的表格效果可以使用。
基于jquery的固定html table表头/列头插件 （加强版）
10-06
基于jquery的固定html table表头/列头插件jquery.fixedtable.js; 兼容主流浏览器，亲测（IE6,IE6+,firefox,chrome,opera）。第一版仅支持所固定列数自定义，本加强版新增所固定行数自定义。
superTable,html+css+js轻量冻结上左表头，实现上下左右滑动
09-06
该文件是基于html+css+javascript集成的轻量型table表格表头冻结滑动，通过js读取html中表格结构然后动态创建div或table来完成层叠拼接工作
bootstrap和jquery表格头固定位置插件
ICode联盟
02-20 179
下载地址 decapitate是一款基于bootstrap框架的Table表格头固定jquery插件，该jquery插件可以在页面向下滚动时，将表格头固定在视口的顶部。 dd:
好用的自适应表格插件-bootstrap table （支持固定表头）
weixin_30344131的博客
04-07 371
最近工作中找到了一款十分好用的表格插件，不但支持分页，样式，搜索，事件等等表格插件常有的功能外，最主要的就是他自带的冻结表头功能，让开发制作表格十分容易，不过网上大多都是英文文档，第一次使用会比较麻烦，因此在此记录一些简单的使用方式，方便扩展学习 首先是简单的页面形式，大家可以按照平常画表格的方式来创建html表格，然后通过js控制特殊的样式等操作（优点是表格更加直观，方便调整表格样式等，速度快...
SuperTables.js文件,我看网上不太好找这个，放一个在这里，侵删
06-12
///////////////////////////////////////////////////////////////////////////////////////// // 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) /////////////////////////////////////////////////////////////////////////////////////////
jQuery粘性表插件表格头部固定在顶部
ICode联盟
11-29 366
下载地址 粘性的表是一个简单的jQuery插件使表头粘上滚动,你永远不会松散表标题。(function($){ $.fn.stickytable = function(options){ var settings = $.extend({},$.fn.stickytable.defaults, options); return this.each(function(index){ var table = $(this); var fixedheader = $(" "); var tableOffs
实现锁定表头表列的简洁JavaScript代码示例
锁定表头和表列是网页前端设计中的一个重要功能，它允许用户在滚动表格内容时，保持表头和表列的位置不变，从而提高数据的可读性和用户体验。 #### 2. 使用HTML实现表格基础结构 在HTML中，创建表格的基本结构通常...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值