带有修复标题的网格视图垂直滚动条

时间:2012-10-25 05:52:09

标签: asp.net gridview scrollbar

如何使用垂直滚动条在网格视图中显示固定标题?

那时我向下滚动标题应该可见。

1 个答案:

答案 0 :(得分:7)

将网格放在div或panel with scrollbar property内。但这需要额外的努力来进行正确的对齐。标题表的每个单元格应该是网格的aligned with each cell。其他的工作是fix the header of the gridscrolling down shouldnt hide the header网格的方式stylesheet使用css我们可以实现这一目标。

在代码中添加以下样式,并指定网格视图或数据网格标题样式.fixedHeader { font-weight:bold; position:absolute; background-color: #006699; color: #ffffff; height: 25px; top: expression(Sys.UI.DomElement.getBounds(document.getElementById("panelContainer")).y-25); }

"panelContainer" is the id of the panel

"Sys.UI.DomElement.getBounds(document.getElementById("panelContainer")).y "fix the header给出了我们需要That much of space we had to leave for the header的面板的确切Y位置.25像素是标题的通常高度。width, height, and scrollable option因此它不会占用任何空间网格内容。使用Panel控件,我们可以控制height as 300px。 对于我们的代码示例,我们设置了the width as 100%vertical scrollbars,并将Panel设置为滚动,同时仅显示<asp:Panel ID="panelContainer" runat="server" Height="300px" Width="100%" ScrollBars="Vertical"> <asp:GridView ID="gvScrollableExample" runat="server"> <HeaderStyle CssClass="fixedHeader " /> </asp:GridView></asp:Panel> 。将您的网格放在面板中。现在我们必须将上面定义的CSS类分配给GridView的HeaderStyle

{{1}}

这样我们可以将标题固定在网格的顶部,向下滚动不会使用标题滚动网格。