如何实现一个树状菜单（原创）
？下图为设置了valueAxis:x生活生计是一种连绵不绝的渴望，渴望络续上升，变得更巨大而崇高。重视：有些不克不及直接黏贴上来，具体见附件自古成功之大人物，莫不从铁中来，血中来，荆棘中来，冰雪中来。 一言以备之曰：忧患者豪杰之原料也。一、比来任务实现一个树状菜单，最开端，我筹算应用：Pro-Man（写在jsp页面）Book（01）---Book Search（011）---Book Add（012）Flower（02）---- Flower Search（021）?---- Flower Add（022）将每条存成一个记录，给表增长一个rankcode字段（括号里的值），如许，把数据库...全部
？下图为设置了valueAxis:x生活生计是一种连绵不绝的渴望，渴望络续上升，变得更巨大而崇高。重视：有些不克不及直接黏贴上来，具体见附件自古成功之大人物，莫不从铁中来，血中来，荆棘中来，冰雪中来。
一言以备之曰：忧患者豪杰之原料也。一、比来任务实现一个树状菜单，最开端，我筹算应用：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。js2。? 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。jar2>简介：后台Action应用json，将Menu对象封装进List，应用jquery。js供给的办法，将list转为json字符串：////////图见附件此外Action中还有一个办法：////////图见附件这个看到前台页面就知道为什么我们用俩个办法了。
3>前台显示：1。main。html////////图见附件Src对应的是上方的menu（）办法，返回的是left。jsp2。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:false3。? query。js和dtree。js是可以混实用的如上图：紫框框是query。js里封装ajax的应用，框里的红线是dtree。js里的函数添加节点。4。
? 必然要引入dtree。css和img。因为这个关系到树状菜单的显示结果。我们可以调剂css，可以调换。四、补充：dtree。add（）办法里用到的几个参数及含义：////////图见附件具体参看：杜伽尔。
收起
