码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-09-12 11:43:13      阅读:283      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   使用   java   ar   

一款很好用的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>

 

效果图:


bubuko.com,布布扣

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

标签:style   blog   http   color   io   os   使用   java   ar   

原文地址:http://www.cnblogs.com/bailuobo/p/3967836.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!