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了.
JQuery,C#,sqlServer 实现无极限多级树形控件的更多相关文章
- 基于jquery的可查询多级select控件(可记录历史选择)
一.功能和使用 公司有功能需求,还要一条代码引入的控件,网上找完全符合的控件比较难,寻找所花的时间还不如自己写一个,所以找个空闲时间自己写了一个 控件功能:1.可手动输入查询,也可点击下拉框查询, ...
- 基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串、list集合(MVC5)<二>
上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...
- jQuery树形控件zTree使用小结
作者:Fonour 字体:[增加 减小] 类型:转载 时间:2016-08-02我要评论 这篇文章主要为大家详细介绍了jQuery树形控件zTree使用方法,zTree树插件的基本使用方法,感兴趣的小 ...
- jQuery树形控件zTree使用
http://www.cnblogs.com/AutumnRhyme/p/5915769.html .................................................. ...
- Jquery树形控件 $.fn.zTree.init
https://www.cnblogs.com/jin-/p/4646202.html asp.net 树形控件 $.fn.zTree.init 在网页中通过jquery脚本来构筑树形控件将是一个不错 ...
- Web应用程序开发,基于Ajax技术的JavaScript树形控件
感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用, ...
- js树形控件—zTree使用总结
0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 ...
- jasonTree多选多级树控件
jasonTree1.0 jasonTree多选多级树控件(名字是自己取),用于友好的展示树形结构的数据,并可以多选,传统的做法是在一个select的下拉框中显示一个可折叠的树结构,公司的需求人员这种 ...
- Android 打造任意层级树形控件 考验你的数据结构和设计
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40212367,本文出自:[张鸿洋的博客] 1.概述 大家在项目中或多或少的可能会 ...
随机推荐
- Android随笔之——跨进程通信(一) Activity篇
在Android应用开发中,我们会碰到跨进程通信的情况,例如:你用QQ通讯录打电话的时候会调用系统的拨号应用.某些新闻客户端可以将新闻分享到QQ.微信等应用,这些都是跨进程通信的情况.简而言之,就是一 ...
- react-native 学习之Image篇
/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import Rea ...
- js 对Array的补充
Array.form的用法 1.可以将各种值转为真正的数组,并且还提供map功能.这实际上意味着,只要有一个原始的数据结构,你就可以先对它的值进行处理,然后转成规范的数组结构,进而就可以使用数量众多的 ...
- struts2学习笔记--使用Validator校验数据
我们在进行一些操作是需要对用户的输入数据进行验证,比如网站的注册,需要对各个数据项进行数据校验,Struts2提供了一些默认的校验器,比如数字的检测,邮箱的检测,字符串长度的检测等等. 常用的Vali ...
- 在Mac下运行ASP.NET Core应用程序
在Mac下运行ASP.NET Core应用程序 通过参照.NET Core相关官方文档,在我的Mac电脑上用Visual Studio Code创建了我的第一个ASP.NET应用. 开发环境搭建 首先 ...
- EF中的开放式并发(EF基础系列--28)
好久没更新EF这个系列了,现在又重新开始. 这次学习,开放式并发.首先拿出数据库脚本: 说明一下,这个数据库脚本是之前的章节中稍作修改的: USE [SchoolDB] GO /****** Obje ...
- The Practice of .NET Cross-Platforms
0x01 Preface This post is mainly to share the technologies on my practice about the .NET Cross-Platf ...
- LaTeX
毕业论文用LaTeX编辑,方便使用,专注于内容.无须分心于格式. 字符 - Char 希腊符号 加粗 \usepackage{amsmath} \boldsymbol{\sigma} \usepack ...
- spring aop配置出错
Multiple annotations found at this line: - schema_reference.4: Failed to read schema document 'http: ...
- 【转】微信小程序给程序员带来的可能是一个赚钱的机遇
自上周被微信小程序刷屏之后,这周大家都在谈微信小程序能够带来哪些红利的话题,其实我想从程序员的角度来谈谈,带给我们程序员来的红利,或许是我们程序员创业或者赚钱的机遇. 其实我从<作为移动开发程序 ...