分享ASP.NET固定GridView表头的方法

分享ASP.NET固定GridView表头的方法

——独立观察员 2015.03.27

最近接到一个任务,是需要将ASP.NET页面中的GridView的表头固定住,不随滚动条滚动,只是表身滚动。其实要实现得很完美,对我来说还是很难的,因为我对JS不熟练,虽然也自学过很多次,但总感觉一直入不了门,就像Android一样。还是C#给人一种平易近人的感觉,很好上手。

老大倒是给我指了条思路,说可以自己用html写表头,然后将GridView自身的表头隐藏就好了。我觉得这个听上去容易,真正做起来应该不简单吧。完全搞不定啊,还是问问度娘吧。

 

网上看到有人推荐这个


用了一下,确实可以,也没有”ScrollableGridPlugin.js方法“的表头与表身错位的问题。

但问题还是有的,就是表格中文字都未换行,后来找到了原因:

(原先是 “nowarp”)

 

附——”white-space”介绍

white-space属性设置如何处理元素内的空白。所有浏览器都支持 white-space 属性。

可能的值

描述

normal

默认。空白会被浏览器忽略。

pre

空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap

文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

pre-wrap

保留空白符序列,但是正常地进行换行。

pre-line

合并空白符序列,但是保留换行符。

inherit

规定应该从父元素继承 white-space 属性的值。

(值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。)

 

言归正传,还有的问题就是浏览器窗口缩小后右边比较难看,且底部滑动条形同虚设,滑动后并不能展现到右边的表格内容:


(尝试解决但未成功,请大家不吝赐教)

 

接下来先说说任务方面的处理:

由于菜单以下是iframe页面:


 

所以可通过设置这个iframe引用的页面的高度,使得iframe页向上滚动到顶时刚好到合适的位置:


 

这里主要就是设置这个表格的高度,这就要牵涉到本次固定表头方法的用法了。

 

之前提到的网页可下载2个JS文件和1个CSS文件(我用了Chrome插件”Quick Source Viewer”方便下载)。其中superTables.js 存放主要方法,jquery.superTable.js 存放快捷调用方法,superTables.css 则是样式了,三者都遵循MIT授权,是很宽松的一种Lisence。

 

调用方法(完整用法可看源代码):


使用Jquery选取GridView,用width和height设置宽和高,fixedCols参数设置前几列固定,colWidths可指定各列的宽度,还有其它一些参数,比如有个可设置几行作为表头的(即固定前几行)。

 

有些人可能喜欢先在线看看代码再决定使不使用,我就满足他们吧:

1、jquery.superTable.js

 

2、superTables.js

 

3、superTables.css

 

4、调用方法参考

 

最后奉上文件地址:

http://dlgcy.qiniudn.com/【代码】ASP.NET固定GridView表头_SuperTables.7z

http://download.csdn.net/detail/w19921004/8539125

打印本文

一条回复 to 分享ASP.NET固定GridView表头的方法

  1. 沙发也是一种心情!

回复