ExtJs通过后台动态创建树

本文主要是介绍ExtJs通过后台动态创建树，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

ExtJs动态创建树的方法是：当树的TreeStore要加载的时候，通过ajax请求后台数据，根据后台返回数据动态加载树结构。

正常情况下我们定义TreeStore是这样定义的：

	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"} ]} ]}});

这样是直接定义好树结构，我们看一个树的节点有以下属性：text（显示文本)、leaf、id……属性。

现在如果需要动态加载树形结构就需要通过ajax请求后台数据。这里我们看一下如何定义TreeStore

	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'},]});

这样就定义了ajax请求后台数据加载这个TreeStore，这样在初始加载的时候就会请求url--tree_load，并且传入根节点的id，如果树中某个节点不是叶子节点，那么在点击展开该节点时候会也会传入该节点的id。

这里我们同过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;}
}

下面看运行效果