ExtJs通過後臺動態建立樹
阿新 • • 發佈:2019-02-10
ExtJs動態建立樹的方法是:當樹的TreeStore要載入的時候,通過ajax請求後臺資料,根據後臺返回資料動態載入樹結構。
正常情況下我們定義TreeStore是這樣定義的:
這樣是直接定義好樹結構,我們看一個樹的節點有以下屬性:text(顯示文字)、leaf、id……屬性。var tree = Ext.create('Ext.data.TreeStore', { root : { expanded : true, children : [ { text : "操作", id : "operator", expanded : true, children : [ {text : "第一個葉子",leaf : true,id : "termOpera"}, {text : "第二個葉子",leaf : true,id : "userMang"}, {text : "第三個葉子",leaf : true,id : "importExcel"} ] } ] } });
現在如果需要動態載入樹形結構就需要通過ajax請求後臺資料。這裡我們看一下如何定義TreeStore
這樣就定義了ajax請求後臺資料載入這個TreeStore,這樣在初始載入的時候就會請求url--tree_load,並且傳入根節點的id,如果樹中某個節點不是葉子節點,那麼在點選展開該節點時候會也會傳入該節點的id。var tree_store = Ext.create('Ext.data.TreeStore', { id:'tree_store', proxy: { type: 'ajax', url: 'tree_load', reader:{ root:'nodelist', type:'json' } }, fields : [ {name:'text'}, {name:'id'}, {name:'leaf'}, ] });
這裡我們同過Struts2攔截請求,並對請求處理,首先在後臺定義一個Node類,這是一個純javaBean。有id、text、leaf屬性。
public class Node { private String text; private String id; private boolean leaf; public Node(){ } public Node(String text,String id,boolean leaf){ this.text = text; this.id = id; this.leaf = leaf; } public String getText() { return text; } public void setText(String text) { this.text = text; } public String getId() { return id; } public void setId(String id) { this.id = id; } public boolean isLeaf() { return leaf; } public void setLeaf(boolean leaf) { this.leaf = leaf; } }
然後我們看處理該請求的Action類
public class BaseAction extends ActionSupport {
private static final long serialVersionUID = 1L;
private String id;
private ArrayList<Node> nodelist;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public ArrayList<Node> getNodelist() {
return nodelist;
}
public void setNodelist(ArrayList<Node> nodelist) {
this.nodelist = nodelist;
}
private NodeService ns = new NodeService();
public String treeload(){
System.out.println(id);
nodelist = ns.getTree(id);
return SUCCESS;
}
}
id屬性用於接收點選展開節點的id,nodelist是返回結果,是Node類的集合。
這裡我們在後臺直接新建物件方式進行模擬,對於獲取Node的方式可以從資料庫中獲取資料。
public class NodeService {
//這裡做測試,後期節點資訊需要從資料庫中存取
public ArrayList<Node> getTree(String id){
ArrayList<Node> arr = new ArrayList<Node>();
if("root".equals(id)){
Node node = new Node("監控主機1","one", "one", false,null);
Node node2 = new Node("監控主機2","second", "second", false,null);
arr.add(node);
arr.add(node2);
}else{
Node mode = new Node("連線檢測", null,"link", true,id);
Node mode1 = new Node("系統檢測",null,"system", true,id);
Node mode3 = new Node("硬碟檢測", null,"disk", true,id);
Node mode4 = new Node("應用檢測", null,"app", true,id);
Node mode5 = new Node("資料庫檢測",null,"db", true,id);
Node mode6 = new Node("備份檢測", null,"bak", true,id);
Node mode7 = new Node("流量檢測", null,"netcard", true,id);
arr.add(mode);
arr.add(mode1);
arr.add(mode3);
arr.add(mode4);
arr.add(mode5);
arr.add(mode6);
arr.add(mode7);
}
return arr;
}
}
下面看執行效果