一、一次加载数据(适用于数据量较少的情况)
首先来看java端获取数据
public String tree() throws IOException{
JSONArray root = new JSONArray();
//检索数据库获取数据 select nodeid,nodename,parent_id from table
List dataList = CommonService.getServiceValueList(); if(dataList.size()>0){
if(dataList!=null&&dataList.size()>0){
for (String[] tree:dataList) {
Map map = new HashMap();
map.put("id", tree[0]);
map.put("text", tree[1]);
JSONArray child = getchild(dataList,tree);
map.put("children", child);
root.add(map);
}
}
}
root.toJSONObject(root);
getResponse().setContentType("text/json; charset=utf-8");
PrintWriter out=getResponse().getWriter();
out.print(root);
out.close();
return null;
}
private JSONArray getchild(List dataList,String[] tree) {
//递归获取字几点
JSONArray child = new JSONArray();
for (String[] sonTree:dataList) {
if (tree[0].equals(sonTree[2])) {
Map childjson = new HashMap();
childjson.put("id", sonTree[0]);
childjson.put("text", sonTree[1]);
JSONArray childs = getchild(dataList,sonTree);
if(childs.size()>0) {
childjson.put("children", childs);
} else {
childjson.put("leaf", "true");
}
child.add(childjson);
}
}
return child;
}
js页面的代码为
var treeload =new Ext.tree.TreeLoader({
dataUrl: nowurl+'path!tree.action?dyj='+new Date()
});
var root = new Ext.tree.AsyncTreeNode({
text : '业务',
draggable : false,
id : '-1',
loader: treeload
});
var tree = new Ext.tree.TreePanel({
height : height-10,
width:width/4-50,
title:'参数分类',
animate:true,
enableDD:false,
border:false,
autoScroll : true,
root:root,
containerScroll : true
});
root.expand();
以上代码可以一次性加载所有树节点数据。
二、异步加载数据(点子节点加载数据)
适用于数据量比较大的时候,希望点击子节点时再去检索数据
还是先看看java代码
public String tree() throws IOException{
JSONArray root = new JSONArray();
//这里有变化哦 select nodeid,nodename from table where parentid=?
List dataList = CommonService.getServiceValueList(parent_id);
if(dataList.size()>0){
if(dataList!=null&&dataList.size()>0){
for (String[] tree:dataList) {
Map map = new HashMap();
map.put("id", tree[0]);
map.put("text", tree[1]);
//是否有子节点
List subdata = CommonService.getServiceValueList(tree[0], "");
if(subdata==null || subdata.size()==0) {
map.put("leaf", "true");
}
// map.put("children", child); 这句话一定不能要哦
root.add(map);
}
}
}
root.toJSONObject(root);
getResponse().setContentType("text/json; charset=utf-8");
PrintWriter out=getResponse().getWriter();
out.print(root);
out.close();
return null;
}
再看看js吧,只要修改一处并且加上'beforeload'处理就可以了
var treeload =new Ext.tree.TreeLoader({
dataUrl: nowurl+'path/tree!tree.action?service_name=LATNEVENTTREE&parentid=-1&dyj='+new Date() //加 参数了
});
tree.on('beforeload', function(node){
treeload.dataUrl =nowurl+'path/tree!tree.action?parentid='+node.id+'&dyj='+new Date();
});