在网上找了许多资料也发现很多实现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
扫一扫
899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
