显示嵌套的gridview

Question

我有一个嵌套的GridView有4个级别， 当我点击“+”显示子GridView我向数据库请求下载当前行的数据时，每件事情都适合我，我唯一的问题是在设计中，所有子GridView都显示在其父GridView的列中 这就是它的样子：

父级GridView

First Child gridView

这是我的aspx代码：

    <asp:UpdatePanel ID="upNestedGridView" runat="server" UpdateMode="Conditional">
       <ContentTemplate>
          <asp:GridView ID="gvCostCenters" runat="server" ....>
           <Columns>
             <asp:TemplateField>
               <ItemTemplate>
                 <asp:ImageButton ID="imgShowAccountingPlan" runat="server" OnClick="Show_Hide_AccountingPlansGrid" .../>
                    <asp:Panel ID="pnlAccountingPlan" runat="server" Visible="false" Style="position: relative">
                        <asp:GridView ID="gvAccountingPlans" runat="server" AutoGenerateColumns="false"....">
                          <Columns>
                             <asp:TemplateField>                                 
                                <ItemTemplate>
                                   <asp:ImageButton ID="imgShowPrograms" runat="server" OnClick="Show_Hide_ProgramsGrid" .../>
                                   <asp:Panel ID="pnlPrograms" runat="server" Visible="false" Style="position: relative">
                                       <asp:GridView ID="gvPrograms" runat="server" AutoGenerateColumns="false" ...>
                                            <Columns>
                                                <asp:TemplateField>
                                                    <ItemTemplate>
                                                        <asp:ImageButton ID="imgShowProjects" runat="server" OnClick="Show_Hide_ProjectsGrid" ..../>
                                                        <asp:Panel ID="pnlProjects" runat="server" Visible="false" Style="position: relative">
                                                            <asp:GridView ID="gvProject" runat="server" ....>
                                                                .....
                                                            </asp:GridView>
                                                        </asp:Panel>
                                                    </ItemTemplate>
                                                </asp:TemplateField>                                                                              
                                                <asp:BoundField DataField="Label" HeaderText="البند " ItemStyle-HorizontalAlign="Right" />
                                                ....
                                            </Columns>
                                        </asp:GridView>
                                    </asp:Panel>
                                </ItemTemplate>
                             </asp:TemplateField>                                                          
                             <asp:BoundField DataField="NumAccountingPlan" HeaderText="الخطة المحاسبية " ItemStyle-HorizontalAlign="Right" />
                             ...
                         </Columns>
                    </asp:GridView>
                 </asp:Panel>
            </ItemTemplate>
         </asp:TemplateField>
         ...
        <asp:BoundField DataField="OperatingExpenses" HeaderText="المصروفات التشغيلية" DataFormatString="{0:#,##0.00;(#,##0.00);0}" />
    </Columns>
</asp:GridView>

我的jquery代码：

<script type="text/javascript">
    $(function () {
        $("[src*=minus]").each(function () {
            $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
            $(this).next().remove()
        });
    });
</script>

我的代码C＃：

protected void Show_Hide_AccountingPlansGrid(object sender, EventArgs e)
    {
        try
        {
            ServiceClass service = new ServiceClass();
            ImageButton imgShowHide = (sender as ImageButton);
            GridViewRow row = (imgShowHide.NamingContainer as GridViewRow);
            if (imgShowHide.CommandArgument == "Show")
            {

                _budget = service.GetBudgetById(int.Parse(hfIdBudget.Value));
                row.FindControl("pnlAccountingPlan").Visible = true;
                imgShowHide.CommandArgument = "Hide";
                imgShowHide.ImageUrl = "/Content/img/minus.gif";
                string idCostCenter = gvCostCenters.DataKeys[row.RowIndex].Value.ToString();
                GridView gvAccountingPlans = row.FindControl("gvAccountingPlans") as GridView;
                //gvAccountingPlans.ToolTip = costCenterId;
                gvAccountingPlans.DataSource = AccountingPlanData(int.Parse(hfIdUser.Value), int.Parse(hfIdBudget.Value), int.Parse(idCostCenter));
                gvAccountingPlans.DataBind();

            }
            else
            {
                row.FindControl("pnlAccountingPlan").Visible = false;
                imgShowHide.CommandArgument = "Show";
                imgShowHide.ImageUrl = "/Content/img/plus.gif";
            }
        }
        catch (Exception ex) { GlobalHelpers.Trace(ex); }
    }

我注意到当我删除UpdatePanel时，第一个子GridView显示效果不错，但其他没有。 我该怎么做才能很好地显示所有孩子的GridView？

我很抱歉我的英语不好

Answer 1

代码asp：

<asp:UpdatePanel ID="upNestedGridView" runat="server" UpdateMode="Conditional">
  <ContentTemplate>
    <asp:GridView ID="gvCostCenters" runat="server" AutoGenerateColumns="false" ....>
       <Columns>
         <asp:TemplateField>
           <ItemTemplate>
             <asp:ImageButton ID="imgShowAccountingPlan" runat="server" OnClick="Show_Hide_AccountingPlansGrid" ImageUrl="/Content/img/plus.gif" CommandArgument="Show" />                                                    
           </ItemTemplate>
          </asp:TemplateField>                                           
            ....
          <asp:TemplateField>
           <ItemTemplate>
             <tr visible="false" runat="server" id="trAccountingPlan">
              <td visible="false" runat="server" id="tdAccountingPlan2"></td>
              <td colspan="999" visible="false" runat="server" id="tdAccountingPlan">

              <asp:GridView ID="gvAccountingPlans" runat="server" ....>
               <Columns>
                 .....                                               
               </Columns>
             </asp:GridView>                 
            </td>
          </tr>
        </ItemTemplate>
      </asp:TemplateField>
    </Columns>
  </asp:GridView>
 </ContentTemplate>

代码C＃：

  protected void Show_Hide_AccountingPlansGrid(object sender, EventArgs e)
    {
        try
        {

            ImageButton imgShowHide = (sender as ImageButton);
            GridViewRow row = (imgShowHide.NamingContainer as GridViewRow);
            if (imgShowHide.CommandArgument == "Show")
            {
             ...
                imgShowHide.CommandArgument = "Hide";
                imgShowHide.ImageUrl = "/Content/img/minus.gif";
                row.FindControl("trAccountingPlan").Visible = true;
                HtmlTableCell tdAccountingPlan = (HtmlTableCell)row.FindControl("tdAccountingPlan");
                HtmlTableCell tdAccountingPlan2 = (HtmlTableCell)row.FindControl("tdAccountingPlan2");
                tdAccountingPlan2.Visible = true;
                tdAccountingPlan.Visible = true;

              ...

            }
            else
            {                    
                imgShowHide.CommandArgument = "Show";
                imgShowHide.ImageUrl = "/Content/img/plus.gif";
                row.FindControl("trAccountingPlan").Visible = false;
                HtmlTableCell tdAccountingPlan = (HtmlTableCell)row.FindControl("tdAccountingPlan");
                HtmlTableCell tdAccountingPlan2 = (HtmlTableCell)row.FindControl("tdAccountingPlan2");
                tdAccountingPlan2.Visible = false;
                tdAccountingPlan.Visible = false;
            }
        }
        catch (Exception ex) { GlobalHelpers.Trace(ex); }
    }