这次能改进,我得写一个人--斌哥。他也是刚开始学JavaScript,加我QQ,我们是这样认识的。parentId
和 node
属性都是他创造的,也是动态异步加载的关键部分之一。这次的改进,我个人认为这应该是动态加载最简洁的做法。如有其它,还望高人指教,Advance in thanks!
欣赏该文章的朋友,我建议先欣赏下面这篇,肯定对你有惊喜。我是在下面这篇实战的基础上实现本文的实战的。
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;
}
}
大功告成!
版权声明:
如果大家要转载本文,我非常荣幸。但请参加转载网址,谢谢!
分享到:
相关推荐
ExtJS_Tree利用_JSON_在Struts_2实现Ajax动态加载树结点,精彩不容错过。
Extjs Tree + JSON + Struts2 例子
Extjs Tree + JSON + Struts2 示例源代码
extjs tree + json+struts2示例源代码extjs tree + json+struts2示例源代码
Extjs Tree + JSON + Struts2 开发war包
extjs tree 异步加载树型完整的一个web工程,自已已经试过,可用。
Extjs_Tree_JSON_ _Struts2_例子
AJAX: 以JSON数据格式,使用ExtJS构造动态异步加载的树。
extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json...
ExtJS4+JSON+Servlet(Struts2)实现登录验证
网上有些这样的例子,但是下了几个都没有跑起来,哎,希望那些发文章的人要发就发全的,别发个半生不熟的。... 现在自己整理了一个Struts2+ExtJS2实现文异步文件上传,没法上传图片无法看到效果,直接上源码吧。
ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例
ExtJs在struts2.0.x下实现动态树的解决方案
Extjs4文件上传,后台struts2
ExtJs + Struts2 + JSON 程序总结
tree 的所有功能 很难得的 我刚调试好 只需要把数据库url 用户名和密码修改 ,就可以运行 extjs 动态树 tree ajax 全部功能 10分一点都不多,绝对值得。
一个运用Extjs,Struts2, json,iterator技术构建的iterator_jsonDemo2。iterator_jsonDemo1的链接:http://download.csdn.net/detail/cafebar123/8816409 运用了Extjs,Struts2, json,iterator技术, 将数据从...
最近在学习extjs tree,有两个不错的例子,希望对需要的朋友有所帮助!
struts2+extjs+json整合实例