WebForm中的treeView的簡單使用

我們要使用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()函數是節點選中事件,可以做這個方法做下業務。(如左邊省市區樹狀結構,右邊單位信息,通過點擊對於節點過濾查詢單位信息等)

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章