How to implement a tree-like display using ASP. NET

Objective: To generate table data with a tree structure (EasyUI also has TreeGrid, which only provides an idea) and expand nodes by clicking expand/Contract
Legend:

Class Code:
Copy codeThe Code is as follows:
Using System;
Using System. Data;
/// <Summary>
/// Summary of GridViewHelper
/// </Summary>
Public class GridViewHelper
{
Private string gridline; // connection line
Private DataTable dt; // The input DataTable.
Private DataTable dtOut; // The output DataTable
Private DataRow row; // used to retrieve data from DataView and add it to dtOut
Public GridViewHelper ()
{
//
// TODO: add the constructor logic here
//
}
/// <Summary>
/// Generate a DataTable with a tree structure
/// </Summary>
/// <Param name = "datatable"> original data table </param>
/// <Param name = "parentField"> keyword field of the parent node </param>
/// <Param name = "parentValue"> upper-level node value </param>
/// <Param name = "keyField"> key field of the current node </param>
/// <Param name = "textField"> text field displayed </param>
/// <Param name = "sortString"> sort string </param>
/// <Returns> processed DataTable </returns>
Public DataTable GetGridViewTreeData (DataTable datatable, string parentField, string parentValue, string keyField, string textField, string sortString)
{
Datatable. Columns. Add ("level", Type. GetType ("System. Int32 "));
Dt = datatable;
DtOut = datatable. Clone ();
ResetTextField (parentField, parentValue, keyField, textField, sortString, 0 );
Return dtOut;
}
/// <Summary>
/// Recursively generate a new node name (with connection lines)
/// </Summary>
/// <Param name = "parentValueField"> keyword field of the parent node </param>
/// <Param name = "parentValue"> upper-level node value </param>
/// <Param name = "keyField"> key field of the current node </param>
/// <Param name = "textField"> displayed text fields </param>
/// <Param name = "sortString"> sort string </param>
/// <Param name = "level"> tree depth </param>
/// <Returns> </returns>
Private void resetTextField (string parentValueField, string parentValue, string keyField, string textField, string sortString, int level)
{
DataView dv = new DataView (dt, parentValueField + "= '" + parentValue + "'", sortString, DataViewRowState. CurrentRows );
Int a = dv. Count;
If (dv. Count = 0)
{
Return;
}
For (int I = 0; I <a; I ++)
{
Gridline = "";
Dv. RowFilter = parentValueField + "= '" + parentValue + "'";
Dv. Sort = sortString;
GetTreeLine (parentValueField, dv [I] [parentValueField]. ToString (), keyField, dv [I] [keyField]. ToString (), sortString );
Dv. RowFilter = parentValueField + "= '" + parentValue + "'";
Dv. Sort = sortString;
Row = dtOut. NewRow ();
For (int c = 0; c <dv [I]. Row. ItemArray. Length; c ++)
{
Row [c] = dv [I] [c];
}
DtOut. Rows. Add (row );
DtOut. Rows [dtOut. Rows. Count-1] [textField] = gridline + (I = a-1? "Outputs": "outputs") + dv [I] [textField]. ToString ();
DtOut. Rows [dtOut. Rows. Count-1] ["level"] = level;
ResetTextField (parentValueField, dv [I] [keyField]. ToString (), keyField, textField, sortString, level + 1 );
}
Dv. Dispose ();
}
/// <Summary>
/// Trace the connection line of the Spanning Tree
/// </Summary>
/// <Param name = "parentValueField"> keyword field of the parent node </param>
/// <Param name = "parentValue"> upper-level node value </param>
/// <Param name = "keyField"> key field of the current node </param>
/// <Param name = "nodeKey"> current node value </param>
/// <Param name = "sortString"> sort string </param>
/// <Returns> </returns>
Private void getTreeLine (string parentValueField, string parentValue, string keyField, string nodeKey, string sortString)
{
// Select the parent node
DataView dv = new DataView (dt, keyField + "= '" + parentValue + "'", sortString, DataViewRowState. CurrentRows );
If (dv. Count> 0)
{
// Select the parent node at the same level
Dv. RowFilter = parentValueField + "= '" + dv [0] [parentValueField]. ToString () + "'";
Dv. Sort = sortString;
For (int j = 0; j <dv. Count; j ++)
{
If (dv [j] [keyField]. ToString () = parentValue)
{
If (j = dv. Count-1)
{
Gridline = "" + gridline;
}
Else
{
Gridline = "finished" + gridline;
}
}
}
GetTreeLine (parentValueField, dv [0] [parentValueField]. ToString (), keyField, dv [0] [keyField]. ToString (), sortString );
}
Dv. Dispose ();
}
}

Sample HTML code:
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "GridViewTree. aspx. cs" Inherits = "GridViewTree" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> Generate a tree-like display of the GridView </title>
<Style type = "text/css">
Body
{
Line-height: 16px;
Font-size: 14px;
}
Td
{
Padding: 0 2px;
}
</Style>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Table>
<Tr>
<Td valign = "top">
<Asp: DropDownList ID = "DropDownList1" runat = "server">
</Asp: DropDownList>
</Td>
<Td>
<Asp: GridView ID = "GridView1" runat = "server" BorderWidth = "1px" CellPadding = "3" GridLines = "Vertical"
AutoGenerateColumns = "False" BackColor = "White" BorderColor = "# E7E7FF" BorderStyle = "None">
<AlternatingRowStyle BackColor = "# F7F7F7"/>
<Columns>
<Asp: BoundField DataField = "ConText" HeaderText = "text"/>
<Asp: BoundField DataField = "id" HeaderText = "ID">
<ItemStyle HorizontalAlign = "Right" Width = "80px"/>
</Asp: BoundField>
<Asp: BoundField DataField = "ParentID" HeaderText = "parent ID">
<ItemStyle HorizontalAlign = "Right" Width = "80px"/>
</Asp: BoundField>
<Asp: BoundField DataField = "level" HeaderText = "Level">
<ItemStyle HorizontalAlign = "Right" Width = "80px"/>
</Asp: BoundField>
</Columns>
<FooterStyle BackColor = "# B5C7DE" ForeColor = "# 4A3C8C"/>
<HeaderStyle BackColor = "# 4A3C8C" Font-Bold = "True" ForeColor = "# F7F7F7"/>
<PagerStyle BackColor = "# E7E7FF" ForeColor = "# 4A3C8C" HorizontalAlign = "Right"/>
<RowStyle BackColor = "# E7E7FF" ForeColor = "# 4A3C8C"/>
<SelectedRowStyle BackColor = "# 738A9C" Font-Bold = "True" ForeColor = "# F7F7F7"/>
<SortedAscendingCellStyle BackColor = "# F4F4FD"/>
<SortedAscendingHeaderStyle BackColor = "# 5A4C9D"/>
<SortedDescendingCellStyle BackColor = "# D8D8F0"/>
<SortedDescendingHeaderStyle BackColor = "#3E3277"/>
</Asp: GridView>
</Td>
</Tr>
</Table>
</Form>
</Body>
</Html>

Background code:
Copy codeThe Code is as follows:
DataTable dt = gvHelper. GetGridViewTreeData (datatable, "ParentID", "1", "ID", "ConText", "ConText asc ");
GridView1.DataSource = dt;
GridView1.DataBind ();
DropDownList1.Items. Add ("");
DropDownList1.AppendDataBoundItems = true;
DropDownList1.DataSource = dt;
DropDownList1.DataTextField = "ConText ";
DropDownList1.DataValueField = "ID ";
DropDownList1.DataBind ();