为什么展开的嵌套GridView打开后会自动关闭

Question

我在 UpdatePanel 中有以下 GridView：

<asp:GridView ShowHeaderWhenEmpty="false" AlternatingRowStyle-BackColor="#EBE9E9" AutoGenerateColumns="false" OnSorting="yourTasksGV_Sorting" AllowSorting="true" ID="yourTasksGV" runat="server" ClientIDMode="Static" EmptyDataText="You currently have no tasks assigned to you" OnRowDataBound="yourTasksGV_RowDataBound" OnRowCreated="yourTasksGV_RowCreated">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:ImageButton ID="imgExpCol" ImageUrl="~/theImages/subTaskPlus.png" runat="server" ClientIDMode="Static" CssClass="imgExpCol" AlternateText="plus" CommandArgument='<%#Eval("Object") %>' OnCommand="imgExpCol_Command" />
                <asp:Panel ID="pnlSubTasks" runat="server" CssClass="pnlSubTasks" ClientIDMode="Static">
                    <asp:GridView ID="gvSubTasks" runat="server" AutoGenerateColumns="false" ClientIDMode="Static">
                        <Columns>
                            <asp:BoundField DataField="Task Name" HeaderText="Task Name" />
                            <asp:BoundField DataField="Due Date" HeaderText="Due Date" />
                        </Columns>
                    </asp:GridView>
                </asp:Panel>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:HyperLinkField Target="_self" DataNavigateUrlFields="Task Detail" DataTextField="Task Name" DataNavigateUrlFormatString="" HeaderText="Task Detail" SortExpression="Task Name" ItemStyle-CssClass="taskTableColumn" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:ImageButton ImageUrl="~/theImages/Dependencies.png" CssClass="gvTaskDep btnShowDepend" runat="server" ID="btnShowDepend" OnCommand="btnShowDepend_Command" CommandName="TaskDepend" AlternateText='<%#Eval("Object") + "," + Eval("FK") %>' CommandArgument='<%#Eval("Object") + "," + Eval("FK") %>' ToolTip="Click to view Dependencies" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Service" HeaderText="Service" SortExpression="Service" ItemStyle-CssClass="taskTableColumn" />
        <asp:BoundField DataField="Status" HeaderText="Status" SortExpression="Status" ItemStyle-CssClass="taskTableColumn" />
        <asp:BoundField DataField="Due Date" HeaderText="Due" SortExpression="Due Date" ItemStyle-CssClass="taskTableColumn" />
        <asp:BoundField DataField="Owner" HeaderText="Owner" SortExpression="Owner" ItemStyle-CssClass="taskTableColumn" />
        <asp:BoundField DataField="Client" HeaderText="Client" SortExpression="Client" ItemStyle-CssClass="taskTableColumn" />
        <asp:BoundField DataField="Site" HeaderText="Site" SortExpression="Site" ItemStyle-CssClass="taskTableColumn" />
        <asp:BoundField DataField="Practice" HeaderText="Practice" SortExpression="Practice" ItemStyle-CssClass="taskTableColumn" />
        <asp:BoundField DataField="Provider" HeaderText="Provider" SortExpression="Provider" ItemStyle-CssClass="taskTableColumn" />
        <asp:BoundField DataField="Roles" HeaderText="Roles" SortExpression="Roles" ItemStyle-CssClass="taskTableColumn" />
        <asp:BoundField DataField="Object" HeaderText="Object" SortExpression="Object" ItemStyle-CssClass="hideTag" HeaderStyle-CssClass="hideTag" />
        <asp:BoundField DataField="FK" HeaderText="FK" SortExpression="Object" ItemStyle-CssClass="hideTag" HeaderStyle-CssClass="hideTag" />
      </Columns>
</asp:GridView>

JQuery:

$(function () {
    $("body").on('click', "input[alt='plus']", function () {
        alert("test");
        $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
        $(this).attr("src", "../theImages/subTaskMinus.png");
        $(this).attr("alt", "minus");
    });
    $("body").on('click', "input[alt='minus']", function () {
        alert("test2");
        $(this).attr("src", "../theImages/subTaskPlus.png");
        $(this).attr("alt", "plus");
        $(this).closest("tr").next().remove();
    });
});

代码隐藏：

protected void yourTasksGV_RowDataBound(object sender, GridViewRowEventArgs e)

{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        GridView gvOrders = e.Row.FindControl("gvSubTasks") as GridView;
        gvOrders.DataSource = RunSubTaskQuery();
        gvOrders.DataBind();

        TasksUpdatePanel.Update();

        //BEGIN: FIGURE OUT WHICH ROW SHOULD HAVE THE PLUS ICON
        #region
        List<string> lstSubTask = new List<string>();

        string strQuerySubTasks = @"SELECT 
                CT.OBJECTID 'Object ID'
                ,ATTR2888 'Subtask Name'
                ,M.MEMO 'Subtask Details'
                ,ATTR2890 'Status'
                ,ST.FK2898 'Parent Task Object ID'
                ,CT.ATTR2739 'Parent Task Name'
            FROM HSI.RMOBJECTINSTANCE1244 ST
                INNER JOIN HSI.RMMEMO M ON ST.MK2889 = M.MEMOID
                INNER JOIN HSI.RMOBJECTINSTANCE1224 CT ON ST.FK2898 = CT.OBJECTID
            WHERE ST.ACTIVESTATUS = 0 AND CT.ACTIVESTATUS = 0 AND CT.OBJECTID = '" + objectid + "'";

        using (SqlConnection scSubTask = new SqlConnection(connString))
        {
            SqlCommand cmd = new SqlCommand(strQuerySubTasks, scSubTask);
            scSubTask.Open();

            SqlDataReader sdrST = cmd.ExecuteReader();

            if (!string.IsNullOrEmpty(objectid) && objectid != "&nbsp;")
            {
                while (sdrST.Read())
                {
                    lstSubTask.Add(sdrST[0].ToString().TrimEnd());
                }
            }

            sdrST.Close();
        }
        #endregion
        if (lstSubTask.Count == 0)
        {
            ImageButton ibExp = e.Row.FindControl("imgExpCol") as ImageButton;
            if (ibExp != null)
            {
                ibExp.Visible = false;
            }
            //hide the plus button
        }//END: FIGURE OUT WHICH ROW SHOULD HAVE THE PLUS ICON
    }
}

我遇到的问题是，当我单击加号按钮展开现有行以显示嵌套的 GridView 时，它会打开，但会在几秒钟后自行折叠，并且不会等待我手动关闭它。

我该如何解决？

Answer 1

试试这样的..

    $("[src*=plus]").live("click", function () {
        $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
        $(this).attr("src", "../theImages/subTaskPlus.png");
    });
    $("[src*=minus]").live("click", function () {
        $(this).attr("src", "../theImages/subTaskMinus.png"");
        $(this).closest("tr").next().remove();
    });

我正在使用上面的 javascript 在 gridviews 中展开和折叠我的 gridviews。希望这对你有用。