DataGrid表头锁定总结

pumaboyd

浏览: 251440 次
性别:
来自: 上海

最近访客更多访客>>

djcbpl

heisedeyueya

dxy2798

Gaf

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTC CSS ASP JavaScript 脚本

在网上找了许多资料也发现很多实现DataGrid表头锁定的方法，但总觉的太杂太乱，将自己认为比较实用的两个解决方法列举出来。

l 方案一:使用HTC实现表头锁定。

这个方法比较简单，只要给DataGrid套用CSS样式就可以了。但这种方法有个弊端，就是列数过多时，会造成表头和表的内容错位，影响用户使用。

1. 给页面添加样式。

<STYLE>

.tblMain { BORDER-RIGHT: darkblue 1px solid; BORDER-TOP: darkblue 1px solid; FONT-SIZE: 0.8em; BEHAVIOR: url(scrolltable.htc); BORDER-LEFT: darkblue 1px solid; BORDER-BOTTOM: darkblue 1px solid; FONT-FAMILY: Verdana; BACKGROUND-COLOR: highlight }

.tblHeader { COLOR: highlighttext }

.tblBody { COLOR: darkblue; BACKGROUND-COLOR: #eeeeee }

</STYLE>

2. 给DataGrid添加样式引用。(红色标记为添加的样式引用)

<asp:DataGrid id="dgrdHtc" runat="server" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" BackColor="White" CellPadding="4" Width="100%" bodyHeight="200" bodyCSS="tblBody" headerCSS="tblHeader" class="tblMain">

</asp:DataGrid>

3. 添加htc文件到DataGrid所在页面的文件夹中。具体HTC文件路径可以在第一步的样式中配置。

具体显示效果如下：

l 方案二 DIV + CSS + JS

这个方案稍微麻烦一点，但我觉的还是可行的一种，这是我根据原来一个CSS控制Table锁定表格的方法改造过来的。步骤如下：

1. HTML添加这个头：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

如果原来有类似的头请去除。

2. 添加样式：

DIV.tableContainer { OVERFLOW-Y: auto; HEIGHT: 300px }

#fixedHeader TR TD { POSITION: relative }

</style>

3. 添加JS脚本，红色字体为DataGrid的ID：

function window.onload()

{

//红色字体为DataGrid的ID

var dg = document.getElementById('dgrdDiv');

var tableHead = dg.createTHead();

tableHead.id = "fixedHeader";

tableHead.appendChild(dg.rows[0].cloneNode(true))

dg.rows[1].removeNode(true);

}

</script>

具体显示效果如下：

这两种方式实现的表头锁定在样式有区别的，第一种的滚动条在里面，第二种的滚动条在整个DataGrid的外面。
/Files/pumaboyd/FixedHeader.rar

分享到：

从某系统截取的漂亮菜单（源码） | [算法]去除字符串中相邻的相同的字符串

2006-10-08 08:24
浏览 1249
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论