有时候我们不希望一开始就取得整个树的数据然后初始化树,而是希望只取得一小部分数据,随着用户对树的操作,在需要的时候再从服务器取得后续的数据,展现相应的树结构,使用ExtJS的有关组件,我们可以很方便地做到这一步。
客户端的代码如下:
Js代码
Ext.onReady(function() {
var root = new Ext.tree.AsyncTreeNode({
id : "root",
text : "树的根"
});
var loader = new Ext.tree.TreeLoader({
url : '/extapp/Tree'
});
loader.on("beforeload", function(loader, node) {
loader.baseParams.nodeId = node.id;
});
var tree = new Ext.tree.TreePanel({
renderTo : "tree",
root : root,
loader : loader,
width : 200,
height : 300
});
});
Ext.onReady(function() {
var root = new Ext.tree.AsyncTreeNode({
id : "root",
text : "树的根"
});
var loader = new Ext.tree.TreeLoader({
url : '/extapp/Tree'
});
loader.on("beforeload", function(loader, node) {
loader.baseParams.nodeId = node.id;
});
var tree = new Ext.tree.TreePanel({
renderTo : "tree",
root : root,
loader : loader,
width : 200,
height : 300
});
});
其中:
1 需要动态加载的节点要定义为AsyncTreeNode
2 使用TreeLoader从服务器加载数据,本例中服务器为映射到/extapp/Tree的一个Servlet
3 对TreeLoader添加"beforeload"事件,在每次发起request前,设置一个参数,参数就是loader.baseParams后面定义的nodeId,因为我们要根据不同的节点取得不同的子节点数据,所以把节点的id作为参数传给后台。
后台的servlet的doPost是这样的:
Java代码
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
try {
Thread.sleep(1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
StringBuilder sb = new StringBuilder();
String nodeId = request.getParameter("nodeId");
if (nodeId != null) {
if (nodeId.equals("root")) {
sb.append("[{");
sb.append(" id: 1,");
sb.append(" text: '子节点1',");
sb.append(" leaf: true");
sb.append("},{");
sb.append(" id: 2,");
sb.append(" text: '儿子节点2',");
sb.append(" leaf: false");
sb.append("}]");
} else if (nodeId.equals("2")) {
sb.append("[{");
sb.append(" id: 3,");
sb.append(" text: '孙子节点',");
sb.append(" leaf: true");
sb.append("}]");
}
}
PrintWriter out = response.getWriter();
out.print(sb.toString());
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
try {
Thread.sleep(1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
StringBuilder sb = new StringBuilder();
String nodeId = request.getParameter("nodeId");
if (nodeId != null) {
if (nodeId.equals("root")) {
sb.append("[{");
sb.append(" id: 1,");
sb.append(" text: '子节点1',");
sb.append(" leaf: true");
sb.append("},{");
sb.append(" id: 2,");
sb.append(" text: '儿子节点2',");
sb.append(" leaf: false");
sb.append("}]");
} else if (nodeId.equals("2")) {
sb.append("[{");
sb.append(" id: 3,");
sb.append(" text: '孙子节点',");
sb.append(" leaf: true");
sb.append("}]");
}
}
PrintWriter out = response.getWriter();
out.print(sb.toString());
}
后台很简单:
1 那段延时是为了在前台看出加载等待效果的
2 根据request的参数nodeId的不同,返回不同的子节点数据。当然实际应用当中这些数据一般是根据数据库中的数据生成的,这里略去了。
原文出处:http://www.iteye.com/topic/441349
分享到:
相关推荐
《学记》原文及注释、解读[参考].pdf
《学记》读书笔记_心得感悟五篇范文.doc
《学记》原文及白话解另附评注[归类].pdf
《学记》读书笔记_心得感悟五篇范文精选.doc
《学记》的“深度学习”教学意蕴研究.pdf
【张孝祥太平州学记,阅读答案附翻译】 太平州学记.docx
学记全文及译文.doc
学记原文及翻译.doc
《礼记·学记》原文.doc
《学记》注解[参考].pdf
行业教育软件-学习软件-西游学记 1.0.zip
学记中的学习观与现实意义.doc
《学记》对高职语文教育的启示.doc
学习总结-《礼记·学记》详细解析.docx
第一天上学记_学习课件ppt
《学记》是对先秦儒家教学思想的理论总结,对教学成功与失败的规律进行了高度概括。认为“豫、时、孙、摩”,是教学取得成功的必要条件。相反,“发然后禁”“时过然后学”“杂施而不孙”“独学而无友”“燕朋”与“燕...
《礼记_学记》讲解_黄能武老师.doc
教师资格考试:《学记》中的教育思想定稿.pdf
2020江西教师资格证考试:《学记》中的教育思想归纳.pdf
初中语文 古诗文赏析 李觏《袁州州学记》原文、注释、译文及赏析.doc