一、一次加載數據(適用於數據量較少的情況)
首先來看java端獲取數據
public String tree() throws IOException{
JSONArray root = new JSONArray();
//檢索數據庫獲取數據 select nodeid,nodename,parent_id from table
List<String[]> dataList = CommonService.getServiceValueList(); if(dataList.size()>0){
if(dataList!=null&&dataList.size()>0){
for (String[] tree:dataList) {
Map<String, Object> map = new HashMap<String, Object>();
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<String[]> 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<String[]> dataList = CommonService.getServiceValueList(parent_id); if(dataList.size()>0){ if(dataList!=null&&dataList.size()>0){ for (String[] tree:dataList) { Map<String, Object> map = new HashMap<String, Object>(); map.put("id", tree[0]); map.put("text", tree[1]); //是否有子節點 List<String[]> 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();
});