有时候我们不希望一开始就取得整个树的数据然后初始化树,而是希望只取得一小部分数据,随着用户对树的操作,在需要的时候再从服务器取得后续的数据,展现相应的树结构,使用ExtJS的有关组件,我们可以很方便地做到这一步。
客户端的代码如下:
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是这样的:
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的不同,返回不同的子节点数据。当然实际应用当中这些数据一般是根据数据库中的数据生成的,这里略去了。
分享到:
相关推荐
extjs实现动态树加载菜单
NULL 博文链接:https://kaobian.iteye.com/blog/996146
AJAX: 以JSON数据格式,使用ExtJS构造动态异步加载的树。
通过修改网络上的一个树的例子实现节点的动态加载,还支持checkbox。
ExtJs在struts2.0.x下实现动态树的解决方案
extjs4,当点击左边的树,右边会生成相应的面板,代码精简,欢迎大家来学习,有问题可以直接交流。
动态加载树Extjs + asp.net 对我的启发很大,共享一下
使用JDBC访问sqlserver 获得数据 生成Json串 Extjs 动态加载Tree 这是个完整项目 但是数据源需要自己配置 重在演示整个流程
Extjs4.0+MVC模式+存动态加载,动态加载面板,动态加载控制器,动态加载树叶子节点,后台servlet模拟json数据
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
demo描述: 1. 页面主框架是左是一个tree,...2. 左边的树是加载主页面的时候动态生成 3. 点击左边的树的节点动态加载controller生成一个table 注:需要自己导入Extjs 4.2.x 的文件,该demo是用Extjs 4.2.1 写的
Extjs动态加载树,首先在数据库里面设计存放树信息的表 代码如下: USE [KimiExtjs] GO /****** 对象: Table [dbo].[Trees] 脚本日期: 04/08/2010 22:12:25 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON ...
在家研究了一下extjs异步树,-每个节点都异步加载-前后台代码都有-附整个工程-运行通过-前台代码请看doctree.js,后台代码请看TreeService.java,运行环境:Myeclipse6.5+tomcat7.0.27
让你了解给折叠布局中加入树的文档你值得拥有,全文通过具体的实例为读者具体的讲述。
3.动态添加节点/动态删除节点/动态移动节点 4.动态dom对象创建表格树 5.完美支持json格式数据,支持xml(需转换) 6.支持ajax加载节点 7.事件驱动 8.可以动态根据列内容排序 9.简化函数参数,利用{} object输入参数,风格...
extjs 写的动态加载、增删改查、拖拽Tree (java mysql数据库 已有表结构 eclipse可直接导入)(完整版)
详细描述用Extjs4生成树,以及树的动态加载等功能
ExtJS 4中动态加载的路径设置 Extjs4 API文档阅读(一)——类系统(Class System) Extjs4 API文档阅读(三)——布局和容器 Extjs4 API文档阅读(二)——MVC构架(上) Extjs4 API文档阅读(二)——MVC构架(下) Extjs4...
通过java 访问数据库而生成节点 子节点的 ID 与 父节点的关系为“父节点id_子节点id”此id为数据库中的id 同理“父节点id_子节点id_子子节点id”,因此加载树时将node.id做为参数 通过split("_"),根据数据的长度就...
springmvc+extjs4实例树