xloadtree实现web动态目录树（分层加载）

时间：2021-10-13 12:26:59

最近在做老师的项目，第一个任务：做一个java web目录树要求实现数据的动态加载，即点击一个节点加载一层数据，经过一个星期的尝试探索期间用了几个比较流行的树插件

（js包），最终用xloadtree实现了。（选js包的原因是因为自己web网页基础就是一坨翔啊T_T，看到这里大神请绕道）


什么是xloadtree，这里放一个链接看完就会略知一二，点击打开链接


现在可以看看我是怎么做的，大家可以先把相关的资源包下载下来，点击打开链接 

建数据库什么的大家应该都会，在这里就不啰嗦了

1，我先写了一个Node类，建类的原因当然是为了好封装啊，开发便捷，面向对象啊什么的（哈哈哈xloadtree实现web动态目录树（分层加载））

一般对象的属性会和数据库表中的属性保持一致，我的如下：

public class Node {

	private String node_id;
	private String parent_id;
	private String node_name;
	private String ref_url;

	public Node() {
		// TODO Auto-generated constructor stub
	}

	public String getNode_id() {
		return node_id;
	}

	public void setNode_id(String node_id) {
		this.node_id = node_id;
	}

	public String getParent_id() {
		return parent_id;
	}

	public void setParent_id(String parent_id) {
		this.parent_id = parent_id;
	}

	public String getNode_name() {
		return node_name;
	}

	public void setNode_name(String node_name) {
		this.node_name = node_name;
	}

	public String getRef_url() {
		return ref_url;
	}

	public void setRef_url(String ref_url) {
		this.ref_url = ref_url;
	}

}
2，数据库操作类，（我用的是sqlite数据库，这个数据库的优点就是，只需一个jar包就能写数据库，槽点吗？谁用谁知道 xloadtree实现web动态目录树（分层加载）） 

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

import bean.Node;

public class DBHelper {

	String driver_name = "org.sqlite.JDBC";
	String db_url = "jdbc:sqlite://g:/tree.db";
	public Connection getConnection(){

		try {
			Class.forName(driver_name);
			Connection conn = DriverManager.getConnection(db_url);
			return conn;
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}catch(SQLException se){
			se.printStackTrace();
		}
		return null;
	}

	public ArrayList<Node> getNodeInfo(Connection conn,String id){	
		String sql = "select * from tree where node_id='"+id+"'";
		PreparedStatement pre = null;
		ResultSet rs = null;
		ArrayList<Node> list = new ArrayList<Node>();
		try {
			pre = conn.prepareStatement(sql);
			rs =pre.executeQuery();
			if(rs!=null){
				list = new ArrayList<Node>();
			}
			while (rs!=null&&rs.next()){
				Node node = new Node();
				node.setNode_id(rs.getString("node_id"));
				node.setNode_name(rs.getString("node_name"));
				node.setParent_id(rs.getString("parent_id"));
				node.setRef_url(rs.getString("ref_url"));
				list.add(node);
			}
			rs.close();
			pre.close();
			conn.close();
		} catch (SQLException e) {
			e.printStackTrace();
		}finally{
			 pre = null;
			 conn = null;
			 rs = null;
		}
        return list;
	}


	public ArrayList<Node> getNodeInfoByParentId(Connection conn,String id){	
		System.out.println("id is "+id);
		String sql = "select * from tree where parent_id="+id+"";
		System.out.println("sql= "+sql);
		PreparedStatement pre = null;
		ResultSet rs = null;
		ArrayList<Node> list =null;
		try {
			pre = conn.prepareStatement(sql);
			rs =pre.executeQuery();
			if(rs!=null){
				list = new ArrayList<Node>();
			}
			while (rs!=null&&rs.next()){
				Node node = new Node();
				node.setNode_id(rs.getString("node_id"));
				node.setNode_name(rs.getString("node_name"));
				node.setParent_id(rs.getString("parent_id"));
				node.setRef_url(rs.getString("ref_url"));
				list.add(node);
			}
			rs.close();
			pre.close();
			conn.close();
		} catch (SQLException e) {
			e.printStackTrace();
		}finally{
			 pre = null;
			 conn = null;
			 rs = null;
		}
        return list;
	}

}
上面有2个函数分别是根据node的id来查询数据，这个是为了树的初始化的时候后来加载根节点，另id直接等于0（根节点）。第二个函数就是以此节点id为parent_id来查询数据，如果返回的结果集不为空则说明该节点是有子节点的，我们就给该节点加tree.xml(前提是你看了xloadtree的相关知识 xloadtree实现web动态目录树（分层加载）)



下面是节点的初始页面用jsp（jsp+javascript）写的：

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@page import="db.DBHelper" %>
<%@page import="bean.Node" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>


    <title>My JSP 'xTree.jsp' starting page</title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="xtree.js"></script>
	<script type="text/javascript" src="xmlextras.js"></script>
	<script type="text/javascript" src="xloadtree.js"></script>

	<link type="text/css" rel="stylesheet" href="xtree.css" />




   </head>
  <body>
  <%
      String node_id=request.getParameter("id");
      ArrayList<Node> list=null;
      if(node_id==null){
      	DBHelper helper = new DBHelper();
      	list=  helper.getNodeInfo(helper.getConnection(),"0");

      }
      String name = list.get(0).getNode_name();
      int times =3;

   %>
      <script  type="text/javascript">

webFXTreeConfig.rootIcon		= "images/folder.png";
webFXTreeConfig.openRootIcon	= "images/openfolder.png";
webFXTreeConfig.folderIcon		= "images/folder.png";
webFXTreeConfig.openFolderIcon	= "images/openfolder.png";
webFXTreeConfig.fileIcon		= "images/file.png";
webFXTreeConfig.lMinusIcon		= "images/Lminus.png";
webFXTreeConfig.lPlusIcon		= "images/Lplus.png";
webFXTreeConfig.tMinusIcon		= "images/Tminus.png";
webFXTreeConfig.tPlusIcon		= "images/Tplus.png";
webFXTreeConfig.iIcon			= "images/I.png";
webFXTreeConfig.lIcon			= "images/L.png";
webFXTreeConfig.tIcon			= "images/T.png";

 var tree = new WebFXTree("Root");
 var node_id = "<%=list.get(0).getNode_id()%>";
 var node_name = "<%=name%>";
 tree.add(new WebFXLoadTreeItem(node_name,"TreeXML.jsp?id='"+node_id+"'"));
 document.write(tree);
  </script>
  </body>
</html>
这些代码最重要的是 
tree.add(new WebFXLoadTreeItem(node_name,"TreeXML.jsp?id='"+node_id+"'"));
实现和TreeXML.jsp的通信，TreeXML.jsp是处理分层加载的页面，即点击节点发送id给它，然后处理，代码如下： 

<%
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");
out.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
out.println("<tree>");
		String id = request.getParameter("id");
		ArrayList<Node> list=null;
      	DBHelper helper = new DBHelper();
      	list=  helper.getNodeInfoByParentId(helper.getConnection(),id);
		if(list!=null){
		     for(int i=0;i<list.size();i++){
		     System.out.println("jin lai le");
		     	ArrayList<Node> list2 = null;
		     	list2 =  helper.getNodeInfoByParentId(helper.getConnection(),list.get(i).getNode_id());
		     	if(!list2.isEmpty()){
		     		out.println("<tree text=\""+list.get(i).getNode_name()+"\" src=\"TreeXML.jsp?id="+list.get(i).getNode_id()+"\"/>");
		     	}else{
		     		out.println("<tree text=\""+list.get(i).getNode_name()+"\"/>");
		     	}
		     }
		}    
		list.clear();  	

out.println("</tree>");
%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@page import="db.DBHelper" %>
<%@page import="bean.Node" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
最后显示结果：

xloadtree实现web动态目录树（分层加载）

数据库截图：

xloadtree实现web动态目录树（分层加载）



后记：有不明白的欢迎留言


标签：

相关文章