显示额外子网格的嵌套 GridView

Question

我有以下嵌套的 Girdview。问题是加载父网格时，它显示 2 个子网格，一个由展开 img 显示，当我单击展开 img 时，每行下方一个。扩展 img 的那个是出乎意料的和不需要的。有人可以帮我解决这个问题吗？

ASPX

<asp:GridView ID="gvLotDetails" runat="server" Width="600px" BackColor="White" AutoGenerateColumns="False" OnRowDataBound="gvLotDetails_DataBound" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" CellPadding="4" Height="169px" DataKeyNames="ItemNumber">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <img alt = "" style="cursor: pointer" src="Images/plus.png" />
                <asp:Panel ID="pnlLotDetailsExtend" runat="server">
                    <asp:GridView ID="gvLotDetailsExpand" runat="server" AutoGenerateColumns="false" DataKeyNames="Slab">
                        <Columns>
                            <asp:BoundField DataField="Slab" SortExpression="Slab" ReadOnly="True" HeaderText="Slab" />
                            <asp:BoundField DataField="Size" SortExpression="Size" ReadOnly="True" HeaderText="Size" />
                            <asp:BoundField DataField="Sqft" SortExpression="Sqft" ReadOnly="True" HeaderText="Sqft" />
                            <asp:BoundField DataField="Block" SortExpression="Block" ReadOnly="True" HeaderText="Block" />
                            <asp:BoundField DataField="Totalweight" SortExpression="Totalweight" ReadOnly="True" HeaderText="Totalweight" />
                            <asp:BoundField DataField="country" SortExpression="country" ReadOnly="True" HeaderText="Country" />
                        </Columns>
                        <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" HorizontalAlign="Right" />
                        <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                        <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                        <HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000" />
                        <AlternatingRowStyle BackColor="White" HorizontalAlign="Left" Font-Underline="true" />
                    </asp:GridView>
                </asp:Panel>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="ItemNumber" SortExpression="ItemNumber" 
            ReadOnly="True" HeaderText="ItemNumber" />
        <asp:BoundField DataField="whse" SortExpression="whse" ReadOnly="True" 
            HeaderText="Warehouse" />
        <asp:BoundField DataField="Bundle" SortExpression="Bundle" ReadOnly="True" 
            HeaderText="Bundle" />
    </Columns>
    <PagerSettings Position="TopAndBottom" />
    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" HorizontalAlign="Right" />
    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
    <HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000" />
    <AlternatingRowStyle BackColor="White" HorizontalAlign="Left" Font-Underline="true" />
</asp:GridView>

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", "Images/minus.png");
    });
    $("[src*=minus]").live("click", function () {
        $(this).attr("src", "Images/plus.png");
        $(this).closest("tr").next().remove();
    });
</script>

代码背后

一个按钮事件触发GetDetils()

private void GetDetails()
{
    query = "SELECT ItemNumber, WHSE, Bundle FROM labels_slab_details WHERE lot= '" + this.txtLot.Text.Trim() + "' and containernumber='" + this.ddlCont.SelectedValue + 
            "' GROUP BY ItemNumber, WHSE, Bundle ORDER BY Bundle, ItemNumber";
    cn = new SqlConnection(cnBCStr);
    SqlDataAdapter da = new SqlDataAdapter(query, cn);
    ds = new DataSet();
    da.Fill(ds);
    if (ds.Tables[0].Rows.Count > 0)
    {
        this.gvLotDetails.DataSource = ds.Tables[0];
        this.gvLotDetails.DataBind();
        this.gvLotDetails.Visible = true;
    }
    else
    {
        this.gvLotDetails.Visible = false;
        this.errLabelDetail.Text = "* Create Bundle Data First! ";
        return;
    }
}

protected void gvLotDetails_DataBound(object Sender, GridViewRowEventArgs Ea)
{
    if (Ea.Row.RowType == DataControlRowType.DataRow)
    {
        string ItemNumber = gvLotDetails.DataKeys[Ea.Row.RowIndex]["ItemNumber"].ToString();
        GridView gvLotDetailsExpand = Ea.Row.FindControl("gvLotDetailsExpand") as GridView;
        gvLotDetailsExpand.DataSource = GetData(string.Format("SELECT slab, size, sqft, block, totalweight, country FROM labels_slab_details WHERE LOT='" + this.txtLot.Text + "' AND ItemNumber='" + ItemNumber + "'"));
        gvLotDetailsExpand.DataBind();
    }
}

private static DataTable GetData(string query)
{
    string cnBCStr = System.Configuration.ConfigurationManager.ConnectionStrings["conBarcodes_SQLWeb"].ConnectionString;
    using (SqlConnection cn = new SqlConnection(cnBCStr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            using (SqlDataAdapter da = new SqlDataAdapter())
            {
                cmd.Connection = cn;
                da.SelectCommand = cmd;
                using (DataSet ds = new DataSet())
                {
                    DataTable dt = new DataTable();
                    da.Fill(dt);
                    return dt;
                }
            }
        }
    }
}

我更新了代码以删除我为测试问题所做的一些更改。

Answer 1

我找到了答案。额外的 childGrid 可以通过更新 panel 参数来隐藏。

<asp:Panel ID="pnlLotDetailsExtend" runat="server" Style="display: none">