DataGrid表头锁定总结

pumaboyd · 发表于 2013-2-8 00:50:32

在网上找了许多资料也发现很多实现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

		自动登录	找回密码
密码			立即注册

DataGrid表头锁定总结

浏览过的版块