`

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方法是在每次展开时都会执行,所以根据不同的请求达到异步加载子节点的需求。

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

    zTree 简介  zTree 是一个依靠 jQuery 实现... 采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器 支持 JSON 数据 支持静态 和 Ajax 异步

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

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

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

    该资源原理说明与博客《异步&同步加载树节点----zTree(一)》相一致。

    ztree异步加载

    前段时间由于项目需要,看了一下ztree,真的很好用,这个项目需要加载几万条的节点数据,如果用一次性加载的方式性能大大的降低了,借助ztree3.1插件写了个异步加载的树。感谢ztree!

    Jquery zTree 树控件异步加载操作

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

    zTree3异步加载列子

    基于web3.0,采用servlt注解的方式,实现ztree3.5异步加载的功能,内含冻结根节点、禁用右键事件等。

    详解Angular结合zTree异步加载节点数据

    本篇文章主要给大家分享了Angular结合zTree异步加载节点数据的难点以及方法,有这方面需求的朋友参考下吧。

    zTree异步加载展开第一级节点的实现方法

    主要介绍了zTree异步加载展开第一级节点的实现方法,需要的朋友可以参考下

    JQuery ztree带筛选、异步加载实例讲解

    主要为大家详细介绍了JQuery ztree带筛选、异步加载实例,zTree支持静态 和 Ajax 异步加载节点数据,并支持极其灵活的checkbox或radio选择功能,本文为大家进行具体介绍

    好用的树形菜单

    用 zTree 方法 异步加载 节点数据 用 zTree 方法 更新 节点数据 单击 节点 控制 展开 / 折叠 父节点 控制 根据 参数 查找 节点 其他 鼠标 事件监听 [excheck] 复/单选框功能 演示 [exedit] 编辑功能 演示 大数据量 ...

    jquery zTree异步加载、模糊搜索简单实例分享

    二、节点异步加载:1、点击展开时加载数据;2、选中节点时加载数据。 前台代码如下: [removed] //ztree设置 var setting = { view: { fontCss: getFontCss }, check: { enable: true }, data: { simple...

    jquery ztree学习文档

    4、支持一次性静态生成 和 Ajax 异步加载 两种方式 5、支持多种事件响应及反馈 6、支持 Tree 的节点移动、编辑、删除 7、支持极其灵活的 checkbox & radio 选择功能 8、支持任意更换皮肤 / 个性化图标...

    ztree异步树加右键菜单

    ztree动态异步数据树加载,并且附带右键菜单功能,对树节点进行操作

    zTree 非常强大的树形控件

    3)、对于某一级节点数就多达几千的情况 延迟加载无效,这种情况建议考虑分页异步加载。 4)、对于全部节点都展开显示的情况,延迟加载无效,这种情况建议不要全部展开。 5),支持各种类型的树形结如checkbox,树结点的...

    ztree地区联查

    使用ztree地区联查,多级的节点,ztree异步加载。使用ztree地区联查,多级的节点,ztree异步加载完

Global site tag (gtag.js) - Google Analytics