∈鱼杆 －－－我的鱼塘

执着，坚定，友爱，勇敢(www.pumaboyd.com)Live Message

导航

DataGrid表头锁定总结

Posted on 2006-10-08 08:24  ∈鱼杆  阅读(1175)  评论(0)  编辑  收藏  举报
 

在网上找了许多资料也发现很多实现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.       添加样式：

<style type="text/css">

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

#fixedHeader TR TD { POSITION: relative }

</style>

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

<script language="javascript">

              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