利用dtree來實現如下圖所示的一個樹形下拉框。
一、普通JSP代碼,數據庫操作是利用spring的jdbcTemplate，可以根據自己的需要來更改。
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<jsp:directive.page import="org.springframework.context.ApplicationContext" />
<jsp:directive.page import="org.springframework.jdbc.core.JdbcTemplate" />
<jsp:directive.page import="org.springframework.jdbc.core.RowCallbackHandler" />
<jsp:directive.page import="org.springframework.web.context.support.WebApplicationContextUtils" />
<jsp:directive.page import="javax.servlet.http.*" />
<jsp:directive.page import="javax.sql.DataSource" />
<jsp:directive.page import="com.stutest.tool.*" />
<script src="js/treeselect.js"></script>
<script type="text/javascript" src="js/dtree.js"></script>
<script>
function f(text,id)
{
document.getElementById("SelctOrg").value=id;
document.getElementById("SelctOrg_Text").value=text;
}
</script>
<HTML>
<HEAD>
<link rel="StyleSheet" href="css/dtree.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="css/treeselect.css">
</head>
<body onload="javascript: d.openAll()">
<table border=1 >
<tr>
<td>可以選擇任何一個結點 ：
<script language="JavaScript">
<!--
d = new dTree('d');
d.add(0,-1,'樹形菜單');
<%
final List resourceList=null;
ApplicationContext ctx=WebApplicationContextUtils.getWebApplicationContext(this.getServletContext());
DataSource ds =(DataSource) ctx.getBean("TestSource");
JdbcTemplate jdbcTemplate=new JdbcTemplate(ds);
List list1 = jdbcTemplate.queryForList("SELECT * FROM department order by depart_id");
for(int i=0;i<list1.size();i++)
{
String did=""+((Map)list1.get(i)).get("depart_id");
String uid=""+((Map)list1.get(i)).get("depart_subid");
String dname=""+((Map)list1.get(i)).get("depart_jc");
out.println("d.add("+did+","+uid+",'"+dname+"','javascript:f(//'"+dname+"//',//'"+did+"//')')");
}
%>
CreateTreeSelect("SelctOrg",d,"","",380);
-->
</script>
</td>
<td>
asdfffffff
</td>
</tr>
<tr>
<td>ddddddddddddddddddddddddd</td>
<td>lasdkflasdjflasjdlfkjasdf</td>
</tr>
</table>
</body>
</html>
二、Struts2的前臺使用方式
<td height="30"> </td>
<td height="30" align="right" class="blacklog">上級機構 </td>
<td height="30" class="blacklog">
<script language="JavaScript">
d = new dTree('d');
d.add(0,-1,'機構選擇');
<s:iterator id="f" value="%{departlist}" status="stuts">
d.add(<s:property value="#f.depart_id"/>,<s:property value="#f.depart_subid"/>,'<s:property value="#f.depart_jc"/>','javascript:f(/'<s:property value="#f.depart_jc"/>/',/'<s:property value="#f.depart_id"/>/')');
</s:iterator>
CreateTreeSelect("SelctOrg",d,"","",200);
</script>
三、需要使用到的js ，css文件有下面幾個：
dtree.css
treeselect.css
treeselect.js (這個是參考網友的，由於網上轉載太多，也不知原創是哪一位)
dtree.js