一款很好用的JQuery 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>
效果图：