嵌套 GridView [无 JavaScript]

• 下载源代码 - 70.2 KB

引言和背景

互联网上有很多可用的嵌套 GridView 的实现。在 MSDN 上，有一组可用的代码，但这并不能解决大多数开发人员的问题。仅仅在父 GridView 的模板字段中添加另一个 GridView 是不够的。

CodeProject 已经有一个可用的解决方案，但这涉及在 JavaScript 中编写方法：EditNestedGridView。

我将向您展示如何在不编写任何 JavaScript 代码的情况下实现它，并让 AJAX 完成这项工作。

Procedure

我将从一开始就快速入手，以便那些刚接触 GridView 这种行为的开发人员不会在实现最终结果时遇到任何问题。

创建一个 GridView 并向 GridView 添加一个模板文件。您可以通过从 GridView 任务进入编辑列来实现这一点。完成后，编辑模板并插入一个 LinkButton，其 Text 属性为“+”。将其设置为 X-Large 并删除下划线。在 LinkButton 旁边插入一个子 GridView。

当两个表之间已经存在关系时，通常需要这种安排。就像在我的示例中，订单表和明细表之间存在关系。我假设您已经根据您的要求为两个 GridView 创建了 SqlDataSource。

这里重要的是，您一定不要为子 GridView 的 SqlDataSource 中的参数分配任何源。换句话说，为子数据源分配源为“无”。

<asp:SqlDataSource ID="SqlDataSource2" runat="server" 
  ConnectionString="<%$ ConnectionStrings:IVN_sysConnectionString %>"

  SelectCommand="SELECT [order_no_fk], [item_name], [order_status], [description], 
                 [quantity], [unit_price], [net_cost], [order_detail_no]
                 FROM [order_detail] WHERE ([order_no_fk] = @order_no_fk)" >

<SelectParameters>
<asp:Parameter Name="order_no_fk" Type="String" />
</SelectParameters> 

完成后，返回到父 GridView 并为 RowDataBound 创建一个事件处理程序。

protected void GridView1_RowDataBound(object sender,GridViewRowEventArgs e)
{
    if (e.Row.RowType ==   DataControlRowType.DataRow)

    {
        SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
        s.SelectParameters[0].DefaultValue =   e.Row.Cells[1].Text;
    }
}

这部分代码实际上可以在 MSDN 上找到，你们大多数人可能已经经历过，但我将用几句简单的话来解释它。

我们在这里的目标是分配参数源值，即我们之前在子 GridView 的 SqlDataSource 中声明为“无”的那个值。对于第一次看到此类代码的初学者来说，我认为现在它会更有意义。

现在，返回到模板字段并为 LinkButton1_Click 事件创建一个事件处理程序。在实际编写事件处理程序之前，您必须在模板字段内创建一个 ASP Panel。将子 GridView 放置在新建的 ASP Panel 中。请注意，LinkButton 必须保留在您刚刚添加的 Panel 之外。

将 ASP Panel 的 Visible 属性设置为“False”。

protected void LinkButton1_Click(object sender, EventArgs   e)
{
    LinkButton l_btn =   (LinkButton)sender;
    GridViewRow gvr =   (GridViewRow)l_btn.NamingContainer
    Panel p1 =   (Panel)gvr.FindControl("Panel1");
    LinkButton lb1 =   (LinkButton)gvr.FindControl("LinkButton1");
    if (p1.Visible == false)
    {
        p1.Visible = true;
        lb1.Text = "-";
    }
    else if (p1.Visible == true)
    {
        p1.Visible = false;
        lb1.Text = "+";
    }

    GridView gv2 =   (GridView)l_btn.FindControl("GridView2");
    gv2.DataBind();

}

您可以通过调整 ASP Panel 的宽度来获得所需的格式。如果您的子 GridView 的宽度大于 ASP Panel，则不会有任何影响。

最后，转到父 GridView 并将每行垂直对齐到顶部位置。这样，当子网格弹出在其下方时，您可以看到父行的条目。

每当按下“+”时，您都会遇到回发。您可以简单地使用 AJAX UpdatePanel 来克服此行为。只需添加 AJAX UpdatePanel 并简单地将您的父 GridView 放置在 UpdatePanel 中即可。这将为您提供所需的嵌套 GridView。