ztree学习之异步加载节点

最新推荐文章于 2024-08-21 16:19:19 发布

最新推荐文章于 2024-08-21 16:19:19 发布 · 413 阅读

文章标签：

#ztree #异步加载

树专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用ZTree实现动态页面的构建，包括页面布局、样式引用、JavaScript交互和后台数据获取流程。

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

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