利用dtree来实现树形下拉框。
利用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
- 上一篇：没有了
- 下一篇：没有了
