`
younglibin
  • 浏览: 1207703 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

点击table首行列名按该列内容排序+冻结窗口

    博客分类:
  • js
阅读更多

注意 : 这里的只适用于  表头的 (即:首行的)td 和显示数据的td 个数相同:

 (点击IE提示 是否运行该页面的脚本 选择 否  ,否则 看不到 jsp 的全部内容 )

注意:这里使用时  一定要按目录放:最好不要改js的名字:js的名字在 js都用到,要改 就要同时改动:



 

jsp代码如下:

 

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%-- 
	页面功能说明	:冻结table 的第一行 并且可以  点击第一行的列名 按该列的 数据进行排列
	Author 	: 
	Date	: 07-11-2009
--%>
<form id="analyseCompareForm" name="analyseCompareForm" onsubmit="return true;" action="" method="post">

显示引入grid.js只需要这一个js
,其他的不用显示引入
   
    
<div class="history-item-title">历史对比分析结果列表</div>
<div id="container" class="grid" style="height:265px;" style="width:100%;">
<div id="body" class="grid-body" style="width:100%;">
<table width="100%" border="0"  cellpadding="" cellspacing="" class="listtable" style="TABLE-LAYOUT: fixed">
         <thead>
		
		<tr align="center" class="header">
        	<td nowrap>基站编号</td>
        	<td nowrap>基站名称</td>
        	<td nowrap>所属区域</td>
        	<td nowrap>所属 BSC</td>
        	<td nowrap>安装配置</td>
			<td nowrap>现网运行配置</td>
        	<td nowrap>第一小区</td>
        	<td nowrap>是否考核</td>
        	<td nowrap>处理状态</td>
        	
        	<td nowrap>基站类型</td>
        	<td nowrap>创建时间</td>
        	<td nowrap="nowrap">采集时间</td>           	  
		</tr>
		</thead>
		<tbody>
		
    		<tr title="  ">
    		  	<td nowrap>
    		  	<!-- 
    		  	<a href="#" title="查看对比结果"  onclick='viewRusult("F26C1AAC571846A0A264284B16E81488")'>
    		  		新建小区(04446)
    		  	 </a>
    		  	  -->
    		  	 新建小区(04446)
    		  	</td>
    		  	<td nowrap>
    		  	<a  href="#" title="查看对比消息" onclick=" goMessage('新建小区(04446)','' ) ">
    		  		XIMAFENG3
    		  	</a>
    		  	</td>    		  	
    		  	
					<td nowrap="nowrap" >济源市</td>
				
				
    		  	<td nowrap>215331</td>
    		  	<td nowrap></td>
    		  	<td nowrap>O(5)</td>
    		  	
				<td nowrap>04446</td>
				<td nowrap>
					
					是
				</td>
				<td nowrap="nowrap">
					否
					
				</td>
				
				
				<td nowrap>ULTRASITE</td>
				<td nowrap="nowrap">10-01-06 08:10</td>
    		  	
    		  	<td nowrap="nowrap">
								09-12-28 12:05
							</td>
			</tr>
		
    		<tr title="  ">
    		  	<td nowrap>
    		  	<!-- 
    		  	<a href="#" title="查看对比结果"  onclick='viewRusult("1DF33BCF9BE24CE081C7237B4B1AFEEA")'>
    		  		新建小区(22155)
    		  	 </a>
    		  	  -->
    		  	 新建小区(22155)
    		  	</td>
    		  	<td nowrap>
    		  	<a  href="#" title="查看对比消息" onclick=" goMessage('新建小区(22155)','' ) ">
    		  		JY1SHUIYUNZ2
    		  	</a>
    		  	</td>    		  	
    		  	
					<td nowrap="nowrap" >济源市</td>
				
				
    		  	<td nowrap>215331</td>
    		  	<td nowrap></td>
    		  	<td nowrap>O(4)</td>
    		  	
				<td nowrap>22155</td>
				<td nowrap>
					
					是
				</td>
				<td nowrap="nowrap">
					否
					
				</td>
				
				
				<td nowrap>FLEXI</td>
				<td nowrap="nowrap">10-01-06 08:10</td>
    		  	
    		  	<td nowrap="nowrap">
								09-12-28 12:05
							</td>
			</tr>
		
    		<tr title="  ">
    		  	<td nowrap>
    		  	<!-- 
    		  	<a href="#" title="查看对比结果"  onclick='viewRusult("8853045DA1544CE08A5A5B4222060C81")'>
    		  		新建小区(22265)
    		  	 </a>
    		  	  -->
    		  	 新建小区(22265)
    		  	</td>
    		  	<td nowrap>
    		  	<a  href="#" title="查看对比消息" onclick=" goMessage('新建小区(22265)','' ) ">
    		  		BEIPO2
    		  	</a>
    		  	</td>    		  	
    		  	
					<td nowrap="nowrap" >济源市</td>
				
				
    		  	<td nowrap>215331</td>
    		  	<td nowrap></td>
    		  	<td nowrap>O(1)</td>
    		  	
				<td nowrap>22265</td>
				<td nowrap>
					
					是
				</td>
				<td nowrap="nowrap">
					否
					
				</td>
				
				
				<td nowrap>FLEXI</td>
				<td nowrap="nowrap">10-01-06 08:10</td>
    		  	
    		  	<td nowrap="nowrap">
								09-12-28 12:05
							</td>
			</tr>
		
    		<tr title="  ">
    		  	<td nowrap>
    		  	<!-- 
    		  	<a href="#" title="查看对比结果"  onclick='viewRusult("BAF51ABCBF174218A4AC343D730F2F8E")'>
    		  		新建小区(22314)
    		  	 </a>
    		  	  -->
    		  	 新建小区(22314)
    		  	</td>
    		  	<td nowrap>
    		  	<a  href="#" title="查看对比消息" onclick=" goMessage('新建小区(22314)','' ) ">
    		  		ZHAOLIZH1
    		  	</a>
    		  	</td>    		  	
    		  	
					<td nowrap="nowrap" >济源市</td>
				
				
    		  	<td nowrap>215331</td>
    		  	<td nowrap></td>
    		  	<td nowrap>O(5)</td>
    		  	
				<td nowrap>22314</td>
				<td nowrap>
					
					是
				</td>
				<td nowrap="nowrap">
					否
					
				</td>
				
				
				<td nowrap>FLEXI</td>
				<td nowrap="nowrap">10-01-06 08:10</td>
    		  	
    		  	<td nowrap="nowrap">
								09-12-28 12:05
							</td>
			</tr>
		
    		<tr title="  ">
    		  	<td nowrap>
    		  	<!-- 
    		  	<a href="#" title="查看对比结果"  onclick='viewRusult("E71C4ECD9B4C4FECBD1D8B579C2BE077")'>
    		  		新建小区(21745)
    		  	 </a>
    		  	  -->
    		  	 新建小区(21745)
    		  	</td>
    		  	<td nowrap>
    		  	<a  href="#" title="查看对比消息" onclick=" goMessage('新建小区(21745)','' ) ">
    		  		JIANGZHUANG2
    		  	</a>
    		  	</td>    		  	
    		  	
					<td nowrap="nowrap" >济源市</td>
				
				
    		  	<td nowrap>217453</td>
    		  	<td nowrap></td>
    		  	<td nowrap>O(1)</td>
    		  	
				<td nowrap>21745</td>
				<td nowrap>
					
					是
				</td>
				<td nowrap="nowrap">
					否
					
				</td>
				
				
				<td nowrap>FLEXI</td>
				<td nowrap="nowrap">10-01-06 08:10</td>
    		  	
    		  	<td nowrap="nowrap">
								09-12-28 12:05
							</td>
			</tr>
		
    		<tr title="  ">
    		  	<td nowrap>
    		  	<!-- 
    		  	<a href="#" title="查看对比结果"  onclick='viewRusult("2AEB00AA634542DAB77974B6ECCE42BA")'>
    		  		新建小区(22379)
    		  	 </a>
    		  	  -->
    		  	 新建小区(22379)
    		  	</td>
    		  	<td nowrap>
    		  	<a  href="#" title="查看对比消息" onclick=" goMessage('新建小区(22379)','' ) ">
    		  		JY1ZYJSXY1
    		  	</a>
    		  	</td>    		  	
    		  	
					<td nowrap="nowrap" >济源市</td>
				
				
    		  	<td nowrap>215331</td>
    		  	<td nowrap></td>
    		  	<td nowrap>O(8)</td>
    		  	
				<td nowrap>22379</td>
				<td nowrap>
					
					是
				</td>
				<td nowrap="nowrap">
					否
					
				</td>
				
				
				<td nowrap>FLEXI</td>
				<td nowrap="nowrap">10-01-06 08:10</td>
    		  	
    		  	<td nowrap="nowrap">
								09-12-28 12:05
							</td>
			</tr>
		
    		<tr title="  ">
    		  	<td nowrap>
    		  	<!-- 
    		  	<a href="#" title="查看对比结果"  onclick='viewRusult("2B73472E42E94BFAB7CD3F026EC66A25")'>
    		  		新建小区(21089)
    		  	 </a>
    		  	  -->
    		  	 新建小区(21089)
    		  	</td>
    		  	<td nowrap>
    		  	<a  href="#" title="查看对比消息" onclick=" goMessage('新建小区(21089)','' ) ">
    		  		CANGFANGZHUANG
    		  	</a>
    		  	</td>    		  	
    		  	
					<td nowrap="nowrap" >济源市</td>
				
				
    		  	<td nowrap>215331</td>
    		  	<td nowrap></td>
    		  	<td nowrap>O(2)</td>
    		  	
				<td nowrap>21089</td>
				<td nowrap>
					
					是
				</td>
				<td nowrap="nowrap">
					否
					
				</td>
				
				
				<td nowrap>ULTRASITE</td>
				<td nowrap="nowrap">10-01-06 08:10</td>
    		  	
    		  	<td nowrap="nowrap">
								09-12-28 12:05
							</td>
			</tr>
		
    		<tr title="  ">
    		  	<td nowrap>
    		  	<!-- 
    		  	<a href="#" title="查看对比结果"  onclick='viewRusult("4D063D6A1546402E89B0BE4565BAC7D3")'>
    		  		新建小区(21389)
    		  	 </a>
    		  	  -->
    		  	 新建小区(21389)
    		  	</td>
    		  	<td nowrap>
    		  	<a  href="#" title="查看对比消息" onclick=" goMessage('新建小区(21389)','' ) ">
    		  		DIANYEDASHA1
    		  	</a>
    		  	</td>    		  	
    		  	
					<td nowrap="nowrap" >济源市</td>
				
				
    		  	<td nowrap>215331</td>
    		  	<td nowrap></td>
    		  	<td nowrap>O(2)</td>
    		  	
				<td nowrap>21389</td>
				<td nowrap>
					
					是
				</td>
				<td nowrap="nowrap">
					否
					
				</td>
				
				
				<td nowrap>METROSITE</td>
				<td nowrap="nowrap">10-01-06 08:10</td>
    		  	
    		  	<td nowrap="nowrap">
								09-12-28 12:05
							</td>
			</tr>
		
    		<tr title="  ">
    		  	<td nowrap>
    		  	<!-- 
    		  	<a href="#" title="查看对比结果"  onclick='viewRusult("CC490773F42A47819EE74762AEAB378A")'>
    		  		新建小区(21315)
    		  	 </a>
    		  	  -->
    		  	 新建小区(21315)
    		  	</td>
    		  	<td nowrap>
    		  	<a  href="#" title="查看对比消息" onclick=" goMessage('新建小区(21315)','' ) ">
    		  		BEIGUANQIAO2
    		  	</a>
    		  	</td>    		  	
    		  	
					<td nowrap="nowrap" >济源市</td>
				
				
    		  	<td nowrap>217453</td>
    		  	<td nowrap></td>
    		  	<td nowrap>O(4)</td>
    		  	
				<td nowrap>21315</td>
				<td nowrap>
					
					是
				</td>
				<td nowrap="nowrap">
					否
					
				</td>
				
				
				<td nowrap>ULTRASITE</td>
				<td nowrap="nowrap">10-01-06 08:10</td>
    		  	
    		  	<td nowrap="nowrap">
								09-12-28 12:05
							</td>
			</tr>
		
    		<tr title="  ">
    		  	<td nowrap>
    		  	<!-- 
    		  	<a href="#" title="查看对比结果"  onclick='viewRusult("08D277ED8A25497DAE7E5E2473716566")'>
    		  		新建小区(04076)
    		  	 </a>
    		  	  -->
    		  	 新建小区(04076)
    		  	</td>
    		  	<td nowrap>
    		  	<a  href="#" title="查看对比消息" onclick=" goMessage('新建小区(04076)','' ) ">
    		  		XUANHUALAOJU3
    		  	</a>
    		  	</td>    		  	
    		  	
					<td nowrap="nowrap" >济源市</td>
				
				
    		  	<td nowrap>215331</td>
    		  	<td nowrap></td>
    		  	<td nowrap>O(7)</td>
    		  	
				<td nowrap>04076</td>
				<td nowrap>
					
					是
				</td>
				<td nowrap="nowrap">
					否
					
				</td>
				
				
				<td nowrap>ULTRASITE</td>
				<td nowrap="nowrap">10-01-06 08:10</td>
    		  	
    		  	<td nowrap="nowrap">
								09-12-28 12:05
							</td>
			</tr>
		
		</tbody>
	</table>
	</div>
	</div>
	
</form>


<%@ include file="/common/footer.jsp"%>

 

由于用到的js 太长 ,这里粘不下,压缩文件 传在这里:

 

如果不能运行?在这里留言!共同进步

 

 

一下是我的运行结果:

首次进入时 显示 的结果:



 

按基站名称(升序)排序:



 按基站类型升序排序:

 

 

  • 大小: 10.6 KB
  • 大小: 48.3 KB
  • 大小: 47.5 KB
  • 大小: 17.4 KB
0
0
分享到:
评论
3 楼 旭少版 2010-10-26  
在IE 下 宽度似乎被你控制死了.......

总是会出现横纵双向滚动条..............
而且达不到 你的那样的显示效果
2 楼 旭少版 2010-10-25  
能提供完整点的  demo 吗
1 楼 dahaizwl 2010-06-05  
这个在数字排序时有点问题,是按照字符排序的,比如12,123,23排序后是:12,123,23或是23,123,12,这是怎么回事,文件看不懂,楼主能看懂不?

相关推荐

    html的table滚动时固定首行和首列

    html的table滚动时固定首行和首例,网上多为3个table拼合实现,现使用一个table实现

    table 冻结列原型

    总之,"table冻结列原型"是一个实用的网页开发工具,涉及到CSS布局、JavaScript事件处理和DOM操作等多个方面。对于想要提升用户体验的开发者和设计师来说,理解和掌握这种技术是非常有价值的。通过深入学习和实践,...

    pb数据窗口点击列名排序

    根据提供的标题、描述、标签及部分内容,我们可以了解到这段代码主要实现了在PowerBuilder应用程序中的数据窗口控件通过用户点击列头来进行升序与降序切换的功能。下面将详细解析这一功能的实现逻辑及其背后的关键...

    javascript 绘制表格table,可以固定首行,首列

    javascript 绘制表格table,可以固定首行,首列,其他内容滚动显示.兼容ie,firefox,chrome等浏览器.

    bootstrap-table-fixed-columns冻结列,并完善排序、列宽和合并行

    在原版的 `bootstrap-table-fixed-columns` 插件中,可能会遇到一些问题,如冻结列后排序功能失效、列宽显示不正确以及无法正常合并行。这些问题对于表格的正常使用和美观性都是不利的。描述中的内容表明,我们已经...

    H5 表格冻结首行,首列和最后一行

    页面显示表格,表格的首行冻结,首列冻结,最后一行也冻结,实现数据查看和合计查看的效果。DemoDemoDemoDemo

    web table + div + jquery 实现仿 excel 的冻结 首行 与 首列 完整Demo

    实用 table + div + Jquery 实现,没有实用IE特有的expression(), 所以 兼容性 很好。...核心思想: 用JQuery的clone 复制 出 4张表, 分别放于 4 个 div 中来实现 水平 垂直 滚动, 首行 首列 冻结效果。

    table的行列冻结、行冻结、列冻结

    本主题主要围绕"table的行列冻结、行冻结、列冻结"展开,讲解如何使用jQuery实现这一功能,并确保其在主流浏览器上的兼容性。 首先,"行列冻结"是指在表格中固定特定的行和列,即使在用户滚动页面时,这些行和列也...

    bootstraptable冻结列例子.doc

    总结来说,Bootstrap Table 的冻结列功能通过结合 `fixedColumns`、`fixedNumber` 和 `fixedRightNumber` 参数,使得在网页上处理大量数据时能更方便地查看和操作表格。通过合理配置这些参数,你可以根据需求定制出...

    bootstrap-table-冻结列样例

    这个"bootstrap-table-冻结列样例"是关于如何在Bootstrap Table中实现列冻结功能的一个实例。在网页设计中,特别是处理大数据表格时,冻结列是一项实用的功能,它允许用户在滚动表格时始终保持某些列(通常是标题或...

    el-table无限滚动+控制列是否显示+列排序(非json)

    在这个特定的案例中,我们关注的是如何实现`el-table`的无限滚动、列显示控制以及非JSON方式的列排序。下面将详细阐述这些功能的实现方法。 首先,**无限滚动**是提高用户体验的一种常见技术,特别是在处理大量数据...

    完美解决table首行首列固定滚动条适应表格宽度

    1、数据较多时需要横向竖向滚动,很多数值记不清谁是谁了,所以需要主要标题内容需要固定。 2、通常的首行首列的固定,下方滚动条左侧会空缺一块,不够美观,我加了一层悬浮的div 给予适应

    可固定TABLE表格的首行与首列,可拖动查看更多内容

    标题中的“可固定TABLE表格的首行与首列,可拖动查看更多内容”是指在网页设计中,使用HTML的表格(TABLE)元素时,通过CSS和JavaScript技术实现的一种交互功能。这种功能允许用户在滚动表格内容时,表格的表头...

    sort.js实现table表单点击列名排序

    table列点击排序功能JS实现,表单table显示的时候,点击表单列名实现升序以及降序功能!

    实现table表格可按行拖拽,按列排序,并可以保存排序后的结果

    "实现table表格可按行拖拽,按列排序,并可以保存排序后的结果"是一个常见的需求,尤其适用于数据展示和管理的场景。这里我们将详细探讨如何利用jQuery、jQuery.tablesorter和jQuery.tablednd_0_5这三个JavaScript库...

    纯CSS渲染的html5冻结固定table表格首行首列示例

    纯CSS渲染的html5冻结固定table表格首行首列示例,完美滚动不出现空白线条

    table的行列冻结

    在网页设计和开发中,"table的行列冻结"是一个常见的需求,特别是在处理大量数据时,为了提高用户体验,用户可能希望某些列或行始终保持可见,即使他们滚动页面。这个功能允许用户查看表格的上下文信息,而无需手动...

    table冻结表头

    然而,当表格内容过多,滚动查看时,表头往往会被滚动条遮挡,导致用户难以对应列名与数据。为了解决这个问题,"table冻结表头"插件应运而生。这个插件专门用于实现表格的头部和/或列的冻结,使得在浏览长表格时,...

    html table列自定义排序排序

    table table自定义列排序;目前支持数值排序,文本(支持中文)排序; 示例: var option = { tableid: '#tableid', sortindex: 7, sorttype: "down", sortby: "text" }; $("#tableid").sortTable(option);

Global site tag (gtag.js) - Google Analytics