在回发后保持子 Gridview 展开时遇到一些问题。我已经实现了其他问题的答案，但 Gridivew 仍然最小化回发。任何帮助或指导将不胜感激，谢谢。
JAVASCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("[src*=plus]").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "../img/minus.png");
$(this).next().next().val(1);
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "../img/plus.png");
$(this).closest("tr").next().remove();
$(this).next().next().val("");
});
$(function () {
$("[id*=IsExpanded]").each(function () {
if ($(this).val() == "1") {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $("[id*=childpanel]", $(this).closest("tr")).html() + "</td></tr>")
$("[src*=plus]", $(this).closest("tr")).attr("src", "../img/minus.png");
}
});
});
</script>
.NET
<asp:Panel ID="panel1" runat="server" Visible="false" Width="100%">
<div class="griddiv" style="overflow-y: scroll; max-height: 500px; max-width: 80%;">
<asp:GridView ID="GridView1" runat="server" Font-Size="Medium" CellPadding="5" GridLines="None" AutoGenerateColumns="False"
RowStyle-CssClass="rows" HeaderStyle-CssClass="gridheader" DataKeyNames="batchID" OnRowDataBound="OnRowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img alt="" style="cursor: pointer" src="../img/plus.png" />
<asp:Panel ID="childpanel" runat="server" Style="display: none;">
<div class="griddiv" style="overflow-y: scroll; max-height: 500px; max-width: 80%;">
<asp:GridView ID="gvchild" runat="server" Font-Size="Medium" CellPadding="5" GridLines="None" AutoGenerateColumns="False"
CssClass="datagrid1" RowStyle-CssClass="rows" HeaderStyle-CssClass="gridheader" DataKeyNames="id">
<AlternatingRowStyle BackColor="#e8e8f9" />
<Columns>
<asp:TemplateField ItemStyle-Width="30px" HeaderText="">
<ItemTemplate>
<asp:Button ID="lnkEdit" runat="server" Text="Edit" OnClick="Edit" CssClass="button" />
</ItemTemplate>
<ItemTemplate>
<asp:Label runat="server" ID="rowidtest" Text='<%#Eval("id") %>' Visible="false"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="id" HeaderText="ID" />
<asp:BoundField ItemStyle-Width="150px" DataField="optionnum" HeaderText="Option Number" />
<asp:BoundField ItemStyle-Width="150px" DataField="optiondesc" HeaderText="Option Description" />
<asp:BoundField ItemStyle-Width="150px" DataField="optioncat" HeaderText="Option Category" />
<asp:BoundField DataField="optionsub" HeaderText="Option Sub-Category" ItemStyle-Width="150px" />
<asp:BoundField ItemStyle-Width="150px" DataField="houseplan" HeaderText="House Plan" />
<asp:BoundField ItemStyle-Width="150px" DataField="craftcode" HeaderText="Craft Code" />
<asp:BoundField ItemStyle-Width="150px" DataField="parentoption" HeaderText="Parent Option" />
<asp:BoundField DataField="parentoption2" HeaderText="Parent Option 2" ItemStyle-Width="150px" />
<asp:BoundField DataField="parentoption3" HeaderText="Parent Option 3" ItemStyle-Width="150px" />
<asp:BoundField DataField="parentoption4" HeaderText="Parent Option 4" ItemStyle-Width="150px" />
<asp:BoundField DataField="parentoption5" HeaderText="Parent Option 5" ItemStyle-Width="150px" />
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox runat="server" ID="chkHeader" TextAlign="Right" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox runat="server" ID="chkRow" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</asp:Panel>
<asp:HiddenField ID="IsExpanded" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="batchID" HeaderText="Batch ID" HtmlEncode="true" HeaderStyle-Width="25%" />
<asp:BoundField DataField="requestdate" HeaderText="Request Date" HtmlEncode="true" HeaderStyle-Width="25%" />
<asp:BoundField DataField="requestby" HeaderText="Requested By" HtmlEncode="true" HeaderStyle-Width="25%" />
<asp:BoundField DataField="entityname" HeaderText="Division" HtmlEncode="true" HeaderStyle-Width="25%" />
</Columns>
</asp:GridView>
</div>
<h4></h4>
<div>
<asp:Button ID="Button" runat="server"
Text="Approve" CssClass="button" />
</div>
</asp:Panel>
VB
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
For Each row As GridViewRow In GridView1.Rows
If row.RowType = DataControlRowType.DataRow Then
Dim IsExpanded As HiddenField = TryCast(row.FindControl("IsExpanded"), HiddenField)
IsExpanded.Value = Request.Form(IsExpanded.UniqueID)
End If
Next
End Sub
最佳答案
在不详分割析您的问题的情况下，我可以提出以下建议:
在 ASP.NET 回发中，document.ready 不会触发，因为这不会被视为加载事件。使用内置 jquery pageLoad 事件重新绑定(bind) JavaScript 可能有助于重新触发 JavaScript。
function pageLoad(sender, args) {
$("[src*=plus]").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "../img/minus.png");
$(this).next().next().val(1);
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "../img/plus.png");
$(this).closest("tr").next().remove();
$(this).next().next().val("");
});
$(function () {
$("[id*=IsExpanded]").each(function () {
if ($(this).val() == "1") {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $("[id*=childpanel]", $(this).closest("tr")).html() + "</td></tr>")
$("[src*=plus]", $(this).closest("tr")).attr("src", "../img/minus.png");
}
});
});
}
此代码需要在 document.ready 事件之外触发，因此要么创建一个可以在文档就绪和页面加载时触发的函数，要么简单地复制代码。
更新面板(对于更新面板内的内容)
如果您的代码位于回发时的更新面板内，那么您应该使用此函数来导致 javascript 在回发时触发。
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
}
比较
document.ready (DOM 准备好后立即调用)
$(function() {
});
最适合一次性初始化。
DOM 准备好后立即调用；可能比 pageLoad() 稍早调用。
无法将功能重新附加到受部分回发影响的页面元素/控件。
pageLoad (页面完全加载时调用)
function pageLoad() {
}
如果与 UpdatePanel 一起使用，则不太适合一次性初始化。
最好使用 UpdatePanel 将功能重新附加到受部分回发影响的页面元素/控件。
关于javascript - 保持子 Gridview 在回发时展开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44634160/