JQuery,C#,sqlServer 实现无极限多级树形控件

最近好忙,好长时间没有更新博客了..........

先看效果图:

此控件利用了 JQuery 插件: treeview

google直接搜索就可以找到,这里就不提供链接了.

下载下来的压缩包包括了源码和一个demo.上面这个效果图其实就是Demo里的一个例子.从前台看上去真看不出它是个Tree.因为我们前天看到的只不过都是些<ul><li></li></ul>,显然 treeview.js 插件里实现了很多功能.

而我们今天要做的就是不关心 treeview.js 是怎么实现的.而是一心把数据库里我们的分类调出来,然后用C#处理逻辑,最后显示在一个aspx页面.

先看数据库分类表:

在表里 ParentID 记录的是父类的 ID. 顶级父类(没有它的父类)的ParentID 我用-1表示,也可以是0,也可以是NULL.

C#从数据库中读取数据就不多说了.

只说明俩点:

1.把所有的数据读取到一个 DataTable 中.

2.把所有数据的ParentID(除去顶级父类的ParentID) 读取到一个list<string> 中(这里没有用list<int>).

下面开始C#部分:

//构造一个TreeView 这里只遍历ParentID不存在的项(即:顶级父类)
        protected string CreateTreeView()
        {
            StringBuilder srb = new StringBuilder();
            if (dt != null && dt.Rows.Count > 0)
            {
                foreach (DataRow item in dt.Rows)
                {
                    if (!list.Contains(item["ParentID"].ToString()))//并不是所有的都遍历,而是只遍历不存在父ID 的那几项
                    {
                        srb.AppendFormat("<li><span id="{0}" name="tree">{1}</span>", item["ID"].ToString(), item["ProductName"].ToString());
                        if (IsParent(item["ID"].ToString()))
                        {
                            srb.Append(CreateChildTree(item["ID"].ToString()));
                        }
                        srb.Append("</li>");
                    }
                }
            }

            return srb.ToString();
        }

蓝色的部分是一个判断函数,判断当前数据的ID是不是在 list<string> 中.如果是,将一直往下执行到红色的函数.

        //检查此ID是否在父ID集合中
        private bool IsParent(string ID)
        {
            bool P = false;
            if (list != null && list.Count > 0)
            {
                if (list.Contains(ID))
                {
                    P = true;
                }
            }
            return P;
        }

红色的函数是一个递归函数,

        //根据父id找到对应的所有之类返回字符串
        private string CreateChildTree(string ID)
        {
            StringBuilder childStr = new StringBuilder();
            if (dt != null && dt.Rows.Count > 0)
            {
                childStr.Append("<ul>");
                foreach (DataRow item in dt.Rows)
                {
                    if (item["ParentID"].ToString() == ID)
                    {
                        childStr.AppendFormat("<li><span id="{0}" name="tree">{1}</span>", item["ID"].ToString(), item["ProductName"].ToString());
                        if (IsParent(item["ID"].ToString()))
                        {
                            childStr.Append(CreateChildTree(item["ID"].ToString()));//执行递归
                        }
                        childStr.Append("</li>");
                    }
                }
                childStr.Append("</ul>");
            }
            return childStr.ToString();
        }

红色的节点将一直递归当前节点的子节点,直到遍历完为止. 然后返回构造的字符串.

最后由:CreateTreeView()函数把字符串写入到aspx页面.这样就ok了.