很多人在開發中遇到過這樣的問題：一個表，有自己編號，內容，上級編號，如何用這些資料在jsp中構造一個樹？
做樹並不複雜，但我們通常做的是2層或3層，那樣的資料一般來自多個表，比如：部門，員工
然而這種自串連的表，其沒有確定的層次，可能是無限多級
比如：a是b的上級，b是c的上級，c是d的上級...
每個上級有幾個下級，下級的層次，都是動態
解決這個問題，其實主要用到js的知識
可以使用div的innerHTML 屬性
當然也可以用table，用append的方法
下面就用div的innerHTML 屬性來實現
主要思路是通過super，在document中尋找id與自身super關聯的div，這個div就是自身的上級，把自己附加到這個div中就可以了
另外，通過設定自己的title，儲存了自己上級的id
為了看到層層縮排效果，設定了div的style為左邊距有10px
+ 和 - 通過div中的span實現，這裡改變的是span的innerHTML，也可以換為用圖片，改變img的src即可
而在點擊這些 + 或 - 的時候，會調用一個js函數，傳入自己的id，這個函數會在document的所有div中尋找自己的下級，由於每個div的title儲存了其上級的id，所以只有找到那些title為自己id的就可以了
找到這些下級，就設定其隱藏或顯示即可
<%@ page language="java" import="java.sql.*,java.util.*" pageEncoding="gbk" contentType="text/html; charset=gbk" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
//類比資料庫的資料
//無限層次的樹 －－ 作者:NImmy 需要：JSTL標準標籤庫
//類比資料庫資料:每行資料包括--自己ID,自己內容,父親ID
ArrayList ary = new ArrayList(); //所有資料
String[] ary1 = new String[]{"1","item1","0"}; //每行資料
ary.add(ary1);
ary1 = new String[]{"2","item2","0"};
ary.add(ary1);
ary1 = new String[]{"3","item3","0"};
ary.add(ary1);
ary1 = new String[]{"4","item1_1","1"};
ary.add(ary1);
ary1 = new String[]{"5","item1_2","1"};
ary.add(ary1);
ary1 = new String[]{"6","item1_2_1","5"};
ary.add(ary1);
ary1 = new String[]{"7","item1_2_2","5"};
ary.add(ary1);
ary1 = new String[]{"8","item2_1","2"};
ary.add(ary1);
ary1 = new String[]{"9","item2_1_1","8"};
ary.add(ary1);
ary1 = new String[]{"10","item2_2","2"};
ary.add(ary1);
ary1 = new String[]{"11","item3_1","3"};
ary.add(ary1);
ary1 = new String[]{"12","item3_2","3"};
ary.add(ary1);
request.setAttribute("lstAll",ary);
%>
<script>
//初始化樹
function ini() {
var str,str2,obj;
<c:forEach items="${lstAll}" var="row">
<c:set var="isShow" value="block" />
<c:set var="sOpe" value="+" />
<c:if test="${row[2]!='0'}"> <%--非根節點不顯示--%>
<c:set var="isShow" value="none" />
</c:if>
//alert("${row[2]}--${isShow}--${spe}");
obj = document.getElementById("div${row[2]}"); //上級DIV
//自身
str2 = "<div style='display:${isShow}' id='div${row[0]}' title='${row[2]}'><span id='span${row[0]}' onclick='ope(${row[0]})'>${sOpe}</span> ${row[1]}</div>";
str = obj.innerHTML; //擷取上級原來的內容
str = str + str2; //附加自己
obj.innerHTML = str; //用附加後的字串設定上級的新內容
</c:forEach>
}
//點某個節點時，展開或隱藏其下級
function ope(id) {
//首先改變 + 和 -
var obj = document.getElementById("span" + id);
if(obj.innerHTML == "+") {
obj.innerHTML = "-";
}
else {
obj.innerHTML = "+";
}
//然後找到下級[title為id的DIV]，並改變其可見度
var objs = document.getElementsByTagName("div"); //擷取所有的div
var len = objs.length;
//遍曆這些div,找到所有的下級，即： title為id 的div,對於這些下級
//如果原來是隱藏,就讓其顯示;否則,隱藏--通過設定其style的display即可
var i,title;
for(i=0;i<len;i++) {
obj = objs[i];
title = obj.title;
if(title==null || isNaN(title)) {
continue;
}
if(parseInt(title)==parseInt(id)) {
if(obj.style.display=="none") {
obj.style.display = "block";
}
else {
obj.style.display = "none";
}
}
}
}
</script>
<style>
div{margin-left:10px;color:darkblue}
span{color:red;cursor:hand}
</style>
<body onload="ini();">
<!-- 首先應該有DIV0 這裡0是根節點的上級編號，可以設定為自己資料中的相應資料-->
<div id="div0"></div>
------------------------------------------------------------------------------------------------------------------------------
大家可以進一步想，實際點每個內容的時候，一般會連結到某個url，那麼，這裡怎麼處理？
如果你熟悉html和js，當然就是很容易的
思路：資料庫中該表增加一個欄位，url，定義連結地址
在js中修改代碼
----------------------------------------------------------------------------------------------------------------------------------------
大家還可以考慮把它做成標籤，更方便
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
