基于Ext的TreeNode实现的tree有两种方式加载:一种是同步树,即生成完整的tree。另外一种是异步树,即点击父节点时才生成子节点。对于节点过多的树,推荐使用异步方式加载树节点;对于节点较少的树,可以使用同步方式加载树节点,即完整生成树节点。此文所谈的即是基于ExtJs的同步树的实现方法。
这里只介绍同步树的的后台实现,对于页面js实现,及数据库表结构,实现图等均不鳌述,相应内容请参考我的Blog中此文的姊妹篇“基于Ext异步加载tree的实例”:http://seraph115.iteye.com/blog/246924
1. 同步树的节点实体代码,于异步实体的区别在于多了children域,在转换为json数据时包含了Ext树所能解析的children内容
/**
* 类说明: 同步加载树型结点<br>
* 创建时间: 2008-8-13 上午10:15:25<br>
*
* @author Seraph<br>
* @email: seraph115@gmail.com<br>
*/
public class TreeNode extends BaseObject {
private String id;
private String text;
private boolean leaf;
private boolean disabled;
private String cls;
private String iconCls;
private String href;
private String hrefTarget;
private String listeners;
private List children = new ArrayList(); // 存放子结点
// Omit the get and set method
... ...
}
2. 对于同步树构造模型数据的后台实现,以迭代方法实现,即给定一个根节点id,查询其下级节点,如是叶节点则表示是节点的终端,如不是叶节点则表示还包含下级节点,以迭代方式继续查询下级节点。
public TreeNode getTreeNodes(TreeNode treeNode) {
BigDecimal id = NumberUtils.createBigDecimal((treeNode.getId()));
ScTreeMenu scTreeMenu = scTreeMenuDAO.selectByPrimaryKey(id);
if(scTreeMenu != null) {
try {
BeanUtils.copyProperties(treeNode, scTreeMenu);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
}
ScTreeMenuExample example = new ScTreeMenuExample();
example.setParent(id);
example.setParent_Indicator(ScTreeMenuExample.EXAMPLE_EQUALS);
List list = scTreeMenuDAO.selectByExample(example);
for (Iterator iterator = list.iterator(); iterator.hasNext();) {
ScTreeMenu temp = (ScTreeMenu) iterator.next();
TreeNode childNode = new TreeNode();
try {
BeanUtils.copyProperties(childNode, temp);
// 判断是否为子节点
if (Boolean.getBoolean(scTreeMenu.getLeaf())) {
treeNode.addChild(childNode); // 如是,添加此节点
} else {
childNode = getTreeNodeByRole(childNode);
treeNode.addChild(childNode); // 如不是,迭代查询其子节点,并添加
}
} catch (Exception e) {
e.printStackTrace();
}
}
return treeNode;
}
to be continue...
分享到:
相关推荐
3. **模型(Model)和存储(Store)**:EXT JS使用数据模型(TreeModel)来定义节点的结构,而存储(TreeStore)负责管理数据,处理数据的加载、更新和同步。 4. **渲染器(Renderer)**:通过定义`renderer`函数,...
4. **数据存储(Store)**:`Ext.data.Store`是连接数据模型和视图的关键,它负责管理数据加载、更新和同步。在这个例子中,数据库配置可能直接在Store的配置项中定义,通过URL或内存中的数据进行数据交互。 5. **...
1. 基于组件的架构:Ext3.0采用模块化设计,每个UI元素都是一个独立的组件,如面板、表格、表单等,方便复用和组合,提高了开发效率。 2. 强大的数据绑定:通过Data Package,Ext3.0支持与后台数据的双向绑定,能够...
7. **异步与同步加载**:EXT树支持异步和同步两种加载方式。异步加载更常见,它在后台进行,不会阻塞用户界面。同步加载则会等待数据加载完成后再更新界面,一般只在数据量较小或有特定需求时使用。 8. **优化技巧*...
- 首先,创建一个`Ext.tree.Panel`实例,设置基本配置,如`title`,`store`,以及`rootVisible`等。 - 然后,定义一个`Ext.data.TreeStore`,这是EXT中用于存储和管理树数据的类。你需要提供一个`proxy`来连接到...
1. **组件系统**:ExtJS的核心是其组件化的设计,如面板(Panel)、表格(Grid)、表单(Form)、树形视图(Tree)等,每个都是可复用、可配置的独立单元。 2. **布局管理**:ExtJS提供多种布局模式,如Fit布局、...
TreePanel是EXT中用于展示树状结构数据的核心组件,它可以动态加载数据并提供多种交互方式。创建一个动态树的第一步是实例化一个TreePanel,并配置其属性,如根节点、数据源以及节点的渲染样式等。 ```javascript ...
描述中的"ext ext例子"可能是由于输入错误,但我们可以理解为这是在强调ExtJS框架的实例。"绝对能跑起来"则意味着这个Demo是一个完整的、可运行的代码示例,旨在帮助开发者理解和学习如何使用ExtJS。 标签"ExtDemo...
它可以是同步加载或异步加载。在上面的示例中,`TreeLoader` 从 `data.json` 文件加载数据。 ##### 5.4 自定义 `TreeLoader` 对于更复杂的需求,可以自定义 `TreeLoader` 的行为。例如,可以实现自己的 `...
这个"Ext JS6 by Example中文版(含源码)"的资源,显然是一份关于如何使用Ext JS 6的中文教程,结合实例来帮助初学者快速上手。下面将详细探讨Ext JS 6的核心特性、重要组件以及开发实践。 1. **核心特性**: - **...
例如,`Ext.apply()`用于对象属性的复制,`Ext.getCmp()`用于获取组件实例,`Ext.onReady()`则在DOM加载完成后执行指定函数,这些都是EXT开发中常用的实用方法。 5. **布局(Layouts)**:EXT 2.0支持多种布局模式...
在传统的同步加载中,整个树结构需要一次性加载到浏览器,这可能导致页面加载缓慢,尤其是当树包含大量节点时。而异步加载则是在用户滚动或展开节点时才请求并加载相关的子节点,显著减少了初始加载时间,提升了用户...
2. **TreePanel配置**:创建TreePanel实例时,指定了其所在元素、ID、自动滚动、动画效果、边框、拖放功能等属性,并定义了TreeLoader用于异步加载数据,数据源URL包含了动态参数`roleId`,这通常用于根据角色ID加载...
这意味着你需要确保你的开发环境中已经正确设置了ExtJS库的路径,否则页面可能无法正常加载和运行。 实现拖拽树和表格之间的功能是一个涉及多个组件和事件处理的复杂过程。通过理解ExtJS的DD API和正确配置Tree与...
2. **数据绑定**:学习Ext JS的数据模型(Model)、存储(Store)和代理(Proxy),以及如何与服务器进行数据交互,实现数据的加载、保存和同步。 3. **视图和视图模型**:了解如何使用ViewModel来连接视图和数据,...
EXTJS小系统是一种基于JavaScript的前端开发框架EXT JS的应用实例,用于构建用户界面。EXT JS提供了丰富的组件库,包括表格、面板、表单、菜单等,使得开发者可以快速地搭建功能齐全、美观的Web应用程序。这个小系统...
3. **创建树实例**:使用`Ext.tree.TreePanel`或其后代类来创建树,定义配置项如根节点、store、拓扑结构等。 4. **配置树节点**:设置节点的可拖放属性、展开折叠行为、图标等。 5. **监听事件**:添加事件监听器...
Ext.create('Ext.tree.Panel', { title: 'File Explorer', width: 300, height: 300, store: Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: 'data.json', reader: { type: 'json', ...
首先,我们创建了一个新的Ext.tree.TreePanel实例,命名为Fpanel。在配置中,`id`设为'ptree',`region`设为'west',`layout`设为'anchor',`border`设为false以隐藏边框,`rootVisible`设为false不显示根节点,而`...
标题中的“ext”通常指的是EXTJS,一个基于JavaScript的开源UI框架,用于构建富客户端Web应用。EXTJS提供了丰富的组件库,包括数据绑定、图表、表格等,支持响应式设计,能够创建高度交互且功能强大的网页应用。而...