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

先看效果图:

此控件利用了 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了.

JQuery,C#,sqlServer 实现无极限多级树形控件的更多相关文章

  1. 基于jquery的可查询多级select控件(可记录历史选择)

    一.功能和使用 公司有功能需求,还要一条代码引入的控件,网上找完全符合的控件比较难,寻找所花的时间还不如自己写一个,所以找个空闲时间自己写了一个   控件功能:1.可手动输入查询,也可点击下拉框查询, ...

  2. 基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串、list集合(MVC5)<二>

    上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...

  3. jQuery树形控件zTree使用小结

    作者:Fonour 字体:[增加 减小] 类型:转载 时间:2016-08-02我要评论 这篇文章主要为大家详细介绍了jQuery树形控件zTree使用方法,zTree树插件的基本使用方法,感兴趣的小 ...

  4. jQuery树形控件zTree使用

    http://www.cnblogs.com/AutumnRhyme/p/5915769.html .................................................. ...

  5. Jquery树形控件 $.fn.zTree.init

    https://www.cnblogs.com/jin-/p/4646202.html asp.net 树形控件 $.fn.zTree.init 在网页中通过jquery脚本来构筑树形控件将是一个不错 ...

  6. Web应用程序开发,基于Ajax技术的JavaScript树形控件

    感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用, ...

  7. js树形控件—zTree使用总结

    0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 ...

  8. jasonTree多选多级树控件

    jasonTree1.0 jasonTree多选多级树控件(名字是自己取),用于友好的展示树形结构的数据,并可以多选,传统的做法是在一个select的下拉框中显示一个可折叠的树结构,公司的需求人员这种 ...

  9. Android 打造任意层级树形控件 考验你的数据结构和设计

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40212367,本文出自:[张鸿洋的博客] 1.概述 大家在项目中或多或少的可能会 ...

随机推荐

  1. Android随笔之——跨进程通信(一) Activity篇

    在Android应用开发中,我们会碰到跨进程通信的情况,例如:你用QQ通讯录打电话的时候会调用系统的拨号应用.某些新闻客户端可以将新闻分享到QQ.微信等应用,这些都是跨进程通信的情况.简而言之,就是一 ...

  2. react-native 学习之Image篇

    /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import Rea ...

  3. js 对Array的补充

    Array.form的用法 1.可以将各种值转为真正的数组,并且还提供map功能.这实际上意味着,只要有一个原始的数据结构,你就可以先对它的值进行处理,然后转成规范的数组结构,进而就可以使用数量众多的 ...

  4. struts2学习笔记--使用Validator校验数据

    我们在进行一些操作是需要对用户的输入数据进行验证,比如网站的注册,需要对各个数据项进行数据校验,Struts2提供了一些默认的校验器,比如数字的检测,邮箱的检测,字符串长度的检测等等. 常用的Vali ...

  5. 在Mac下运行ASP.NET Core应用程序

    在Mac下运行ASP.NET Core应用程序 通过参照.NET Core相关官方文档,在我的Mac电脑上用Visual Studio Code创建了我的第一个ASP.NET应用. 开发环境搭建 首先 ...

  6. EF中的开放式并发(EF基础系列--28)

    好久没更新EF这个系列了,现在又重新开始. 这次学习,开放式并发.首先拿出数据库脚本: 说明一下,这个数据库脚本是之前的章节中稍作修改的: USE [SchoolDB] GO /****** Obje ...

  7. The Practice of .NET Cross-Platforms

    0x01 Preface This post is mainly to share the technologies on my practice about the .NET Cross-Platf ...

  8. LaTeX

    毕业论文用LaTeX编辑,方便使用,专注于内容.无须分心于格式. 字符 - Char 希腊符号 加粗 \usepackage{amsmath} \boldsymbol{\sigma} \usepack ...

  9. spring aop配置出错

    Multiple annotations found at this line: - schema_reference.4: Failed to read schema document 'http: ...

  10. 【转】微信小程序给程序员带来的可能是一个赚钱的机遇

    自上周被微信小程序刷屏之后,这周大家都在谈微信小程序能够带来哪些红利的话题,其实我想从程序员的角度来谈谈,带给我们程序员来的红利,或许是我们程序员创业或者赚钱的机遇. 其实我从<作为移动开发程序 ...