ztree+ajax 用法

<span style="font-family: Arial,Helvetica,sans-serif;"><a target=_blank href="http://www.zuidaima.com/share/1550463523818496.htm"><strong><span style="font-size:18px;">原文</span></strong></a>
</span>

<span style="font-family: Arial,sans-serif;">index.jsp</span>

<%@ page language="java" 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>树</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">

		<link rel="stylesheet" href="<%=basePath%>plugins/ztree/css/zTreeStyle.css" type="text/css" />
		<script type="text/javascript" src="<%=basePath%>js/jquery.js"></script>
		<script type="text/javascript" src="<%=basePath%>plugins/ztree/jquery.ztree.all-3.0.min.js"></script>
		<script type="text/javascript">
			var setting = {//设置setting 对象
				data: {
					simpleData: {
						enable: true,//设置是否使用简单数据模式(Array)
						idKey: "treeId",//设置节点唯一标识属性名称
						pIdKey: "parentId"		//设置父节点唯一标识属性名称
					},key: {
						name: "name",//zTree 节点数据保存节点名称的属性名称
						title: "name"//zTree 节点数据保存节点提示信息的属性名称		
					}
				},async: {
					enable: true,//开启异步加载
					//如果设置为 true，请务必设置 setting.async 内的其它参数。
					//如果需要根节点也异步加载，初始化时 treeNodes 参数设置为 null 即可
					
					url:"data.jsp",//设置异步获取节点的 URL 地址
					autoParam:["treeId"]//设置父节点数据需要自动提交的参数
				},callback: {//回调函数
					onClick: function(event,treeId,treeNode){//点击事件的触发函数
						alert(treeNode.name);//提示点击节点的名字
					}
				}
			};
			
			//初始化树
			function initTree() {
				$.ajax({  //JQuery的Ajax
			   		type: 'POST',dataType : "json",//返回数据类型
			   		async:false,url: "data.jsp",//请求的action路径
			   		data: {"flag":true},//同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行
			   		error: function () {//请求失败处理函数  
			       		alert('请求失败');  
			   		},success:function(data){ //请求成功后处理函数。  取到Json对象data
			       		treeNodes = data;   //把后台封装好的简单Json格式赋给treeNodes    
			       		$.fn.zTree.init($("#treeDiv"),setting,treeNodes);//初始化树，传入树的Dom<pre name="code" class="html">

} }); }$(document).ready(function(){//在加载网页内容之前执行initTree();});</script></head><body><div id="treeDiv" class="ztree"></div></body></html>

data.jsp

<%@ page language="java" import="com.demo.action.*" pageEncoding="UTF-8"%>
<%
	String json = "";//回传的json数据
	
	if(null != request.getParameter("flag"))
	{//初始化树
		json = TreeAction.create();
		
		System.out.println("初始:" + json);
	}else
	{//异步加载树
		String treeId = request.getParameter("treeId");
		json = TreeAction.fetchAsyTreeData(treeId);//引用Action中函数获取相应节点ID的Json信息
		
		System.out.println("异步:" + json);
	}
	
	out.println(json);//传回response对象json
%>

3.TreeAction.java

package com.demo.action;

import java.util.ArrayList;
import java.util.List;

import net.sf.json.JSONArray;

import com.demo.bean.TreeBean;

/**
 * 
 * @author tanfei
 * @date Mar 4,2013 9:49:19 AM
 */
public class TreeAction {
	
	/**
	 * 创建树及其初始化数据
	 * @return
	 */
	public static String create()
	{
		
		//模拟初始化数据
		List<TreeBean> list = new ArrayList<TreeBean>();
		
		/********以下数据在正式应用中应该从数据库获取，此刻为了显示而模拟数据************/
		TreeBean tree = new TreeBean();
		tree.setTreeId("1");
		tree.setName("中国");
		tree.setIsParent(true);
		list.add(tree);
		
		JSONArray json = JSONArray.fromObject(list);//将List转换为Json类型
		
		return json.toString();//返回Json
	}
	
	/**
	 * 
	 * @param parentId 父结点
	 * @return 子节点json数据
	 */
	public static String fetchAsyTreeData(String parentId)
	{
		List<TreeBean> list = new ArrayList<TreeBean>();
		
		/********以下数据在正式应用中应该从数据库获取，此刻为了显示而模拟了几条数据************/
		switch(Integer.valueOf(parentId))
		{
			case 1:
				{
					TreeBean tree = new TreeBean();
					tree.setTreeId("1001");
					tree.setName("重庆直辖市");
					tree.setParentId("1");
					tree.setIsParent(true);
					
					TreeBean tree2 = new TreeBean();
					tree2.setTreeId("1002");
					tree2.setName("江苏省");
					tree2.setParentId("1");
					tree2.setIsParent(true);
					
					list.add(tree);
					list.add(tree2);
					break;
				}
			case 1001:
				{
					TreeBean tree = new TreeBean();
					tree.setTreeId("1001001");
					tree.setName("江北区");
					tree.setParentId("1001");
					tree.setIsParent(false);
					
					TreeBean tree2 = new TreeBean();
					tree2.setTreeId("1001002");
					tree2.setName("渝中区");
					tree2.setParentId("1001");
					tree2.setIsParent(false);
					
					TreeBean tree3 = new TreeBean();
					tree3.setTreeId("1001003");
					tree3.setName("渝北区");
					tree3.setParentId("1001");
					tree3.setIsParent(false);
					
					TreeBean tree4 = new TreeBean();
					tree4.setTreeId("1001004");
					tree4.setName("沙坪坝区");
					tree4.setParentId("1001");
					tree4.setIsParent(false);
					
					list.add(tree);
					list.add(tree2);
					list.add(tree3);
					list.add(tree4);
					break;
				}
			case 1002:
			{
				TreeBean tree = new TreeBean();
				tree.setTreeId("1002001");
				tree.setName("南京市");
				tree.setParentId("1002");
				tree.setIsParent(false);
				
				list.add(tree);
				break;
			}	
		}
		JSONArray json = JSONArray.fromObject(list);
		
		return json.toString();
	}
	
	
	/**
	 * 主函数
	 * @param args
	 */
	public static void main(String[] args) {
		
		System.out.println(TreeAction.create());
		
		System.out.println(TreeAction.fetchAsyTreeData("1"));
	}
}

4.treeBeen.java

package com.demo.bean;


import java.io.Serializable;


/**
*
* @author tanfei
* @date Mar 4,2013 9:43:56 AM
*/
public class TreeBean implements Serializable{


<span style="white-space:pre">	</span>/**
<span style="white-space:pre">	</span> *序列号
<span style="white-space:pre">	</span> */
<span style="white-space:pre">	</span>private static final long serialVersionUID = 4542667966180441411L;
<span style="white-space:pre">	</span>
<span style="white-space:pre">	</span>/********************树的基本属性***********************/
<span style="white-space:pre">	</span>//节点id
<span style="white-space:pre">	</span>private String treeId;
<span style="white-space:pre">	</span>//父节点id
<span style="white-space:pre">	</span>private String parentId;
<span style="white-space:pre">	</span>//名称
<span style="white-space:pre">	</span>private String name;
<span style="white-space:pre">	</span>
<span style="white-space:pre">	</span>//是否是父节点
<span style="white-space:pre">	</span>private Boolean isParent;
<span style="white-space:pre">	</span>
<span style="white-space:pre">	</span>//----------------------GETTER AND SETTER-----------------------------------
<span style="white-space:pre">	</span>public String getTreeId() {
<span style="white-space:pre">		</span>return treeId;
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>public void setTreeId(String treeId) {
<span style="white-space:pre">		</span>this.treeId = treeId;
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>public String getParentId() {
<span style="white-space:pre">		</span>return parentId;
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>public void setParentId(String parentId) {
<span style="white-space:pre">		</span>this.parentId = parentId;
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>public String getName() {
<span style="white-space:pre">		</span>return name;
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>public void setName(String name) {
<span style="white-space:pre">		</span>this.name = name;
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>public Boolean getIsParent() {
<span style="white-space:pre">		</span>return isParent;
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>public void setIsParent(Boolean isParent) {
<span style="white-space:pre">		</span>this.isParent = isParent;
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>
<span style="white-space:pre">	</span>
}

commons-beanutils-1.7.0.jar commons-collections-3.2.jar commons-lang-2.3.jar commons-logging-1.1.1.jar ezmorph-1.0.6.jar json-lib-2.1.jar json-lib-2.2.3-jdk15.jar 原文链接：https://www.f2er.com/ajax/163677.html

猜你在找的Ajax相关文章