(更新版)利用ExtJS Tree的TreeNode(Json格式)在Struts 2中实现Ajax真正的动态异步加载树

这次能改进，我得写一个人--斌哥。他也是刚开始学JavaScript，加我QQ，我们是这样认识的。parentId 和 node 属性都是他创造的，也是动态异步加载的关键部分之一。这次的改进，我个人认为这应该是动态加载最简洁的做法。如有其它，还望高人指教，Advance in thanks!

 

欣赏该文章的朋友，我建议先欣赏下面这篇，肯定对你有惊喜。我是在下面这篇实战的基础上实现本文的实战的。

(惊喜等你拿！)ExtJS Tree利用json(直接传List TreeNode，不需要转化为JSONArray或通过JSP传)在Struts 2实现Ajax动态加载树结点

Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = '../ext-2.0.2/resources/images/default/s.gif'; // 根据项目中 s.gif 所在的目录设置
    Ext.QuickTips.init();

    // shorthand
    var Tree = Ext.tree;

    var loader = new Tree.TreeLoader({
        dataUrl: '' // 可以是 '../admin/dicEmployeeList.action?skey=9039'，而不改变该参数，只要在每次调用 Action 之前传入所需的参数
    });
    
    // set the root node
    var root = new Tree.AsyncTreeNode({
        id :'root',
        text: 'Root'
        ,expanded: true
        ,draggable: false,    // disable root node dragging
        hrefTarget: 'centerFrame'    // Target frame for the link
    });

    var tree = new Tree.TreePanel({
        id :'tree'
        ,root: root
        ,rootVisible :false,
        autoScroll: true, animate: true,
        containerScroll: true,  border :false,
        enableDD: true,// dropConfig: {appendOnly: true},
        margins :'5 5 4 5', title :'ManagerSystem',
        loader: loader,
        bodyStyle :'background:#fff url(../images/bgImage/treeBg200.gif) repeat-x 0 0;'
    });

//        root.href = 'userinfo/viewUserInfo.html';    // URL of the link used for this node
        
        var flag = true;
        tree.on('beforeload', function(node){

            /* dataUrl 可以不用改变 */
            if(flag) {
                tree.loader.dataUrl = '../admin/dicDepartmentList.action?skey=9039';
                flag = false;
            } else {
                tree.loader.dataUrl = '../admin/dicEmployeeList.action?skey=9039';
            }

            /* 在 *.js 文件中，往 *.action 中传入参数，可以有多个参数 */

            var submitState = Ext.getCmp('id_SubmitState').getValue();

            Ext.apply(this.baseParams, {

               submitState : submitState // 对于红色的 submitState ， 在 Action 类中必须有setSubmitState()函数， 以便Struts 2 的 IoC 容器可以根据设值方法往 Action 中注入 该属性，请看最后部分

               ......

            }

        });

        tree.addListener('beforeclick', function(node, e){
            if(node.isLeaf()) {    //否则直接展开

               node.expand(false, false);
            } else {    // 若被选中节点还包含子节点且从未加载过，则增加下一层子节点

               //  自动调用 Action
            }    // if end
        });    // addListener end
        /*
        tree.addListener('load', function(node){
            console.log(node);  // 在 Firefox 的 Firebug 插件的控制台输出 node 节点信息
        });

        */

        // 注意： render 一定要放在 beforeload 事件后面，否则可能得不到你想要的结果
        // Important point: Render tree to document body when the code is running here
        tree.render(Ext.getBody());

});

 

在 *.java 文件中的代码如下：

@SuppressWarnings("serial")
public class YearCheckStateInAction  extends ActionSupport{

   private String submitState;

 

   public String getSubmitState() {
        return submitState;
    }

    public void setSubmitState(String submitState) {
        this.submitState = submitState;
    }

}

 

如想要实现像复选框这样的但是只有在叶子节点单选的 ，只要稍微改变一下上面代码即可（需要将两篇文章结合）：

// TreeNode. java 文件

public class TreeNode {

       // 只要增加该属性即可

       private Boolean checked;

}

 

// 在 ApplyFormAction. java 文件的 viewAsTreeByAdmin() 函数中增加一下代码即可：

       treeNode.setChecked(true); // 针对叶子节点

//       treeNode.setChecked(true); // 针对非叶子节点

 

// js 文件，这是为了在前台实现单选功能用

var preId = null;
listeners: {
      'checkchange': function(node, checked) {
      if(preId !== null)
      node.parentNode.findChild('id', preId).ui.toggleCheck(!checked);
      preId = node.id;
      }
  }

 

大功告成！

 

 

版权声明：

如果大家要转载本文，我非常荣幸。但请参加转载网址，谢谢！