日期:2014-05-16  浏览次数:20369 次

(更新版)利用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());

});

?