我們要使用treeView,首先需要對應樹狀圖關係的表結構,如省市區的結構,大概如下
完成效果圖(省市區結構),大概如下:
新增一個citys.aspx頁面,在頁面中添加treeView
<div> <asp:TreeView ID="compTreeView" runat="server" OnSelectedNodeChanged="compTreeView_SelectedNodeChanged"> </asp:TreeView> </div>
後臺調用的方法
/// <summary> /// 遞歸添加樹的節點 /// </summary> /// <param name="ParentID"></param> /// <param name="pNode"></param> public void AddTree(string ParentId, TreeNode pNode) { DataSet ds = (DataSet)this.ViewState["ds"]; DataView dvTree = new DataView(ds.Tables[0]); //過濾ParentID,得到當前的所有子節點 var code = ParentId == "" ? $"[code]=440000" : $"[parent_code]={ParentId}"; dvTree.RowFilter = code; foreach (DataRowView Row in dvTree) { TreeNode Node = new TreeNode(); if (pNode == null) { //添加根節點 Node.Text = Row["name"].ToString(); Node.Value = Row["code"].ToString(); compTreeView.Nodes.Add(Node); Node.Expanded = true; AddTree(Row["code"].ToString(), Node); //再次遞歸 } else { //̀添加當前節點的子節點 Node.Text = Row["name"].ToString(); Node.Value = Row["code"].ToString(); pNode.ChildNodes.Add(Node); Node.Expanded = false; AddTree(Row["code"].ToString(), Node); //再次遞歸 } } } /// <summary> /// 獲取樹狀結構的數據 /// </summary> public void GetTreeData() { // 定義數據庫連接 SqlConnection CN = new SqlConnection(); try { //初始化連接字符串 CN.ConnectionString = "data source=.;initial catalog=ACT_220820;user id=sa;Password=sa;"; CN.Open(); SqlDataAdapter adp = new SqlDataAdapter("select * from act_citys order by code asc", CN); DataSet ds = new DataSet(); adp.Fill(ds); this.ViewState["ds"] = ds; } catch (Exception) { //̀跳轉程序的公共錯誤處理頁面 } finally { CN.Close(); } //調用遞歸函數,完成樹形結構的生成 AddTree("", (TreeNode)null); } /// <summary> /// compTreeView的選中節點事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void compTreeView_SelectedNodeChanged(object sender, EventArgs e) { //獲取選中節點的value和text string nodeValue = compTreeView.SelectedNode.Value; string nodeText = compTreeView.SelectedNode.Text; //置選中節點的Selected屬性爲false compTreeView.SelectedNode.Selected = false; }
記得在後臺的Page_load 添加
protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { GetTreeData(); } }
其中compTreeView_SelectedNodeChanged()函數是節點選中事件,可以做這個方法做下業務。(如左邊省市區樹狀結構,右邊單位信息,通過點擊對於節點過濾查詢單位信息等)