利用dtree来实现树形下拉框。

来源：互联网发布：如何登录手机淘宝账号编辑：程序博客网时间：2024/05/22 12:29

利用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.*" />

</head>
<body onload="javascript: d.openAll()">

<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