ASP.NET中使用GridView实现分级显示的代码

ASP.NET中使用GridView实现分级显示可以通过绑定多个GridView控件来实现。以下是实现此功能的完整攻略：

步骤一：创建GridView控件

首先，在HTML中，创建一个表格并添加GridView控件。GridView控件将显示第一级数据。例如：

<table>
  <tr><td>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
      <Columns>
        <asp:BoundField DataField="ID" HeaderText="ID" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:TemplateField HeaderText="Details">
          <ItemTemplate>
            <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
          </ItemTemplate>
        </asp:TemplateField>
      </Columns>
    </asp:GridView>
  </td></tr>
</table>

步骤二：绑定GridView控件

接着，在代码中，绑定GridView控件和第一级数据源。例如：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        //绑定第一级数据
        GridView1.DataSource = GetFirstLevelData();
        GridView1.DataBind();
    }
}

步骤三：创建模板控件和绑定第二级数据

接下来，由于第二级数据将放置在模板控件中，所以需要在代码中创建模板控件，绑定第二级数据。例如：

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        //获取当前行的ID值
        string id = GridView1.DataKeys[e.Row.RowIndex].Value.ToString();

        //在PlaceHolder控件中添加第二级GridView控件
        PlaceHolder ph = (PlaceHolder)e.Row.FindControl("PlaceHolder1");

        GridView GridView2 = new GridView();
        GridView2.ID = "GridView2_" + id;
        GridView2.AutoGenerateColumns = false;
        GridView2.Width = 400;
        GridView2.Columns.Add(new BoundField() { DataField = "ID", HeaderText = "ID" });
        GridView2.Columns.Add(new BoundField() { DataField = "Name", HeaderText = "Name" });

        //绑定第二级数据
        GridView2.DataSource = GetSecondLevelData(id);
        GridView2.DataBind();

        ph.Controls.Add(GridView2);
    }
}

步骤四：动态显示和隐藏第二级数据

最后，在界面上添加一个按钮，用于动态显示和隐藏第二级数据。例如：

<asp:Button ID="Button1" runat="server" Text="Show/Hide Details" OnClientClick="toggleDetails()" />

最终的Javascript代码实现如下：

function toggleDetails() {
    var cells = document.getElementsByTagName("td");
    for (var i = 0; i < cells.length; i++) {
        if (cells[i].innerHTML == "&nbsp;") {
            var ctl = cells[i].firstChild;
            if (ctl && ctl.tagName == "TABLE") {
                ctl.style.display = (ctl.style.display == "" ? "none" : "");
            }
        }
    }
}

以上就是使用GridView控件实现分级显示的完整攻略。下面是两个示例说明：

示例一：分级显示部门和员工

第一级数据源包含部门信息，第二级数据源包含部门内的员工信息。代码如下：

private DataTable GetFirstLevelData()
{
    DataTable table = new DataTable();
    table.Columns.Add("ID", typeof(int));
    table.Columns.Add("Name", typeof(string));

    table.Rows.Add(1, "Sales");
    table.Rows.Add(2, "Marketing");
    table.Rows.Add(3, "IT");

    return table;
}

private DataTable GetSecondLevelData(string id)
{
    DataTable table = new DataTable();
    table.Columns.Add("ID", typeof(int));
    table.Columns.Add("Name", typeof(string));

    if (id == "1")
    {
        table.Rows.Add(11, "John Smith");
        table.Rows.Add(12, "Jane Doe");
    }
    else if (id == "2")
    {
        table.Rows.Add(21, "Bob Johnson");
    }
    else if (id == "3")
    {
        table.Rows.Add(31, "Tom Black");
        table.Rows.Add(32, "Susan White");
        table.Rows.Add(33, "Mike Brown");
    }

    return table;
}

示例二：分级显示订单和订单明细

第一级数据源包含订单信息，第二级数据源包含订单明细信息。代码如下：

private DataTable GetFirstLevelData()
{
    DataTable table = new DataTable();
    table.Columns.Add("ID", typeof(int));
    table.Columns.Add("OrderDate", typeof(DateTime));
    table.Columns.Add("TotalAmount", typeof(decimal));

    table.Rows.Add(1, new DateTime(2021, 1, 1), 100.00m);
    table.Rows.Add(2, new DateTime(2021, 2, 1), 200.00m);
    table.Rows.Add(3, new DateTime(2021, 3, 1), 300.00m);

    return table;
}

private DataTable GetSecondLevelData(string id)
{
    DataTable table = new DataTable();
    table.Columns.Add("ID", typeof(int));
    table.Columns.Add("Product", typeof(string));
    table.Columns.Add("Quantity", typeof(int));
    table.Columns.Add("Price", typeof(decimal));

    if (id == "1")
    {
        table.Rows.Add(101, "Product A", 1, 50.00m);
        table.Rows.Add(102, "Product B", 2, 25.00m);
    }
    else if (id == "2")
    {
        table.Rows.Add(201, "Product C", 3, 30.00m);
        table.Rows.Add(202, "Product D", 4, 20.00m);
    }
    else if (id == "3")
    {
        table.Rows.Add(301, "Product E", 5, 10.00m);
        table.Rows.Add(302, "Product F", 6, 15.00m);
        table.Rows.Add(303, "Product G", 7, 20.00m);
    }

    return table;
}