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

Question

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

那是当我向下滚动标题应该可见.

Answer 1

把网格放在一个div或panel with scrollbar property.but中,需要额外的努力来进行正确的对齐.标题表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 "给出了我们需要的面板的精确Y位置fix the header.25像素是标题的通常高度.That much of space we had to leave for the header这样它就不会占用网格内容的任何空间.通过Panel控件,我们就可以控制了width, height, and scrollable option.对于我们的代码示例,我们设置了height as 300px,, the width as 100%并将Panel设置为滚动,同时仅显示vertical scrollbars.将您的网格放在面板中.现在我们必须将上面定义的CSS类分配给GridView的HeaderStyle

<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>

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