先建立一个简单的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;
}
}然后我们需要利用这两个类来构造复杂的树,最后返回初始化一棵树。

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

被折叠的 条评论
为什么被折叠?



