xloadtree实现web动态目录树(分层加载)
来源:互联网 发布:网络还能买彩票吗 编辑:程序博客网 时间:2024/05/25 13:33
最近在做老师的项目,第一个任务:做一个java web目录树要求实现数据的动态加载,即点击一个节点加载一层数据,经过一个星期的尝试探索期间用了几个比较流行的树插件
(js包),最终用xloadtree实现了。(选js包的原因是因为自己web网页基础就是一坨翔啊T_T,看到这里大神请绕道)
什么是xloadtree,这里放一个链接看完就会略知一二,点击打开链接
现在可以看看我是怎么做的,大家可以先把相关的资源包下载下来,点击打开链接
建数据库什么的大家应该都会,在这里就不啰嗦了
1,我先写了一个Node类,建类的原因当然是为了好封装啊,开发便捷,面向对象啊什么的(哈哈哈)
一般对象的属性会和数据库表中的属性保持一致,我的如下:
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包就能写数据库,槽点吗?谁用谁知道)
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 blocke.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的相关知识)
下面是节点的初始页面用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+"/";%>最后显示结果:
数据库截图:
后记:有不明白的欢迎留言
0 0
- xloadtree实现web动态目录树(分层加载)
- 分析xloadtree, 用ajax实现的动态目录树
- XLoadTree 基于AJAX + XML动态加载的JS树组件的文档翻译
- XLoadTree 基于AJAX + XML动态加载的JS树组件的文档翻译
- 使用xloadtree读取数据库动态构造树
- Ajax动态加载目录树(jquery-treeview)
- Unity3D中实现动态加载Resources目录外的资源
- Unity3D中实现动态加载Resources目录外的资源
- Unity3D中实现动态加载Resources目录外的资源
- web分层
- xloadtree+DWR 生成和维护树结构
- 树型部件分层加载数据实现思路,提高速度,提高效率
- 如何分批分层的加载树节点
- java+ajax实现web目录树
- java+ajax实现web目录树
- 利用Ajax实现树的动态加载
- easyUi combotree 实现动态加载树节点
- easyUi combotree 实现动态加载树节点
- 日经社説 20150611 海外買収のつまずきから学ぶ
- 黑马程序员--If-else和switch语句
- Eclipse常用插件在线安装和离线安装方式
- 九度OJ-题目1350:二叉树的深度
- 学习nodejs——callback, async i/o
- xloadtree实现web动态目录树(分层加载)
- 15个SAT数学高分公式介绍
- Python正则表达式
- 一篇读懂CSS布局模型
- Hangover
- windows下python画图matplotlib
- mysql ERROR 1025 (HY000): Error on rename of
- 日经社説 20150611 訪日外国人の増加へ規制緩和の加速を
- Android 从入门到精通 第七章 事件