最近在做老师的项目，第一个任务：做一个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 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的相关知识
)
下面是节点的初始页面用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+"/";
%>
最后显示结果：
数据库截图：
后记：有不明白的欢迎留言
分享到：
相关推荐
在内存表中实现目录树的分层显示，首先需要将目录和文件的数据加载到内存中，这通常涉及数据库查询或文件系统遍历。数据结构的选择是关键，可以使用链表、数组，或者更高效的数据结构如平衡二叉搜索树（AVL树）、...
配置加载器 从目录树分层加载配置文件（json，yaml，csv，ini，js）安装 git clone git://github.com/HansHammel/config-loader.gitnpm install或者 npm install "git+...var path = require ( 'path' ) ;...
基于Cesium+VUE实现的动态单体化（整幢建筑和分层分户）效果，完整demo和源代码，代码未加密/未压缩，可直接调用运行 demo中唯一缺少部分是涉及到的模型数据，因为数据量比较大，所以如果需要请在评论区留下邮箱，...
总之，理解浏览器的分层工作原理对Web开发至关重要，它能帮助我们编写更高效、更优化的代码，从而提升网页的加载速度和用户体验。通过对“Web开发，浏览器分层”的深入学习，开发者能够更好地应对现代Web的复杂挑战...
JavaScript作为客户端的主要编程语言，为实现动态和交互式的目录树提供了可能。该代码示例可能使用了DOM操作、事件监听以及数据结构的遍历来构建和控制树的展开与折叠。此外，还可能涉及到CSS样式设计，以提供美观的...
本文将详细介绍如何使用ExtJS来实现一个动态加载的树形结构。 #### 二、所需环境与技术栈 在开始之前，请确保您的开发环境中已经包含了ExtJS库。ExtJS可以在项目中通过CDN链接引入，或者下载安装到本地项目中。...
这个项目基于JavaScript技术实现，下面我们将深入探讨JavaScript以及如何使用它来创建分层加载动画。 JavaScript，简称JS，是一种广泛应用于Web开发的轻量级解释型编程语言。它与HTML和CSS一起构成了Web前端开发的...
在Android开发中，实现文件的分层浏览与可折叠展现是一项常见的需求，特别是在构建文件管理器或者需要处理复杂目录结构的应用中。这个源码着重于使用ListView和自定义Adapter来达到这一目的。以下是对该技术点的详细...
在IT行业中，Web开发是至关重要的领域，而JavaServer Pages（JSP）是其中一种流行的服务器端技术，常用于构建动态网页。本篇将详细探讨如何利用JSP进行分层实现业务处理，以用户登录为例。 一、简介 在Web应用开发...
《xloadtree——树状结构的简单实现》 在计算机科学和编程领域，树状结构是一种数据结构，它模拟了自然界中的树形关系，用于存储和处理数据。xloadtree是一个针对这种数据结构的实现，它提供了一种简单且直观的方式...
背景：动态加载多条折线图，折线图条数不确定 页面效果： 页面代码 //气象数据 function serchQx(beginTime, endTime, str, parameter) { $(#rr).html();//将循环拼接的字符串插入下拉列表 var t = $(#...
在本文中，我们将深入探讨如何使用C++编程语言实现分层聚类算法。分层聚类是一种无监督学习方法，用于将数据集中的对象组织成一个层次结构的集群。在这个层次结构中，每个数据点可以被视为一个单独的簇，也可以是更...
2. **异步加载**：对于大数据量的树型结构，可以采用异步加载的方式，即随着用户的滚动或操作，动态地加载更多的数据。这样可以避免一次性加载过多数据导致的页面卡顿。 3. **分层缓存**：利用浏览器的缓存机制，将...
这个控件类似于普通的`ListView`，但每个列表项可以是可展开的，显示或隐藏其子项，从而实现分层加载的效果。下面将详细探讨`ExpandableListView`的相关知识点。 1. **基础概念**： - `ExpandableListView`是...
这是博文 【c++多模块web项目实践方案【cmake+cppcms+boost+fmt】】附带的项目源代码骨架。笔者主要提出了自己对于c++项目如何分层，如何做一个简单的网站的见解。具体文章地址在：...
为了实现多级分层，可以使用递归的方式来创建无限级别的树形菜单。当一个节点被点击时，其下的子节点列表可以动态加载，这样既能节省页面加载时间，又能提供流畅的用户体验。此外，现代前端框架如React、Vue或...
在IT行业中，分层架构是一种常见的软件设计模式，它...在Java开发中，我们可以利用Spring框架的依赖注入特性，轻松地实现接口的动态绑定和解耦。理解和熟练掌握这种设计模式，对于提升开发效率和产品质量具有重要意义。
**JTree2.0 目录树** 在Java Swing组件库中，JTree是一个非常重要的可视化组件，用于展示数据的树形结构。JTree2.0是其一个更新版本，它增强了用户界面交互和功能，使得开发者能够更方便地创建和操作目录树形视图。...
《C++实现的分层有限状态机v0.1详解》 在计算机科学中，有限状态机（Finite State Machine, FSM）是一种模型，用于描述一个系统的行为，它根据当前状态和输入来决定如何转移到下一个状态。分层有限状态机...