利用数据库中的主子关系创建网页中的树状结构(列表，ul/li)

本文链接：https://blog.csdn.net/G1036583997/article/details/20202009

本文介绍了如何利用数据库中基于ParentID的主子关系来创建网页上的树状结构。首先，讨论了数据库表结构的设计，强调了ParentID作为层级标识的重要性。接着，展示了在前台代码中如何为li标签添加点击事件以实现交互功能。最后，详细说明了后台如何接收参数，根据ID查询相关数据，并重新绑定数据以显示树形结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.数据库结构

要包含主子关系（ParentID做为本级的上一级，id做为本级的标识）表的结构有待完善，这只是最差的表现形式，下面的A001等是树状结构之下的订单号码。

2.前台代码

为li标签添加单击事件。

 //点击获取部门ID
        function GetClickValue() {
            $(".strTree li div").click(function () {
                var id = "";
                //子目录 
                $(this).parent().find("span").each(function () {
                    if ($(this).html() != "") {
                        id += "'" + $(this).html() + "',";
                    }
                });
                id = id.substr(0, id.length - 1);
                var path = 'List.aspx?id=' + id;  //传递参数
                window.parent.frames["target_right"].location = path;
                Loading(true);
            })
        }
    </script>

<ul class="strTree"> <%-对应上面的 $(".strTree li div")-%>
            <%=strHtml.ToString()%> <%-前后台传递的参数-%>
        </ul>

3.后台代码（截取代码段不能直接运行）

public StringBuilder strHtml = new StringBuilder(); //前后台进行传递的桉树

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!base.IsPostBack)
            {
                this.InitInfo(); //初始化
            }
        }
        public void InitInfo()
        {
            DataTable dtOrg = this.user_idao.GetSuppPurchTreeList(); //自定义的接口函数，后面是查出来的DataTable的值。（只取两个月内的）
//SELECT * FROM t_supp_PurchTree where CreateDate between dateadd(MONTH,-2,GETDATE()) and getdate() ORDER BY id ASC
            if (DataTableHelper.IsExistRows(dtOrg))
            {
                foreach (DataRowView drv in new DataView(dtOrg)   //过滤条件，RowFilter。
                {
                    RowFilter = "ParentId = '0'"   
                })
                {
                    this.strHtml.Append("<li>");
                    this.strHtml.Append("<div>" + drv["TreeName"].ToString());
                    this.strHtml.Append("<span style='display:none'>" + drv["id"].ToString() + "</span></div>");//传递参数值可以修改
                    this.strHtml.Append(this.GetTreeNode(drv["id"].ToString(), dtOrg));  //绑定父项中的子项
                    this.strHtml.Append("</li>");
                }
            }
            else
            {
                this.strHtml.Append("<li>");
                this.strHtml.Append("<div><span style='color:red;'>暂无数据</span></div>");
                this.strHtml.Append("</li>");
            }
        }
        public string GetTreeNode(string parentID, DataTable dtNode)
        {
            StringBuilder sb_TreeNode = new StringBuilder();
            DataView dv = new DataView(dtNode);
            dv.RowFilter = "ParentId = '" + parentID + "'";
            if (dv.Count > 0)
            {
                sb_TreeNode.Append("<ul>");
                foreach (DataRowView drv in dv)
                {
                    sb_TreeNode.Append("<li>");
                    sb_TreeNode.Append("<div>" + drv["TreeName"]);
                    sb_TreeNode.Append("<span style='display:none'>" + drv["id"].ToString() + "</span></div>");//传递参数值可以修改
                    sb_TreeNode.Append(this.GetTreeNode(drv["id"].ToString(), dtNode));
                    sb_TreeNode.Append("</li>");
                }
                sb_TreeNode.Append("</ul>");
            }
            return sb_TreeNode.ToString();
        }