我们目前正在开发一个 asp.NET 4.0 Web Forms 应用程序。在一个特定的屏幕中,我们尝试创建一个带有固定页眉和页脚的网格视图。我们按照我们想要的方式进行了这项工作,但后来我们意识到,当我们单击一个按钮,该按钮发出部分回发(例如触发必填字段验证器)时,固定标题消失了。
任何想法为什么会发生这种情况?
代码如下:
CSS(相关部分):
.tableStyle
{
}
.tableStyle th
{
text-align: left !important;
padding: 2px 5px !important;
font-weight: bold;
}
.tableStyle td
{
padding: 1px 5px !important;
text-align: left;
}
.container
{
overflow-y: scroll;
overflow-x: hidden;
height: 500px;
}
.container table tbody
{
overflow-x: hidden;
}
/* Creates a Scrollable Div */
.GridViewContainer
{
overflow: auto;
}
.freezeHeader
{
position: absolute;
background-color: White;
font-weight: bold;
margin-top: -40px;
padding-bottom: 5px;
z-index: 99;
}
.freezeFooter
{
position: absolute;
background-color: White;
top: 530px;
padding-bottom: 20px;
z-index: 95;
}
.paddingTop
{
margin-top: 40px;
}
ASPX 页面(网格视图部分):
<fieldset>
<legend>Products Mapping Table (EXT_CFG_PDT_MAP)</legend>
<div id="grdWithScroll" class="container">
<asp:GridView
ID="ProductsMappingTableGridView"
AutoGenerateColumns="false"
runat="server"
OnRowCancelingEdit="ProductsMappingTableGridView_RowCancelingEdit"
OnRowEditing="ProductsMappingTableGridView_RowEditing"
OnRowUpdating="ProductsMappingTableGridView_RowUpdating"
ShowFooter="true"
OnRowCommand="ProductsMappingTableGridView_RowCommand"
CssClass="tableStyle paddingTop"
HeaderStyle-CssClass="freezeHeader"
FooterStyle-CssClass="freezeFooter">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="editButton" Text="Edit" CausesValidation="false" CommandName="Edit" runat="server" Enabled='<%# Session["ProductsMappingsWriteAccess"] %>'/>
</ItemTemplate>
<EditItemTemplate>
<asp:Button ID="updateButton" Text="Update" CommandName="Update" runat="server" ValidationGroup="Edit"/>
<asp:Button ID="cancelButton" Text="Cancel" CausesValidation="false" CommandName="Cancel" runat="server" />
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="insertButton" Text="Insert" CommandName="Insert" runat="server" ValidationGroup="Insert" Enabled='<%# Session["ProductsMappingsWriteAccess"] %>'/>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>Product Mapping ID</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="mptIdLabel" runat="server" Text='<%# Eval("MPT_ID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>Source Key</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="srcKeyLabel" runat="server" Text='<%# Eval("SRC_KEY") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:DropDownList AutoPostBack="false" ID="srcKeyListEdit" runat="server" Width="95px" OnLoad="SrcKeyListInitalization" >
</asp:DropDownList>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList AutoPostBack="false" ID="srcKeyListInsert" runat="server" Width="95px" OnLoad="SrcKeyListInitalization"
Visible='<%# Session["ProductsMappingsWriteAccess"] %>'>
</asp:DropDownList>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>Product Key - Source</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="pdtKeySrcLabel" runat="server" Text='<%# Eval("PDT_KEY_SRC") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="pdtKeySrcTextBoxEdit" runat="server" Text='<%# Eval("PDT_SRC") %>'
MaxLength="32"></asp:TextBox>
<br />
<asp:RequiredFieldValidator runat="server" ID="pdtKeySrcTextBoxEditRequiredFieldValidator"
ControlToValidate="pdtKeySrcTextBoxEdit" ValidationGroup="Edit" ForeColor="Red"
ErrorMessage="PDT_KEY_SRC is required"></asp:RequiredFieldValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="pdtKeySrcTextBoxInsert" runat="server" Text='<%# Eval("KEY_SRC") %>'
MaxLength="32" Visible='<%# Session["ProductsMappingsWriteAccess"] %>'></asp:TextBox>
<br />
<asp:RequiredFieldValidator runat="server" ID="pdtKeySrcTextBoxInsertRequiredFieldValidator"
ControlToValidate="pdtKeySrcTextBoxInsert" ValidationGroup="Insert" ForeColor="Red"
ErrorMessage="PDT_KEY_SRC is required"></asp:RequiredFieldValidator>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</fieldset>
更新 1:我想指出,这似乎在 IE 8 上没有受到影响,但在我使用 IE 10 时受到了影响。