ExtJs通过后台动态创建树

前端之家收集整理的这篇文章主要介绍了ExtJs通过后台动态创建树前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

  1. var tree = Ext.create('Ext.data.TreeStore',{
  2. root : {
  3. expanded : true,children : [ {
  4. text : "操作",id : "operator",expanded : true,children : [
  5. {text : "第一个叶子",leaf : true,id : "termOpera"},{text : "第二个叶子",id : "userMang"},{text : "第三个叶子",id : "importExcel"}
  6. ]
  7. } ]
  8. }
  9. });
这样是直接定义好树结构,我们看一个树的节点有以下属性:text(显示文本)、leaf、id……属性

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

  1. var tree_store = Ext.create('Ext.data.TreeStore',{
  2. id:'tree_store',proxy: {
  3. type: 'ajax',url: 'tree_load',reader:{
  4. root:'nodelist',type:'json'
  5. }
  6. },fields : [
  7. {name:'text'},{name:'id'},{name:'leaf'},]
  8. });
这样就定义了ajax请求后台数据加载这个TreeStore,这样在初始加载的时候就会请求url--tree_load,并且传入根节点的id,如果树中某个节点不是叶子节点,那么在点击展开该节点时候会也会传入该节点的id。

这里我们同过Struts2拦截请求,并对请求处理,首先在后台定义一个Node类,这是一个纯javaBean。有id、text、leaf属性

  1. public class Node {
  2. private String text;
  3. private String id;
  4. private boolean leaf;
  5. public Node(){
  6. }
  7. public Node(String text,String id,boolean leaf){
  8. this.text = text;
  9. this.id = id;
  10. this.leaf = leaf;
  11. }
  12. public String getText() {
  13. return text;
  14. }
  15. public void setText(String text) {
  16. this.text = text;
  17. }
  18. public String getId() {
  19. return id;
  20. }
  21. public void setId(String id) {
  22. this.id = id;
  23. }
  24. public boolean isLeaf() {
  25. return leaf;
  26. }
  27. public void setLeaf(boolean leaf) {
  28. this.leaf = leaf;
  29. }
  30. }

然后我们看处理该请求的Action类


  1. public class BaseAction extends ActionSupport {
  2. private static final long serialVersionUID = 1L;
  3. private String id;
  4. private ArrayList<Node> nodelist;
  5. public String getId() {
  6. return id;
  7. }
  8. public void setId(String id) {
  9. this.id = id;
  10. }
  11. public ArrayList<Node> getNodelist() {
  12. return nodelist;
  13. }
  14. public void setNodelist(ArrayList<Node> nodelist) {
  15. this.nodelist = nodelist;
  16. }
  17. private NodeService ns = new NodeService();
  18. public String treeload(){
  19. System.out.println(id);
  20. nodelist = ns.getTree(id);
  21. return SUCCESS;
  22. }
  23. }

id属性用于接收点击展开节点的id,nodelist是返回结果,是Node类的集合。

这里我们在后台直接新建对象方式进行模拟,对于获取Node的方式可以从数据库获取数据。

  1. public class NodeService {
  2. //这里做测试,后期节点信息需要从数据库中存取
  3. public ArrayList<Node> getTree(String id){
  4. ArrayList<Node> arr = new ArrayList<Node>();
  5. if("root".equals(id)){
  6. Node node = new Node("监控主机1","one",false,null);
  7. Node node2 = new Node("监控主机2","second",null);
  8. arr.add(node);
  9. arr.add(node2);
  10. }else{
  11. Node mode = new Node("连接检测",null,"link",true,id);
  12. Node mode1 = new Node("系统检测","system",id);
  13. Node mode3 = new Node("硬盘检测","disk",id);
  14. Node mode4 = new Node("应用检测","app",id);
  15. Node mode5 = new Node("数据库检测","db",id);
  16. Node mode6 = new Node("备份检测","bak",id);
  17. Node mode7 = new Node("流量检测","netcard",id);
  18. arr.add(mode);
  19. arr.add(mode1);
  20. arr.add(mode3);
  21. arr.add(mode4);
  22. arr.add(mode5);
  23. arr.add(mode6);
  24. arr.add(mode7);
  25. }
  26. return arr;
  27. }
  28. }
下面看运行效果

猜你在找的Ajax相关文章