通用js树形导航【下】

   在上文中 通用js树形导航【上】 我们已经实现了一个动态的 js 导航树，节点信息从数据库中读取，添加修改或者删除节点内容，我们的展示层和业务逻辑层的代码一句与不用更改。
    现在有一个问题我们在 jsp  页面通过循环显示出了集合中的值，并将其作为参数传递给 add 方法。能不能我在页面做的再简单点呢？接着封装，我们将实现的步骤封装到 业务类中，业务类返回一个 String 之后我们只需要在页面中显示这个 String 就 Ok 了！

首先我们要修改业务类的方法，需要返回一个 String 类型的字符串
DBManager.java  数据库访问类 并取得 DTree 表中的所有数据 封装在一个 StringBuffer 中

package com.ant.dao; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.ArrayList; import java.util.List; import com.accp.po.DTree; public class DBManager {     private static final String DRIVER = "com.microsoft.sqlserver.jdbc.SQLServerDriver";     private static final String URL = "jdbc:sqlserver://localhost:1433;databaseName=tree";     private static final String SA = "sa";     private static final String PWD = "sqlpwd";     private static Connection conn=null;     // 打开连接     public static void getConnection() {         try {             Class.forName(DRIVER);             conn = DriverManager.getConnection(URL, SA, PWD);         } catch (ClassNotFoundException e) {             e.printStackTrace();         } catch (SQLException e) {             e.printStackTrace();         }     }     // 关闭连接     public void closeConnection() {         if (conn != null) {             try {                 if (!conn.isClosed()) {                     conn.close();                     conn = null;                 }             } catch (SQLException e) {                 e.printStackTrace();             }         }     }     // 执行在查询     public static ResultSet executeQuery(String sql) {         getConnection();         Statement st;         try {             st = conn.createStatement();             return st.executeQuery(sql);         } catch (SQLException e) {             e.printStackTrace();         }         return null;     }     // 得到所有的节点     public static String getAll() {         ResultSet rs = executeQuery("select * from dtree");         List<DTree> li = new ArrayList<DTree>();         DTree d = new DTree();         try {             //这里可以直接封装到 StringBuffer 中             while (rs.next()) {                 d = new DTree();                 d.setId(rs.getInt("id"));                 d.setPid(rs.getInt("pid"));                 d.setName(rs.getString("name"));                 d.setUrl(rs.getString("url"));                 d.setTitle(rs.getString("title"));                 d.setTarget(rs.getString("target"));                 d.setIcon(rs.getString("icon"));                 d.setIconOpen(rs.getString("iconOpen"));                 d.setOpen(rs.getString("open"));                 li.add(d);             }             StringBuffer contents = new StringBuffer();             contents.append("d = new dTree('d');");             for (DTree tn : li) {                 contents.append("\n");                 contents.append("d.add('");                 contents.append(tn.getId());                 contents.append("','");                 contents.append(tn.getPid());                 contents.append("','");                 contents.append(tn.getName());                 contents.append("','");                 contents.append(tn.getUrl());                 contents.append("','");                 contents.append(tn.getTitle());                 contents.append("','");                 contents.append(tn.getTarget());                 contents.append("','");                 contents.append(tn.getIcon());                 contents.append("','");                 contents.append(tn.getIconOpen());                 contents.append("','");                 contents.append(tn.getOpen());                 contents.append("');");                 contents.append("\n");                             }             contents.append("document.write(d);");                     return contents.toString();         } catch (SQLException e) {             e.printStackTrace();         }         return null;     } }

index.jsp  数据显示页面，现在的页面就简洁多了！

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%> <%@page import="com.ant.dao.DBManager"%> <script type="text/javascript" src="script/dtree.js"></script> <link rel="StyleSheet" href="script/dtree.css" type="text/css" /> <script type="text/javascript">      <%=DBManager.getAll() %> </script>

至此 我们就完成了一个通用的导航树  以后只操作数据库就好了！