一款很好用的JQuery dtree树状图插件

树状图  -dtree

由于他的节点设置思想不错，使连接数据库的数据库设计比较方便。

下载dtree资源包，引用一下dtree.css和dtree.js文件，然后编写节点就行了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dtreeDemo</title>
<link href="dtree/dtree.css" type=text/css rel=stylesheet>
<script src="dtree/dtree.js" type=text/javascript></script>
</head>

<body>

<p><a href="javascript: d.openAll();">打开全部</a> | <a href="javascript: d.closeAll();">关闭全部</a></p>

<script type="text/javascript">
  
   d = new dTree("d", "img/dtree/");
  
   d.config.useCookies = false;//不使用cookies
   d.config.useStatusText = true; //状态栏显示文本
   d.config.closeSameLevel = true; //关闭同一层次其他节点
  
   //root
   d.add(0, -1, "客户关系管理系统");
  
   //一级导航
   d.add(1, 0, "客户信息", "", "", "mainFrame");
   d.add(2, 0, "客户服务", "", "", "mainFrame");
   d.add(3, 0, "日程/任务", "", "", "mainFrame");
   d.add(4, 0, "项目管理", "", "", "mainFrame");
   d.add(5, 0, "系统管理", "", "", "mainFrame");
   d.add(6, 0, "数据字典", "", "", "mainFrame");
   d.add(7, 0, "消息提醒", "", "", "mainFrame");
  
   //二级节点
   d.add(11,1,"客户");
   d.add(12,1,"联系人");
  
   d.add(21,2,"客户投诉");
   d.add(22,2,"投诉报表");
  
   d.add(31,3,"日程");
   d.add(32,3,"任务");
  
   d.add(41,4,"项目立项");
   d.add(42,4,"项目审批");
   d.add(43,4,"项目进程");
   d.add(44,4,"项目总结");
   d.add(45,4,"项目交易");
  
   d.add(51,5,"用户");
   d.add(52,5,"角色");
  
   d.add(61,6,"企业类型-分类");
   d.add(62,6,"企业性质-类型");
   d.add(63,6,"开户银行-分类");
   d.add(64,6,"信息来源-分类");
   d.add(65,6,"客户满意度-分类");
   d.add(66,6,"客户级别-分类");
  
   d.add(71,7,"短消息");
   
   document.write(d);

//d.add(id,pid,name,url,title,target);

//id:编号 pid:父节点 name:名称 url:url地址 title:标题 target:跳转框架
</script>

</body>
</html>

效果图：

转载于:https://www.cnblogs.com/bailuobo/p/3967836.html

一款很好用的JQuery dtree树状图插件（一）相关推荐

  1. ajax轮播图控件,基于json数据的jquery卡片轮播图插件

    这是一款基于json数据的jquery卡片轮播图插件.该插件通过ajax来获取卡片的信息,动态显示卡片.它还提供不使用ajax的方式来获取数据,和其它一些api接口. 使用方法 在页面中引入jquer ...

  2. 树状图JQuery.ztree插件的使用

    一. 树状图,顾名思义就是树形状的图,想必大家对它也不陌生,而且天天都在用的.就比如文件资源管理器里面左侧功能,它就是一个树状图,使用树状图可以很方便快捷地找到所需要的文件,而且对于文件的管理也是非常 ...

  3. html树状图在线画板,五款在线思维导图工具，总有一款适合你

    原标题:五款在线思维导图工具,总有一款适合你 思维导图是表达发散性思维的有效图形思维工具,通过一些主要的关键词,用非线性的方式展现出来.思维导图的真正用处不是让你能直接获得多少多少的好处,它更多的,还 ...

  4. 基于JQuery 编写轮播图插件

    基于JQuery 编写轮播图插件 不管是实际开发还是平时的小项目中 ,页面一定有且多个的轮播图,那么为了效率大家可以考虑封装这样的小插件.下面一起看看他的使用方法吧 使用需要准备(往下滑动会看到): ...

  5. jQuery制作树状表格

    使用jQuery制作树状表格.若需要改为动态页面,所需要修改的js以标注. 采用递归的方法对已展现的部分进行缓存. 表格内容采用html拼接,方便修改. 代码基本最简.没有做封装. <!DOCT ...

  6. jQuery百叶窗轮播图插件

    下载地址 这款jQuery图片轮播插件提供了多种百叶窗风格的图片切换方式,每一种百叶窗风格都是随机产生的.另外这款jQuery多百叶窗风格切换焦点图插件支持悬浮文字描述,同时也支持自动播放.相信它可以 ...

  7. 一款很好用的Jquery 打印插件——jQuery.print.js

    https://blog.csdn.net/JodenHe/article/details/70313604?locationNum=3&fps=1 登录网址https://github.co ...

  8. jquery饼状图插件的指引线_JQuery图表插件Highcharts示例教程

    JQuery图表插件Highcharts示例教程,先上图,大伙Show一下效果:先上三个图,分别是曲线.柱状.扇形. 图表中的数据纯属于DEMO的测试数据,没有实际用意.下面讲下大致的实现步骤 第一步 ...

  9. jquery饼状图插件的指引线_绘制指引线的JS库leader-line

    前言 之前看到一篇推荐Magi这个搜索引擎的新闻,对于这个搜索引擎是否好用咱们不予置评,但是我在这个搜索引擎上面发现了一个好玩的前端功能. 如上图,将鼠标浮动到学习来源上时,会展示一堆指引线. 本博客 ...

最新文章

  1. mvn如何执行java代码
  2. 笔记本Wifi连接出现“设置与网络连接不匹配”的解决方法
  3. C语言 跨函数使用内存.
  4. gwt前台开发_为GWT设置开发环境
  5. JUnit 5符合AssertJ
  6. 【渝粤题库】广东开放大学 跨境电商搜索引擎优化 形成性考核
  7. java.lang.reflect.InvocationTargetException 的惨痛教训
  8. java获取本周的开始时间和结束时间_创业板注册制开始时间/股票开户流程结束后，怎么炒股？...
  9. Zjoi2011 看电影
  10. Python自省函数getattr的用法
  11. 微服务架构-设计总结
  12. 记一次物理服务器Linux系统中未找到网卡的处理方式
  13. Elasticsearch（三）使用 Kibana 操作 ES
  14. andorid自动化测试之Monkey（上）
  15. 职场中哪些职场很重要？
  16. css超出部分省略号显示
  17. php在foreach循环后留下数组的引用问题
  18. js数字时钟 js桌面时钟 js获得系统当前时间
  19. 时间和空间复杂度的计算方法
  20. 一度智信：拼多多新店如何打造爆品

热门文章

  1. Ubuntu下查找命令
  2. Android数据之Json解析
  3. python运算符讲解_3.Python运算符详解
  4. BZOJ 3740. 【TJOI2014】电源插排
  5. [codevs 1922] 骑士共存问题
  6. AtCoder AGC035D Add and Remove (状压DP)
  7. 计算机组装与维修说课稿,大班《生活中的数字》说课稿
  8. Linux系统怎么挂载安卓手机,NFS挂载Android文件系统
  9. 搭建python selenium 自动化测试框架_Selenium3与Python3实战 Web自动化测试框架（一）...
  10. python画散点图程序实例_【112】用python画散点图和直线图的小例子