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

shupili141005

这次能改进，我得写一个人--斌哥。他也是刚开始学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;
      }
  }
 
大功告成！
 
 
版权声明：
如果大家要转载本文，我非常荣幸。但请参加转载网址，谢谢！