教你用ajax来初始化一个zTree

本文介绍如何在web页面中利用Ajax技术动态初始化zTree,实现数据的异步加载。通过创建HTML结构,设置zTree配置,以及编写Ajax请求获取数据,可以有效地提升用户体验。

   先建立一个简单的web页面(仅仅表达主要的意思):

<ul id="tree" class="ztree"></ul><br/>
<input type="button" value="ajax加载" onclick="getJson();"/>
  再来个js文件:

var treeNodes;
function getJson(){
	$.ajax({
	url : 'http://localhost:8080/Tree/ZTreeAction.action',
	type : 'ajax',
	dataType : 'json',
	timeout : 1000,
	error : function(){
		alert("网络延时,请重试.");
	},
	success : function(res){
		treeNodes = res;
		$.fn.zTree.init($("#tree"), setting, treeNodes);
	}
	});
}

ok,下面我们来看一下后台的代码,这是重点:

import java.io.IOException;
import java.io.OutputStream;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import org.apache.struts2.ServletActionContext;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.geoway.bean.DataBean;
import com.geoway.bean.DataParentBean;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

@Controller(value="zTreeAction")
@Scope("prototype")
public class ZTreeAction extends ActionSupport {
	
	private static final long serialVersionUID = 1L;
	private List<DataParentBean> list = new ArrayList<DataParentBean>();
	
	public void JsonTree() throws IOException{
		/*构造几个数据*/
		List<DataBean> list1 = new ArrayList<DataBean>();
		DataBean bean1 = new DataBean("web1", "www.web1.com", "_target");
		DataBean bean2 = new DataBean("web2", "www.web2.com", "_target");
		list1.add(bean1);
		list1.add(bean2);
		List<DataBean> list2 = new ArrayList<DataBean>();
		DataBean bean3 = new DataBean("web3", "www.web3.com", "_target");
		DataBean bean4 = new DataBean("web4", "www.web4.com", "_target");
		DataBean bean5 = new DataBean("web5", "www.web5.com", "_target");
		list2.add(bean3);
		list2.add(bean4);
		list2.add(bean5);
		
		DataParentBean pbean1 = new DataParentBean("新闻网", "true", list1);
		DataParentBean pbean2 = new DataParentBean("电商网", "false", list2);
		
		list.add(pbean1);
		list.add(pbean2);
		JSONArray array = JSONArray.fromObject(list);
		String result = array.toString();
		System.out.println("Json结果为: " + result);
		
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/html;charset=UTF-8");
		OutputStream out = response.getOutputStream();
		byte[] myresult=result.getBytes("UTF-8");
		out.write(myresult);
		out.close();
	}
}

在这里我们首先需要搞清楚zTree节点的构造还有属性,这样我们才可以在后台建立相关的节点类,例如我的后台节点类:

1、DataBean

public class DataBean {
	private String name;
	private String url;
	private String target;
	
	public DataBean(){
	}
	
	public DataBean(String name, String url, String target){
		this.name = name;
		this.url = url;
		this.target = target;
	}
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}
	public String getTarget() {
		return target;
	}
	public void setTarget(String target) {
		this.target = target;
	}
	
}

2、DataParentBean

import java.util.List;

public class DataParentBean {
	private String name;
	private String open;
	private List<DataBean> children;
	
	public DataParentBean(){
	}
	
	public DataParentBean(String name, String open, List<DataBean> children){
		this.name = name;
		this.open = open;
		this.children = children;
	}
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	
	public String getOpen() {
		return open;
	}

	public void setOpen(String open) {
		this.open = open;
	}

	public List<DataBean> getChildren() {
		return children;
	}
	public void setChildren(List<DataBean> child) {
		this.children = child;
	}
	
}
然后我们需要利用这两个类来构造复杂的树,最后返回初始化一棵树。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值