`

ztree学习之异步加载节点

    博客分类:
阅读更多

ztreedemo.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'ztreedemo.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" href="<%=basePath%>/ztree/css/demo.css" type="text/css">
	<link rel="stylesheet" href="<%=basePath%>/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="<%=basePath%>/ztree/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>/ztree/js/jquery.ztree.core-3.5.js"></script>
	<script type="text/javascript" src="<%=basePath%>/js/test/ztreedemo.js"></script>
  </head>
  
  <body>
    <ul id="treeDemo" class="ztree"></ul>
  </body>
</html>

 

ztreedemo.js:

$(document).ready(function(){
	initMyZtree();
});

var zNodes="";
var setting = {
	view: {
		selectedMulti: false,
		fontCss: setFontCss
	},
	async: {
		enable: true,
		url:"getZtreeData",
		autoParam:["id"]
	},
	callback: {
		beforeClick: beforeClickZtree
	}
};

function initMyZtree(){
    $.ajax({               
        type: "POST",               
        dataType: "json",               
        url: 'getZtreeData',   
        success: function(data) {   
            zNodes=data;
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        }   
    });  
	
}

//单击事件
function beforeClickZtree(treeId, treeNode){
	alert(treeNode.id+","+treeNode.name);
}

//设置字体
function setFontCss(treeId, treeNode) {
	if(treeNode.level==0){
		return {'font-weight':'bold','color':'red'};
	}else if(treeNode.level==1){
		return {'font-weight':'bold','color':'green'};
	}else if(treeNode.level==2){
		return {'font-weight':'bold','color':'blue'};
	}else{
		return {};
	}
};

 

CZTestAction.java:

package com.cz.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import org.apache.struts2.ServletActionContext;

import com.cz.model.TreeNode;
import com.cz.util.SqlHelper;
import com.opensymphony.xwork2.ActionSupport;

public class CZTestAction extends ActionSupport{
	private String id;

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}


	/**
	 * @author chenzheng
	 * @since 2013-8-21
	 * @Description: ztree测试
	 * @throws
	 * @return
	 * String
	 */
	public String getZtreeData(){
		System.out.println("*********"+id+"**********");
		if("null".equals(id)||"".equals(id)||id==null){
			id="0";
		}
		String sql="select t.jgid,t.jgmc,t.fjgid,t.jgbm,(select count(*) from sys_dept sd where sd.fjgid=t.jgid) as ispar from SYS_DEPT t where t.fjgid="+id;
		ResultSet rs=SqlHelper.executeQuery(sql, null);
		JSONArray jarray=new JSONArray();
		List<TreeNode> list=new ArrayList<TreeNode>();
		try {
			while(rs.next()){
				TreeNode tnode=new TreeNode();
				tnode.setId(rs.getString(1));
				tnode.setName(rs.getString(2));
				tnode.setpId(rs.getString(3));
				//判断当前节点是否还有子节点
				if(Integer.parseInt(rs.getString(5))>0){
					tnode.setIsParent(true);
					tnode.setHasChild(true);
				}else{
					tnode.setIsParent(false);
					tnode.setHasChild(false);
				}
				list.add(tnode);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
		jarray.addAll(list);
		System.out.println(jarray.toString());
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("utf-8");
		PrintWriter pw = null;
		try {
			pw = response.getWriter();
			pw.write(jarray.toString());
		} catch (IOException e) {
			e.printStackTrace();
		}
		pw.flush();
		pw.close();
		return null;
	}
}

 

TreeNode.java:

package com.cz.model;

public class TreeNode {

	private String id;
	private String pId;
	private String name;
	private Boolean isParent;
	private Boolean hasChild;
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getpId() {
		return pId;
	}
	public void setpId(String pId) {
		this.pId = pId;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Boolean getIsParent() {
		return isParent;
	}
	public void setIsParent(Boolean isParent) {
		this.isParent = isParent;
	}
	public Boolean getHasChild() {
		return hasChild;
	}
	public void setHasChild(Boolean hasChild) {
		this.hasChild = hasChild;
	}
	
	
}

 

效果图:

ztree

 

  • 大小: 2.9 KB
0
0
分享到:
评论
4 楼 chenzheng8975 2014-05-27  
王太阳 写道
你这根本就不出来,,你漏了几个地方...

例子只做参考,主要还得参考官方的文档,不同的版本也会有不同的表现方式啊!亲
3 楼 chenzheng8975 2014-05-27  
王太阳 写道
你这根本就不出来,,你漏了几个地方...

有图有真相
2 楼 王太阳 2014-05-27  
你这根本就不出来,,你漏了几个地方...
1 楼 liuweihug 2014-05-07  
Ztree教程-采用Jquery Ajax异步加载数据和Ztree自带异步加载数据
http://www.suchso.com/projecteactual/ztree-jiaocheng-aspnet-demo-ashx-jquery-ajax-ztree-setting-async.html

相关推荐

    zTree异步加载子节点针对大数据量数列表

    最近项目中有一个比较大型的树节点加载,网上面也看过一些解决方案,感觉都不是很好,也有很多误区,比如单击节点时加载子...ztree fileter方法是在每次展开时都会执行,所以根据不同的请求达到异步加载子节点的需求。

    java实现ztree异步加载

    首先,我们需要理解ZTree异步加载的基本原理。ZTree通过Ajax请求向服务器获取数据,服务器端(这里为Java)处理请求并返回JSON格式的节点数据。ZTree接收到这些数据后动态构建或更新树形结构。这个过程涉及到的主要...

    ZTree学习(二):异步加载树结构 - CSDN博客1

    通常这里会进行一个简单的 AJAX 请求,获取所需数据后,调用 ZTree 的相关方法加载节点。 此外,`setting` 中还有其他配置项,例如 `check`, `view`, `data`, `callback` 等,它们分别用于控制节点的选中样式、双击...

    异步&同步加载树节点----zTree(一)

    例如,一个基本的zTree异步加载配置可能如下所示: ```javascript var setting = { async: { enable: true, url: "your/data/api", autoParam: ["id"], otherParam: {"token": "yourToken"}, dataFilter: ...

    jQuery zTree 异步加载添加子节点重复问题

    在解决jQuery zTree异步加载添加子节点时出现的重复问题之前,我们首先需要理解zTree树插件的基本特性和其工作原理。zTree是一个基于jQuery的树形控件,它支持多功能的树形结构展示,并且可以轻松实现节点的增删改查...

    jquery ztree 异步加载

    ### jQuery ZTree异步加载详解 #### 一、概述 jQuery ZTree插件是一款功能强大的树形控件,被广泛应用于Web开发中,用于展示层级结构数据。在大数据量的场景下,同步加载所有节点数据可能会导致页面加载缓慢,用户...

    ztree异步加载

    "ztree异步加载"正是解决这一问题的一种高效方案。ZTree是一款基于JavaScript的富UI组件,它提供了一种灵活的方式来构建可交互的树形控件。在处理大量数据时,一次性加载所有节点会导致页面响应变慢,用户体验下降,...

    ztree异步加载demo(有说明文档)

    【标题】"ztree异步加载demo(有说明文档)" 涉及到的知识点主要围绕着ZTree,这是一个非常流行的JavaScript组件,主要用于构建树形结构的界面,尤其适用于网站导航、文件目录管理和组织结构展示等场景。异步加载是...

    zTree异步加载Demo

    【zTree异步加载Demo】是一个基于SpringMVC框架和MySQL数据库实现的示例,它展示了如何使用zTree这一流行的JavaScript树形插件进行异步数据加载。zTree是一款功能强大的jQuery插件,广泛用于构建多级目录结构,如...

    zTree3异步加载列子

    本示例"zTree3异步加载列子"专注于在`web3.0`环境下,利用Servlet注解实现zTree3.5的异步加载功能,同时涵盖了冻结根节点和禁用右键事件等高级特性,以提供更高效和定制化的交互体验。 首先,我们来理解`zTree3`的...

    jquery ztree 异步动态加载

    以下是一个简单的ZTree异步加载示例: ```javascript $(function() { var setting = { async: { enable: true, url: "/getNodes", type: "post", autoParam: ["id"], otherParam: {"type": "async"} }, ...

    关于javaWeb(S2SH)中使用zTree异步加载树节点问题

    在上述问题中,开发者遇到了在S2SH项目中使用zTree异步加载树节点的问题。首先,我们需要了解zTree异步加载的基本配置。`settingMan`对象包含了zTree的配置参数: 1. `data.simpleData.enable : true`:开启简单...

    ztree+dwr实现的异步加载树形菜单

    4. **异步加载数据**:当用户展开树形菜单的某个节点时,ZTree会自动触发异步请求,调用DWR中的后台方法获取子节点数据。后台处理完毕后,将结果返回给前端。 5. **接收并渲染数据**:前端接收到数据后,ZTree会...

    ztree异步加载1

    《zTree异步加载详解——打造高效数据交互体验》 在IT行业中,zTree是一款广泛应用于Web开发的JavaScript树插件,它以其轻量级、灵活性和强大的功能深受开发者喜爱。尤其是在处理大量数据的场景下,zTree的异步加载...

    zTree异步加载简单示例VS2008项目完整源码

    通过对这些源码的学习,开发者可以掌握如何结合后台数据和前端交互,实现zTree异步加载的完整流程,从而在自己的项目中灵活运用这一技术。同时,这也为初学者提供了一个很好的学习实例,有助于理解异步加载在实际...

    使用ztree异步加载全国地区。

    在你提到的场景中,"使用ztree异步加载全国地区"是一种优化用户体验的有效方法。zTree是一款非常流行的jQuery插件,主要用于实现树形结构的展示和操作,尤其适用于处理大量数据的场合。 首先,我们来详细了解一下...

    Jquery zTree 树控件异步加载操作

    支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree 的节点移动、编辑、删除 支持任意更换皮肤 / 个性化图标(依靠css) 支持极其灵活的 checkbox 或 radio 选择功能 简单的参数...

    ztree 异步加载 拖拽 右键菜单 功能

    异步加载是zTree的核心特性之一,它允许在用户滚动或点击节点时按需加载子节点数据,减少了初始页面加载时的数据量,提高了页面响应速度。实现异步加载需要设置`async`参数,例如: ```javascript var setting = { ...

    ZTree 异步加载 SSH JSON

    以上就是ZTree异步加载SSH JSON的基本实现步骤。在实际应用中,可能还需要考虑权限控制、懒加载、异步加载失败的处理等问题,以满足更复杂的需求。通过这种方式,我们可以构建出高效、动态的树形界面,提升Web应用的...

Global site tag (gtag.js) - Google Analytics