ztree 动态加载 with java

最新推荐文章于 2024-03-09 21:49:48 发布
转载 最新推荐文章于 2024-03-09 21:49:48 发布 · 1.4k 阅读 · 1

本文介绍如何使用ZTree插件实现异步加载节点数据，包括HTML页面配置、Servlet设置及数据库交互等内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

链接 提供源代码为demo，未整理 ，但测试可用


step1：html页面

<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE> ZTREE DEMO - Async</TITLE>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="./JQuery zTree v3.5.14/css/demo.css" type="text/css">
	<link rel="stylesheet" href="./JQuery zTree v3.5.14/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="./JQuery zTree v3.5.14/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="./JQuery zTree v3.5.14/js/jquery.ztree.core-3.5.js"></script>
	<!--  <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
	  <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>-->
	<SCRIPT type="text/javascript">
		
// private String id;//1
	
// 	private String nodeId;//2
	
// 	private String parentId;//3
	
// 	private String hrefAddress;//4
	
// 	private String nodeName;//5
	
//{"hrefAddress":"test.jsp","nodeId":"1","nodeName":"A","parentId":"-1"}	
	
	var setting = {
			
				data: {
					simpleData: {
						enable: true,
						idKey: "nodeId",
						pIdKey: "parentId",
						rootPId: -1,
					}
				},
				
			async: {
				enable: true,
// 				url:"../asyncData/getNodes.php",
				url:"ZTreeSerlvet",
				autoParam:["nodeId", "nodeName", "parentId"],
				otherParam:{"otherParam":"zTreeAsyncTest"},
				dataFilter: filter
			},
			callback: {
				beforeClick: beforeClick,
				onClick: onClick
			}
				
		};

		function filter(treeId, parentNode, childNodes) {
			
// 			alert('TREEID-->'+treeId);
// 			alert('PARENTNODE-->'+parentNode);
// 			alert('CHILDNODES-->'+childNodes);
			
			if (!childNodes) return null;
			
			
			for (var i=0, l=childNodes.length; i<l; i++) {
				
// 				alert(childNodes[i].nodeName);
				
				childNodes[i].name = childNodes[i].nodeName.replace(/\.n/g, '.');
			}
			
			
			return childNodes;
			
		}
		
		
		function beforeClick(treeId, treeNode, clickFlag) {
			
// 			alert(treeId);
// 			alert(treeNode);
// 			alert(clickFlag);
			
		}
		
		
		
		function onClick(event, treeId, treeNode, clickFlag) {
// 			alert(treeId);
			alert(treeNode.parentId);
			alert(treeNode.isParent);
// 			alert(clickFlag);
			
		}
		
		
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting,null);
		});
		
		function getTime() {
			var now= new Date(),
			h=now.getHours(),
			m=now.getMinutes(),
			s=now.getSeconds();
			return (h+":"+m+":"+s);
		}
		
		function test(){
			
			
			alert("test");
			
		}
		
		
		//-->
	</SCRIPT>
</HEAD>

<BODY>
<h1>异步加载节点数据的树</h1>
<h6>[ 文件路径: core/async.html ]</h6>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
	<div class="right">
		<ul class="info">
			<li class="title"><h2>1、setting 配置信息说明</h2>
				<ul class="list">
				<li class="highlight_red">使用异步加载，必须设置 setting.async 中的各个属性，详细请参见 API 文档中的相关内容</li>
				</ul>
			</li>
			<li class="title"><h2>2、treeNode 节点数据说明</h2>
				<ul class="list">
				<li>异步加载功能对于 treeNode 节点数据没有特别要求，如果采用简单 JSON 数据，请设置 setting.data.simple 中的属性</li>
				<li>如果异步加载每次都只返回单层的节点数据，那么可以不设置简单 JSON 数据模式</li>
				</ul>
			</li>
			<li class="title"><h2>3、其他说明</h2>
				<ul class="list">
				<li class="highlight_red">观察 autoParam 和 otherParam 请使用 firebug 或 浏览器的开发人员工具</li>
				<li class="highlight_red">此 Demo 只能加载到第 4 级节点（level=3）</li>
				<li class="highlight_red">此 Demo 利用 dataFilter 对节点的 name 进行了修改</li>
				</ul>
			</li>
		</ul>
	</div>
</div>
</BODY>
</HTML>
step2：web.xml 

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
	xmlns="http://java.sun.com/xml/ns/j2ee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

  <servlet>
    <servlet-name>ZTreeSerlvet</servlet-name>
    <servlet-class>com.handler.ZTreeSerlvet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>ZTreeSerlvet</servlet-name>
    <url-pattern>/ZTreeSerlvet</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>
step3:java servlet类 

package com.handler;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.lang.SystemUtils;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.bean.ZtreeBean;
import com.dao.DaoTest;
import com.dao.Nodes;

public class ZTreeSerlvet extends HttpServlet {

	public void destroy() {
		super.destroy();
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//		System.out.println("id="+request.getParameter("id") + "\n  " + "name="+request.getParameter("name") + " \n " + "otherParam="+request.getParameter("otherParam")+"\n"+"pid="+request.getParameter("pid"));
		
		response.setCharacterEncoding("UTF-8");
		
		PrintWriter printWriter = response.getWriter();
		
		String pid = request.getParameter("parentId");
		String nodeName = request.getParameter("nodeName");
		String nodeId = request.getParameter("nodeId");
		
		System.out.println("pid-->"+pid);
		System.out.println("nodeName-->"+nodeName);
		System.out.println("nodeId-->"+nodeId);
		
		JSONArray _JSONArray_ = daoForSelectByParametersFromSQLibe(null,nodeId,null);
		
		
		System.out.println("talkAbout-->"+_JSONArray_);
		
		/**
		 * var zTreeNodes = [ 
{"id":1, "name":"test1", "nodes":[ 
{"id":11, "name":"test11", "nodes":[ 
{"id":111, "name":"test111"} 
]}, 
{"id":12, "name":"test12"} 
]}, 
]; 
		 */
		if(Math.random() == 100023404){
			JSONArray _JSONArray = new JSONArray();
			
//			public ZtreeBean(int 1id,int 2pId, String 3name,boolean 4open,boolean isParent){
			ZtreeBean zb = new ZtreeBean(0, -1, "NodeName", false,true);
			ZtreeBean zb1 = new ZtreeBean(1, 0, "NodeName2", false,true);
			ZtreeBean zb2 = new ZtreeBean(2, 1, "NodeName3", false,true);
			ZtreeBean zb3 = new ZtreeBean(3, 2, "NodeName4", false,false);
			
			List<ZtreeBean> list = new ArrayList<ZtreeBean>();
			
//			list.add(zb);
//			list.add(zb1);
//			list.add(zb2);
//			list.add(zb3);
			
			String str = JSON.toJSONString(list);
			
			_JSONArray.add(zb);
//			_JSONArray.add(zb1);
//			_JSONArray.add(zb2);
//			_JSONArray.add(zb3);
			
			String jsonStrForJS = "";
			
			jsonStrForJS = _JSONArray.toJSONString();
			
			
		}
				
//		System.out.println("jsonStrForJS-->"+_JSONArray_);
		
		printWriter.print(_JSONArray_.toString());
	}
	
	
	public JSONArray daoForSelectByParametersFromSQLibe(String id ,String pid,String name){
		
		
		//得到数据库连接
		 DaoTest test = new DaoTest();
  	   	 
		 
		 ArrayList<Nodes> list=  test.getNodeInfoForZTreeByParentId(pid);
		
		 
		 JSONArray _JSONArray = (JSONArray) JSONArray.toJSON(list);
		
		
		return _JSONArray;
	}
	
	
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

	public void init() throws ServletException {
	}

}

package com.dao;

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

public class DaoTest {
	Connection con = null;

	public Connection getConnection() {
		Connection conn = null;
		String url = "jdbc:mysql://localhost/test?useUnicode=true&characterEncoding=gbk";
		String user = "root";
		String password = "mytopicforever";
		try {
			if (conn == null) {
				Class.forName("com.mysql.jdbc.Driver").newInstance();
				conn = DriverManager.getConnection(url, user, password);
			}
		} catch (Exception e) {
			System.out.println("连接失败");
			return null;
		} finally {
			url = null;
			user = null;
			password = null;
		}
		return conn;
	}
	
	public Connection getConnectionBySQLibe(){
		
		
		 	Connection conn = null; 
		 
	        Statement stmt = null; 
	 
	        ResultSet rset = null; 
	 
	        System.out.println(new java.util.Date());
	        
	        try {
				
	        	Class.forName("org.sqlite.JDBC");
				
	        	conn = DriverManager.getConnection( "jdbc:sqlite:/d:/test.db"); 
	       	 
//		        conn.setAutoCommit(false);
		 
//		        stmt = conn.createStatement(); 
		 
				
			} catch (ClassNotFoundException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} 
	        
		return conn;
		
	}
	
	
	
	
	
	
	
	public ArrayList<Nodes> getNodeInfo() {
		String sql = "select nodeId ,parentId ,hrefAddress ,nodeName from tree_table order by id ";
		PreparedStatement pre = null;
		Connection conn = null;
		//conn = getConnection();
		conn = getConnectionBySQLibe();
		ResultSet rs = null;
		ArrayList<Nodes> list = new ArrayList<Nodes>();
		try {
			pre = conn.prepareStatement(sql);
			rs =pre.executeQuery();
			while (rs.next()){
				Nodes node = new Nodes();
				node.setHrefAddress(rs.getString("hrefAddress"));
				node.setNodeId(rs.getString("nodeId"));
				node.setParentId(rs.getString("parentId"));
				node.setNodeName(rs.getString("nodeName"));
				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<Nodes> getNodeInfoForZTreeByParentId(String parentId) {
		String pid = "";
		if(null == parentId || parentId.equals("")){
			pid = "-1";
		}else{
			pid = parentId;
		}
		
		//测试  根节点 父节点  pid = '-1'
		
		
		String sql = "select (select count(*) from tree_table tt where tt.parentId = t.nodeId )as count ,nodeId ,parentId ,hrefAddress ,nodeName from tree_table t where t.parentId = '"+pid+"' order by id";
		
		PreparedStatement pre = null;
		
		Connection conn = null;
		
		//conn = getConnection();
		conn = getConnectionBySQLibe();
		ResultSet rs = null;
		ArrayList<Nodes> list = new ArrayList<Nodes>();
		try {
			pre = conn.prepareStatement(sql);
			rs =pre.executeQuery();
			while (rs.next()){
				Nodes node = new Nodes();
				node.setHrefAddress(rs.getString("hrefAddress"));
				node.setNodeId(rs.getString("nodeId"));
				node.setParentId(rs.getString("parentId"));
				node.setNodeName(rs.getString("nodeName"));
				node.setOpen(false);
				String count = rs.getString("count");
				
				boolean isParent = true;
				if(Integer.parseInt(count)<=0){
					isParent = false;
					System.out.println("--"+rs.getString("nodeName"));
				}
				node.setIsParent(isParent);
				
				node.setTarget("www.sina.com.cn");
				
				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<Nodes> getNodeInfoByParentId(String parentId) {
		//select nodeId ,parentId ,hrefAddress ,nodeName from tree_table t  where t.parentId='1' order by id
		String sql = "select nodeId ,parentId ,hrefAddress ,nodeName from tree_table t  where t.parentId='"+parentId+"' order by id";
		PreparedStatement pre = null;
		Connection conn = null;
		//conn = getConnection();
		conn = getConnectionBySQLibe();
		ResultSet rs = null;
		ArrayList<Nodes> list = new ArrayList<Nodes>();
		try {
			pre = conn.prepareStatement(sql);
			rs =pre.executeQuery();
			while (rs.next()){
				Nodes node = new Nodes();
				node.setHrefAddress(rs.getString("hrefAddress"));
				node.setNodeId(rs.getString("nodeId"));
				node.setParentId(rs.getString("parentId"));
				node.setNodeName(rs.getString("nodeName"));
				list.add(node);
			}
			rs.close();
			pre.close();
			conn.close();
		} catch (SQLException e) {
			e.printStackTrace();
		}finally{
			 pre = null;
			 conn = null;
			 rs = null;
		}
        return list;
	}

}
数据库 sqlite





sql脚本 sqlibedb.sql
/****************/
/*              */
/* sqlibedb.SQL */
/*              */
/****************/

/* Disable Foreign Keys */
pragma foreign_keys = off;
/* Begin Transaction */
begin transaction;

/* Database [test] */
pragma auto_vacuum=0;
pragma encoding='UTF-8';
pragma page_size=1024;

/* Drop table [main].[tree_table] */
drop table if exists [main].[tree_table];

/* Table structure [main].[tree_table] */
CREATE TABLE [main].[tree_table] (
  [id] VARCHAR(256), 
  [nodeId] VARCHAR(256), 
  [hrefAddress] VARCHAR(256), 
  [nodeName] VARCHAR(256), 
  [parentId] VARCHAR(256), 
  CONSTRAINT [sqlite_autoindex_tree_table_1] PRIMARY KEY ([id]));

/* Data [main].[tree_table] */
insert into [main].[tree_table] values('1', '1', 'test.jsp', 'A', '-1');
insert into [main].[tree_table] values('2', '11', 'test.jsp', 'B', '1');
insert into [main].[tree_table] values('3', '110', 'test.jsp', 'C', '11');
insert into [main].[tree_table] values('4', '111', 'test.jsp', 'D', '11');
insert into [main].[tree_table] values('5', '112', 'test.jsp', 'E', '11');
insert into [main].[tree_table] values('6', '113', 'test.jsp', 'F', '11');
insert into [main].[tree_table] values('7', '114', 'test.jsp', 'G', '11');
insert into [main].[tree_table] values('8', '115', 'test.jsp', 'H', '11');
insert into [main].[tree_table] values('9', '116', 'test.jsp', 'J', '11');
insert into [main].[tree_table] values('10', '117', 'test.jsp', 'K', '11');
insert into [main].[tree_table] values('11', '118', 'test.jsp', 'L', '11');
insert into [main].[tree_table] values('12', '119', 'test.jsp', 'M', '11');
insert into [main].[tree_table] values('13', '120', 'test.jsp', 'N', '11');
insert into [main].[tree_table] values('14', '121', 'test.jsp', 'O', '11');
insert into [main].[tree_table] values('15', '122', 'test.jsp', 'P', '11');
insert into [main].[tree_table] values('16', '123', 'test.jsp', 'Q', '11');
insert into [main].[tree_table] values('17', '124', 'test.jsp', 'R', '11');
insert into [main].[tree_table] values('18', '125', 'test.jsp', 'S', '11');
insert into [main].[tree_table] values('19', '126', 'test.jsp', 'T', '11');
insert into [main].[tree_table] values('20', '127', 'test.jsp', 'U', '11');
insert into [main].[tree_table] values('21', '12', 'test.jsp', 'V', '1');
insert into [main].[tree_table] values('22', '121', 'test.jsp', 'W', '12');
insert into [main].[tree_table] values('23', '122', 'test.jsp', 'X', '12');
insert into [main].[tree_table] values('24', '123', 'test.jsp', 'Y', '12');
insert into [main].[tree_table] values('25', '124', 'test.jsp', 'Z', '12');
insert into [main].[tree_table] values('26', '125', 'test.jsp', 'AA', '12');
insert into [main].[tree_table] values('27', '13', 'test.jsp', 'BB', '1');
insert into [main].[tree_table] values('28', '131', 'test.jsp', 'CC', '13');
insert into [main].[tree_table] values('29', '132', 'test.jsp', 'DD', '13');
insert into [main].[tree_table] values('30', '133', 'test.jsp', 'EE', '13');
insert into [main].[tree_table] values('31', '134', 'test.jsp', 'FF', '13');
insert into [main].[tree_table] values('32', '14', 'test.jsp', 'HH', '1');
insert into [main].[tree_table] values('33', '141', 'test.jsp', 'II', '14');
insert into [main].[tree_table] values('34', '142', 'test.jsp', 'JJ', '14');
insert into [main].[tree_table] values('35', '143', 'test.jsp', 'KK', '14');
insert into [main].[tree_table] values('36', '144', 'test.jsp', 'LL', '14');
insert into [main].[tree_table] values('9999', '9999', 'www.sina.com.cn', 'json', '116');


/* Commit Transaction */
commit transaction;

/* Enable Foreign Keys */
pragma foreign_keys = on;

工具下载地址：

SQLite Expert Professional 3 破解版

http://pan.baidu.com/share/link?shareid=888477095&uk=4181630758

项目源码下载地址：

http://pan.baidu.com/share/link?shareid=899380643&uk=4181630758

数据库文件下载地址：test.db

http://pan.baidu.com/share/link?shareid=963298470&uk=4181630758

layui +ztree实现下拉分类树完整实例
fengcai0123的专栏
03-26 1825
html： <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <!--<head th:include="layout :: htmlhead" th:with="title='...
前端框架 zTree 从数据库中动态加载树形菜单
06-14
前端框架 zTree 从数据库中动态加载树形菜单前端框架
ztree+java动态树加载实例
11-15
比较简单的一个动态树的加载实例demo，可以下下来看看
zTree动态加载
bahongying2053的博客
10-23 182
@{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Cont...
ztree动态加载数据
崔伟的博客
08-22 1707
ztree以数组形式动态加载数据 $(function(){     nodeTree();      })     /*var nodeName=$("#nodeName").val();//名称     var capacity=$("#ui-id-1 option:selected").val();//容量     var zone=$("#citySel").val();//地区    ...
使用Ztree实现java动态树形菜单
02-02
包括代码源文件，数据库，直接下载就可以直接运行，里面还包括分页的实现
Jquery.zTree动态加载数据
最新发布
为技术而生
03-09 3579
1.ajax获取数据 var zTreeNodes;var setting = { view: { selectedMulti: true //支持多选 }, data: { simpleData: { enable: true //开启 } }, callback: { beforeClick: getCurrentNode, ...
SSH实现zTree动态增删改与数据库同步示例
对于zTree，通常会使用一个异步加载的配置，这样可以在初始化时或者用户展开节点时向服务器请求数据。 4. **前端展示**：使用zTree提供的API和配置项，根据后端返回的数据，动态渲染树形结构，并提供交互式操作。 ...
jQuery zTree插件快速实现目录树
12-08
通过以上步骤，我们便能成功地使用jQuery zTree插件快速实现一个具有动态数据加载、编辑功能的目录树。在实际应用中，还可以根据需求进一步定制zTree的功能，例如节点的展开收起、异步加载数据、节点拖拽等。同时，...
Ztree实践：数据库驱动的树形结构展示
- Ztree支持数据的动态加载和绑定，能够方便地从服务器端获取数据，动态生成树节点。 - 它还提供了诸如搜索、节点选择、节点编辑、拖拽等交互功能。 ### 描述知识点：在页面上显示树，数据从数据库里面取，有代码...
Ztree树形动态加载数据
小码哥AI、互联网副业项目
01-26 6707
一、引入ztree样式和js 二、添加树形样式 id="menuContent" class="menuContent" style="display:none; position: absolute; z-index:9999"> id="treeDemo" class="ztree" style="margin-top:0; width:160px;height:520
jquery ztree 异步动态加载
07-30
jquery ztree 异步动态加载部署直接运行，大数据量，异步是很好的处理方式
使用 zTree 动态加载树形菜单
08-10
NULL 博文链接：https://xurichusheng.iteye.com/blog/2200545
ztree实现权限树实例
01-12
使用ztree实现权限树，父子菜单级联，选中子菜单、父菜单关联。
ztree实现一棵树
祈澈菇凉
06-18 479
前面陆陆续续的写过一些ztree的文章，但调用的是后端的接口，demo拿过去没有办法可以直接查看前端的界面，这就造成了一部分人对此理解的困扰。 jQuery的ztree仿windows文件新建和拖拽效果 https://www.jianshu.com/p/bfa67325719c ztree实现编辑和删除功能 https://www.jianshu.com/p/95d1df8966...
java 动态加载ztree_新手ztree结合springmvc 入门生成动态树
weixin_31437175的博客
02-26 257
这个是异步加载数据 先看效果图 这里先看数据库 直接上代码pageEncoding="utf-8"%>String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%&...
ztree 后台异步加载_ztree异步加载实例
weixin_29029995的博客
01-14 236
当前版本Ztree 3.5.01simple.htmljsvar setting = {data: {simpleData: {enable: true// idKey:"id",// pIdKey:"pId",}},async: {enable: true,url:"/Java_Solr/servlet/ZTreeSerlvet",autoParam:["id", "...
前端框架 （一）zTree 从数据库中动态加载树形菜单
weixin_34252686的博客
05-13 974
这几天做动态菜单用到了这个插件，目前用的很广泛的一个开源框架，最新发布的QUI框架就是用这个插件开发的菜单部分，因此还是很值得深入研究和学习，通过使用感觉功能很丰富，好多函数不用自己开发和编写，官网上有很详尽的API可以参考，用着算顺手但学习使用的过程中也遇到了一些困难，听过反复测试和查资料都理解了，但也在思考一个问题，怎么样才能使得最快的时间从接触一个新东西到灵活掌握的程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值