如何使用垂直滚动条在网格视图中显示固定标题?
那时我向下滚动标题应该可见。
答案 0 :(得分:7)
将网格放在div或panel with scrollbar property
内。但这需要额外的努力来进行正确的对齐。标题表的每个单元格应该是网格的aligned with each cell
。其他的工作是fix the header of the grid
以scrolling 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}}
这样我们可以将标题固定在网格的顶部,向下滚动不会使用标题滚动网格。