0%
这是一片思考的空间 -- arthinking
Spring 重构&代码整洁之道 软件设计 JVM 并发编程 数据结构与算法 分布式 存储 网络 微服务 设计模式
Java技术栈 - 涉及Java技术体系

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

在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(); });

效果图如下: [caption id="attachment_53" align="alignleft" width="243" caption="树形组建TreePanel从servlet中读取JSON数据"]树形组建TreePanel从servlet中读取JSON数据[/caption]

欢迎关注我的其它发布渠道

订阅IT宅
内功修炼
Java技术栈
Java架构杂谈是IT宅精品文章公众号,欢迎订阅:
📄 网络基础知识:两万字长文50+张趣图带你领悟网络编程的内功心法 📄 HTTP发展史:三万长文50+趣图带你领悟web编程的内功心法 📄 HTTP/1.1:可扩展,可靠性,请求应答,无状态,明文传输 📄 HTTP/1.1报文详解:Method,URI,URL,消息头,消息体,状态行 📄 HTTP常用请求头大揭秘 📄 HTTPS:网络安全攻坚战 📄 HTTP/2:网络安全传输的快车道 📄 HTTP/3:让传输效率再一次起飞 📄 高性能网络编程:图解Socket核心内幕以及五大IO模型 📄 高性能网络编程:三分钟短文快速了解信号驱动式IO 📄 高性能网络编程:彻底弄懂IO复用 - IO处理杀手锏,带您深入了解select,poll,epoll 📄 高性能网络编程:异步IO:新时代的IO处理利器 📄 高性能网络编程:网络编程范式 - 高性能服务器就这么回事 📄 高性能网络编程:性能追击 - 万字长文30+图揭秘8大主流服务器程序线程模型
📄 Java内存模型:如果有人给你撕逼Java内存模型,就把这些问题甩给他 📄 一文带你彻底理解同步和锁的本质(干货) 📄 AQS与并发包中锁的通用实现 📄 ReentrantLock介绍与使用 📄 ReentrantReadWriteLock介绍与使用 📄 ReentrantLock的Condition原理解析 📄 如何优雅的中断线程 📄 如何优雅的挂起线程 📄 图解几个好玩的并发辅助工具类 📄 图解BlockingQueue阻塞队列
📄 消息队列那么多,为什么建议深入了解下RabbitMQ? 📄 高并发异步解耦利器:RocketMQ究竟强在哪里? 📄 Kafka必知必会18问:30+图带您看透Kafka
📄 洞悉MySQL底层架构:游走在缓冲与磁盘之间 📄 SQL运行内幕:从执行原理看调优的本质 📄 洞悉Redis技术内幕:缓存,数据结构,并发,集群与算法