(更新版)利用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;
}
}
大功告成！
版权声明：
如果大家要转载本文，我非常荣幸。但请参加转载网址，谢谢！