看方力勛的javaWeb,采用左右值來表示樹型結構（就是俺門的多級分類）
表結構
頁面代碼
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>樹狀結構</title> <script src="${pageContext.request.contextPath }/js/xtree.js"></script> <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/css/xtree.css"> </head> <body> <script type="text/javascript"> <c:forEach var="c" items="${list}"> <c:if test="${c.depth==1}"> var tree = new WebFXTree('${c.name}'); tree.target="right"; tree.action = "${pageContext.request.contextPath}/servlet/AddChildServlet?id=${c.id}"; </c:if> <c:if test="${c.depth==2}"> var node${c.depth} = new WebFXTreeItem('${c.name}'); node${c.depth}.target="right"; node${c.depth}.action = "${pageContext.request.contextPath}/servlet/AddChildServlet?id=${c.id}"; tree.add(node${c.depth}); </c:if> <c:if test="${c.depth>2}"> var node${c.depth} = new WebFXTreeItem('${c.name}'); node${c.depth}.target="right"; node${c.depth}.action = "${pageContext.request.contextPath}/servlet/AddChildServlet?id=${c.id}"; node${c.depth-1}.add(node${c.depth}); </c:if> </c:forEach> document.write(tree); </script> </body> </html>
呈現后html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>樹狀結構</title> <script src="/AAPlan/js/xtree.js"></script> <link type="text/css" rel="stylesheet" href="/AAPlan/css/xtree.css"> </head> <body> <script type="text/javascript"> var tree = new WebFXTree('商品'); tree.target="right"; tree.action = "/AAPlan/servlet/AddChildServlet?id=1"; var node2 = new WebFXTreeItem('平板電視'); node2.target="right"; node2.action = "/AAPlan/servlet/AddChildServlet?id=2"; tree.add(node2); var node3 = new WebFXTreeItem('長虹'); node3.target="right"; node3.action = "/AAPlan/servlet/AddChildServlet?id=5"; node2.add(node3); var node3 = new WebFXTreeItem('索尼'); node3.target="right"; node3.action = "/AAPlan/servlet/AddChildServlet?id=6"; node2.add(node3); var node2 = new WebFXTreeItem('冰箱'); node2.target="right"; node2.action = "/AAPlan/servlet/AddChildServlet?id=3"; tree.add(node2); var node3 = new WebFXTreeItem('西門子'); node3.target="right"; node3.action = "/AAPlan/servlet/AddChildServlet?id=7"; node2.add(node3); var node2 = new WebFXTreeItem('筆記本'); node2.target="right"; node2.action = "/AAPlan/servlet/AddChildServlet?id=4"; tree.add(node2); var node3 = new WebFXTreeItem('thinkpad'); node3.target="right"; node3.action = "/AAPlan/servlet/AddChildServlet?id=8"; node2.add(node3); var node3 = new WebFXTreeItem('dell'); node3.target="right"; node3.action = "/AAPlan/servlet/AddChildServlet?id=9"; node2.add(node3); document.write(tree); </script> </body> </html>
說明:
1.根據上面的數據列表可以知道，某個node節點的父節點是最近一個depth比當前節點小一的節點,通過node${c.depth-1}.add(node${c.depth})可以將當前節點添加到最近一次定義的上層節點下（也就是父節點）。
2.可以看到呈現 ，有多個var node2=... 或 var node3=... 這樣的變量重復定義，由於javascript中出現變量重復定義時，當前行javascript代碼會采用最近一次變量定義的值(如果最近一次只var xx; 沒有附值，那么當前代碼會采用次最近一次定義的值，以此類推)，所以上面代碼能正常運行.
關於Xtree
var node=new WebFXTreeItem("xxx") 類，如果有調用node.add( node_sub),那么改node顯示成文件夾，如果沒有那么該node顯示成文件
一點改進意見:
雖然上面的代碼運行正常但是多個var nodex=...總讓人有點意見
方法一:
上來先來一句定義,var node1,node2...,nodex 這樣下面的代碼只要寫node=....就好了
當然這樣頁面上會有大量的node=new xxxx 樣子的代碼，如果 分類條目很多的話。
方法二:
將分類數據存在成一個javascript數組,並且獨立到一個servletCategory中，采用js引用方式加到頁面中
然后使用js根據數組內容構建tree並輸出.
大致的js代碼是，定義一個parentNode,記錄最近一次的parent節點位置，如果當前節點的level小於或等於parentNode的level，
就從parenNode的位置往回找到最近一個level小於當前節點level的節點(Xtree的節點有parentNode屬性可以獲取到父節點,
另外level 屬性可以直接在節點上擴展 var tree=new WebFXTree("xxx") ; tree.level=3 )。
另外需要定義prevNode記錄最近一個節點，當當前curLevel-ParentLevel>=2 時(進入隔代級別時)，將prevNode附值給parentNode
參考:
http://www.cnblogs.com/wdfrog/archive/2008/09/26/1299549.html