树形组建TreePanel从servlet中读取JSON数据
本文由发表于7年前 | ExtJS | 暂无评论 |  被围观 9,338 views+

在Ext JS的Tree中的数据往往是从服务器端的动态程序中获取的。

为了获取数据,我们可以先编写一个返回JSON的Servlet共前台的树形组建访问:

服务器端servlet代码

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

public class TreeNodeServlet extends HttpServlet {

protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.setContentType("text/html;charset=utf-8");

//这里的node是前台的AsyncTreeNode组建中设置的ID,见下面的JS程序

String treeNode = request.getParameter("node");

String json = "";

PrintWriter out = response.getWriter();

if("0".equals(treeNode)) {

json+="[{id:1,text:'0-1'},{id:2,text:'0-2'}]";

}

else if("1".equals(treeNode)) {

json+="[{id:11,text:'0-1-1',leaf:true},{id:12,text:'0-1-2',leaf:true}]";

}

else if("2".equals(treeNode)) {

json+="[{id:21,text:'0-2-1'},{id:22,text:'0-2-2',leaf:true}]";

}

else if("21".equals(treeNode)) {

json+="[{id:211,text:'0-2-1-1',leaf:true},{id:212,text:'0-2-1-2',leaf:true}]";

}

out.write(json);

}

}

现在就可以在前台的TreePanel组建的loader方法中访问上面创建的servlet了,代码如下:

客户端显示代码

Ext.onReady(function(){

var tree = new Ext.tree.TreePanel({

//这里的div-tree是在html中创建的一个对象的id值

el: 'div-tree',

//使用loader方法访问TreeNodeServlet

loader: new Ext.tree.TreeLoader({dataUrl:'../TreeNodeServlet'})

});

var root = new Ext.tree.AsyncTreeNode({id:'0',text:'0'})

tree.setRootNode(root);

tree.render();

root.expand();

});

 

效果图如下:

树形组建TreePanel从servlet中读取JSON数据

树形组建TreePanel从servlet中读取JSON数据

 

 

除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/tree-formation-treepanel-read-json-data-from-the-servlet.html
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 4/10
文章评论
    没有评论
给我留言

有人回复时邮件通知我
ExtJS的相关文章
随机文章 本月热门 热评
1 Java Web笔记 – Tomcat部署项目 一个简单的Servlet编写 2011/11/8
2 Fedora与Redhat系统忘记密码的快速解决办法 2011/4/30
3 Java使用默认浏览器打开超链接 2011/5/10
4 据说这套试题对于软考很有帮助,大家可以看看 2011/4/26
5 更新常量类导致的编译问题 2014/12/8
6 中小应用关系型数据库设计基本思路 2014/8/31
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.