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 : "第二个叶子",id : "userMang"},{text : "第三个叶子",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",false,null);
- Node node2 = new Node("监控主机2","second",null);
- arr.add(node);
- arr.add(node2);
- }else{
- Node mode = new Node("连接检测",null,"link",true,id);
- Node mode1 = new Node("系统检测","system",id);
- Node mode3 = new Node("硬盘检测","disk",id);
- Node mode4 = new Node("应用检测","app",id);
- Node mode5 = new Node("数据库检测","db",id);
- Node mode6 = new Node("备份检测","bak",id);
- Node mode7 = new Node("流量检测","netcard",id);
- arr.add(mode);
- arr.add(mode1);
- arr.add(mode3);
- arr.add(mode4);
- arr.add(mode5);
- arr.add(mode6);
- arr.add(mode7);
- }
- return arr;
- }
- }