如何实现一个树状菜单（原创）

注意：有些图片不能直接黏贴上来，详细见附件

一、

最近任务实现一个树状菜单，最开始，我打算使用：

Pro-Man（写在jsp页面）

Book(01)

---Book Search(011)

---Book Add(012)

Flower(02)

---- Flower Search(021)

              ---- Flower Add(022)

将每条存成一个记录，给表增加一个rankcode字段（括号里的值），这样，把数据库里的值一次性取出来，按照rankcode排序，可以得到如上的顺序的list对象。

事实证明：可以取出来，并显示，而且，我也实现了点击一级，所有收起，点击二级，对应的三级收起。我使用的是js，完全自己写js实现的折叠。

结果：效果实现了，但是，特别不美观，好像一级二级三级都独立，页面看不到那种树桩感觉。因为

////////图见附件

那个连接的线条没有，图片很难加上，而且图片和文字布局、文字和文字间的布局也很难把握，所以，想使用这个方法的念头打消了。

二、

后来发现了一个组件特别好用，研究了好一阵才整出来：dtree.js这个是Jquery提供的一个工具。下面就详细介绍一下如何实现一个树状菜单，以及遇到的问题：

1>准备工作：

1.       需要的js：dtree.js、jquery.js

2.       dtree.css、img（里面有上图中的线条和基本的电脑图形、光盘图形等。我们可以往里面添加新的图形，也可以替换掉某些图形。注意dtree.css引用了img里的图形，如线条，如树状菜单的根目录默认是img/base.gif）

3.       需要的jar包：json-lib-2.1.jar而json又依赖下面这几个包：commons-lang-2.4.jar、commons-logging-1.1.1.jar、json-lib-2.2.3-jdk13.jar、ezmorph-1.0.6.jar、commons-collections-3.2.1.jar

2>简介：后台Action使用json，将Menu对象封装进List，使用jquery.js提供的方法，将list转为json字符串：

////////图见附件

此外Action中还有一个方法：

////////图见附件

这个看到前台页面就知道为什么我们用俩个方法了。

3>前台显示：

1.main.html

////////图见附件

Src对应的是上面的menu()方法，返回的是left.jsp

2.left.jsp

////////图见附件

红线是框起来的是关键点:使用jquery.js和dtree.js来操作后台传来的json字符串（其实是数组形式）：

[{"id":1,"parentId":-1,"role":10,"label":"Proto_Management","url":"welcome.action"},{"id":2,"parentId":1,"role":3,"label":"sim","url":""},{"id":3,"parentId":1,"role":3,"label":"proto","url":""}]

4>看一下数据库：

////////图见附件

三、遇到的问题

1.后台的json字符串可以取到，前台也可以alert出来，可就是tree.add（）一句进不去值

解决：

1.  数据库：

1>根节点的id可以是0、1等任何都可以，但是其pid要为-1,（不可以为0）

2>要录完一级、录二级、三级、这样按照顺序来，否则会影响树状菜单的构成

3>url可以为空，但是pid不能为空

2.  添加上 async:false

3.  query.js和dtree.js是可以混合用的如上图：紫框框是query.js里封装ajax的使用，框里的红线是dtree.js里的函数添加节点。

4.  一定要引入dtree.css和img。因为这个关系到树状菜单的显示效果。我们可以调整css，可以替换图片。

四、补充：dtree.add()方法里用到的几个参数及含义：

////////图见附件

具体参看：