具有固定标头的Datagrid [英] Datagrid with fixed headers

问题描述

嗨！
滚动时如何固定datagrid标头.不使用表作为标题.

示例代码:

< asp:UpdatePanel ID ="updtPnlGrid" RenderMode ="Inline" runat ="server">
< ContentTemplate>
< div style ="height:260px;宽度:470px;溢出:自动; vertical-align:top;">
< asp:DataGrid ID ="dgAPVender" AccessKey ="G" runat ="server" CssClass ="clsGrid" BorderColor ="Desktop"
CellPadding ="3" AutoGenerateColumns ="False" Width ="450px">
< SelectedItemStyle CssClass ="clsGridRowShade2"></SelectedItemStyle>
< AlternatingItemStyle CssClass ="clsGridRowShade2"></AlternatingItemStyle>
< ItemStyle CssClass ="clsGridRowShade1"></ItemStyle>
< HeaderStyle Font-Bold ="True" CssClass ="clsGridHeader" Horizo​​ntalAlign ="center">
</HeaderStyle>
< FooterStyle CssClass ="clsGridHeader"></FooterStyle>
<专栏>
< asp:TemplateColumn HeaderText ="No">
< ItemTemplate>
<％#dgAPVender.PageSize * dgAPVender.CurrentPageIndex + Container.ItemIndex + 1
％>
</ItemTemplate>
< ItemStyle Font-Bold ="False" Font-Italic ="False" Font-Overline ="False" Font-Strikeout ="False"
Font-Underline ="False" Horizo​​ntalAlign ="Center" VerticalAlign ="Middle"/>
</asp:TemplateColumn>
< asp:TemplateColumn Visible ="false" HeaderText ="GL">
< ItemStyle VerticalAlign ="Middle" Height ="20px" Width ="10px"/>
< ItemTemplate>
< asp:标签runat =服务器" ID ="lblId" CssClass ="clsText" Text =''<％#DataBinder.Eval(Container.DataItem，"ID")％>''>
</asp:标签>
</ItemTemplate>
</asp:TemplateColumn>
< asp:BoundColumn DataField ="varUserID" HeaderText =用户ID" ItemStyle-Horizo​​ntalAlign ="left">
< ItemStyle Horizo​​ntalAlign ="Left"/>
</asp:BoundColumn>
< asp:BoundColumn DataField ="varFName" HeaderText =用户名" ItemStyle-Horizo​​ntalAlign ="left">
< ItemStyle Horizo​​ntalAlign ="Left"/>
</asp:BoundColumn>
< asp:TemplateColumn>
< HeaderTemplate>
< asp:标签ID ="lblAPVendor" runat =服务器" Text ="AP供应商ID"></asp:标签>
</HeaderTemplate>
< ItemStyle VerticalAlign ="Middle" Height ="20px" Width ="100px"/>
< ItemTemplate>
< asp:TextBox ID ="txtVendorID" Style ="text-align:left;"宽度="95px" runat =服务器"
AutoPostBack ="true" OnTextChanged ="txtVendorID_TextChanged" onkeypress ="JavaScript:fncInputPureAlphaNumericWithoutSpecial();"
MaxLength ="10" Height ="20px" Font-Size ="12px" Text =''<％#DataBinder.Eval(Container.DataItem，"varVendorID")％>''>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
</列>
</asp:DataGrid>
</div>
</ContentTemplate>
< Triggers>
< asp:AsyncPostBackTrigger ControlID ="btnSave" EventName ="Click"/>
< asp:AsyncPostBackTrigger ControlID ="btnCancel" EventName ="Click"/>
< asp:AsyncPostBackTrigger ControlID ="dgAPVender"/>
</Triggers>
</asp:UpdatePanel>


请尽快回复我...


谢谢&问候，
Minal Shah.

Hi!
How to fixed datagrid header while scrolling. without using table for headers.

Sample Code:

<asp:UpdatePanel ID="updtPnlGrid" RenderMode="Inline" runat="server">
<ContentTemplate>
<div style="height: 260px; width: 470px; overflow: auto; vertical-align :top;">
<asp:DataGrid ID="dgAPVender" AccessKey="G" runat="server" CssClass="clsGrid" BorderColor="Desktop"
CellPadding="3" AutoGenerateColumns="False" Width="450px" >
<SelectedItemStyle CssClass="clsGridRowShade2"></SelectedItemStyle>
<AlternatingItemStyle CssClass="clsGridRowShade2"></AlternatingItemStyle>
<ItemStyle CssClass="clsGridRowShade1"></ItemStyle>
<HeaderStyle Font-Bold="True" CssClass="clsGridHeader" HorizontalAlign="center">
</HeaderStyle>
<FooterStyle CssClass="clsGridHeader"></FooterStyle>
<Columns>
<asp:TemplateColumn HeaderText="No">
<ItemTemplate>
<%# dgAPVender.PageSize * dgAPVender.CurrentPageIndex + Container.ItemIndex + 1
%>
</ItemTemplate>
<ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
Font-Underline="False" HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:TemplateColumn>
<asp:TemplateColumn Visible="false" HeaderText="GL">
<ItemStyle VerticalAlign="Middle" Height="20px" Width="10px" />
<ItemTemplate>
<asp:Label runat="server" ID="lblId" CssClass="clsText" Text=''<%# DataBinder.Eval(Container.DataItem,"ID")%>''>
</asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="varUserID" HeaderText="User ID" ItemStyle-HorizontalAlign="left">
<ItemStyle HorizontalAlign="Left" />
</asp:BoundColumn>
<asp:BoundColumn DataField="varFName" HeaderText="User Name" ItemStyle-HorizontalAlign="left">
<ItemStyle HorizontalAlign="Left" />
</asp:BoundColumn>
<asp:TemplateColumn>
<HeaderTemplate>
<asp:Label ID="lblAPVendor" runat="server" Text="AP Vendor ID"></asp:Label>
</HeaderTemplate>
<ItemStyle VerticalAlign="Middle" Height="20px" Width="100px" />
<ItemTemplate>
<asp:TextBox ID="txtVendorID" Style="text-align: left;" Width="95px" runat="server"
AutoPostBack="true" OnTextChanged="txtVendorID_TextChanged" onkeypress="JavaScript:fncInputPureAlphaNumericWithoutSpecial();"
MaxLength="10" Height="20px" Font-Size="12px" Text=''<%# DataBinder.Eval(Container.DataItem,"varVendorID") %>''>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnCancel" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="dgAPVender" />
</Triggers>
</asp:UpdatePanel>


Please reply me as soon as possible...


Thanks & Regards,
Minal Shah.

推荐答案

步骤1:
创建如下的CSS类

Step 1 :
Create a CSS class as following

.HeaderFreez
{
position:relative ;
top:expression(this.offsetParent.scrollTop);
z-index: 10;
}

步骤2:
如下设置Gridview的HeaderStyle CssClass CssClass="HeaderFreez"

Step 2:
Set Gridview’s HeaderStyle CssClass as follows CssClass="HeaderFreez"

这篇关于具有固定标头的Datagrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！