ztree+ajax 用法
发布时间：2020-12-16 02:05:23 所属栏目：百科 来源：网络整理
导读：span style="font-family: Arial,Helvetica,sans-serif;"a target=_blank href="http://www.zuidaima.com/share/1550463523818496.htm"strongspan style="font-size:18px;"原文/span/strong/a/span span style="font-family: Arial,sans-serif;"index.jsp/sp
<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 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |