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