`
gwh_08
  • 浏览: 335699 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ext tree的异步与同步加载

    博客分类:
  • Ext
阅读更多

ext中,对tree的展现方式有两种:一是每个node逐个加载,逐次查询数据库;一是一个tree一次加载完成,只查询一次数据库。此次查询数据库的方式也有两种,一种是普通的select查询方式:

select * from table

 

一种是采用数据库的树状查询方式:

select * from table
 start with org_id = 'xxx'
connect by prior org_id = parent_id

 

当然这两种tree的加载方式不同,决定了相应的treeModel不同。treeModel的主要区别是后者比前者多了一个List<TreeGroupModel> children属性,即将孩子节点封装在了treeModel中。

一般习惯采用第一种的逐个加载节点的方式,这样做,对于事件的处理比较方便,比如更换图片,隐藏复选框等等,在loader时加一个listener事件即可,如:

loader.addListener("load",function(treeLoader,node) {
                 node.eachChild(function(child) {
                  var img = child.getUI().getIconEl();
                  if(child.attributes.group == false){
                   img.src =
(child.attributes.groupLeader?"../desktop/icon/operator16x16.png":"../desktop/icon/onlineUser16x16.png");
                  }
           });

 

但是这种方式有一个大的弊端:如果要求,进入界面后,整个树形结构全部expand展现出来,那么就会出现展示慢的问题,如果整个树形结果比较庞大,那么所耗费的时间就不单单是2,3秒的问题了,比如有n个节点,那么就意味着前台要发送n次请求,而后台则要查询n此数据库,很是费时的。所以前者一般处理,开始只要求显示根节点,子节点的展示则要手动完成的情景,若要求进入界面就全部展示则建议采用第二种一次请求,一次查库的方式实现。

在采用第二种方式实现的时候,有两点要注意:一:后台递归调用算法的实现,二:前台js中事件的控制方式。

递归调用算法实现:

import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import org.apache.commons.lang.builder.ToStringBuilder;
import org.junit.Test;

public class ListToTreeModelConverterTest {
	private List<GroupVO> buildMockListDatas() {
		List<GroupVO> mockDatas = new ArrayList<GroupVO>();

		GroupVO root = new GroupVO();
		root.setId(1l);
		root.setParentId(0l);

		GroupVO group1 = new GroupVO();
		group1.setId(2l);
		group1.setParentId(1l);

		GroupVO group2 = new GroupVO();
		group2.setId(3l);
		group2.setParentId(1l);

		GroupVO group11 = new GroupVO();
		group11.setId(4l);
		group11.setParentId(2l);

		GroupVO group21 = new GroupVO();
		group21.setId(5l);
		group21.setParentId(3l);

		mockDatas.add(root);
		mockDatas.add(group1);
		mockDatas.add(group2);
		mockDatas.add(group11);
		mockDatas.add(group21);
		return mockDatas;
	}

	private void iterateList(GroupTreeModel parentModel,
			List<GroupVO> mockDatas) {
		Long parentId = parentModel.getNodeId();
		List<GroupTreeModel> childrenModel = null;
		
		Iterator<GroupVO> iterator = mockDatas.iterator();
		while (iterator.hasNext()) {
			GroupVO group = iterator.next();
			if (group.getParentId().equals(parentId)) {
				childrenModel = parentModel.getChildren();
				if (childrenModel == null) {
					childrenModel = new ArrayList<GroupTreeModel>();
				}
				GroupTreeModel childModel = new GroupTreeModel();
				childModel.setNodeId(group.getId());
				childModel.setParentNodeId(group.getParentId());

				childrenModel.add(childModel);
				iterator.remove();
				
				parentModel.setChildren(childrenModel);
			}
		}
		
		if (childrenModel != null && !childrenModel.isEmpty() && !mockDatas.isEmpty()) {
			for (GroupTreeModel model : childrenModel) {
				iterateList(model, mockDatas);
			}
		}
	}

	@Test
	public void convert() {
		List<GroupVO> mockDatas = buildMockListDatas();

		GroupTreeModel rootModel = new GroupTreeModel();
		if (mockDatas != null && !mockDatas.isEmpty()) {
			GroupVO rootGroup = mockDatas.get(0);
			rootModel.setNodeId(rootGroup.getId());
			rootModel.setParentNodeId(rootGroup.getParentId());
			mockDatas.remove(0);

			iterateList(rootModel, mockDatas);
		}
		System.out.println("\n\nthe model is:" + rootModel);
	}

}

class GroupVO {
	private Long id;
	private Long parentId;

	public Long getId() {
		return id;
	}

	public void setId(Long id) {
		this.id = id;
	}

	public Long getParentId() {
		return parentId;
	}

	public void setParentId(Long parentId) {
		this.parentId = parentId;
	}

	public String toString() {
		return ToStringBuilder.reflectionToString(this);
	}
}

class GroupTreeModel {
	private Long nodeId;
	private Long parentNodeId;
	private List<GroupTreeModel> children;

	public Long getNodeId() {
		return nodeId;
	}

	public void setNodeId(Long nodeId) {
		this.nodeId = nodeId;
	}

	public Long getParentNodeId() {
		return parentNodeId;
	}

	public void setParentNodeId(Long parentNodeId) {
		this.parentNodeId = parentNodeId;
	}

	public List<GroupTreeModel> getChildren() {
		return children;
	}

	public void setChildren(List<GroupTreeModel> children) {
		this.children = children;
	}

	public String toString() {
		return ToStringBuilder.reflectionToString(this);
	}
}

 

js文件中事物控制:

注意此时由于是一次加载完成的,所以在loader.addListener中只能捕捉到一个节点,即根节点,而其他节点则是无法触发的,所以建议使用extAPI中提供的其他事件处理,如对于节点图片的转化则邮以前的loader中变为了现在的beforechildrenrendered事件中:

tree.addListener("beforechildrenrendered",function(node) {
     var img = node.getUI().getIconEl();
     if(node.attributes.group == false){
      img.src =(node.attributes.groupLeader?"../desktop/icon/operator16x16.png":"../desktop/icon/onlineUser16x16.png");
     }

 });

 

分享到:
评论

相关推荐

    EXT tree 使用 实例 最新

    7. **加载和异步操作**:EXT Tree支持懒加载,即只有在需要时才从服务器请求子节点数据,这通过`loader`配置实现。异步加载减少了初始页面加载的时间。 8. **扩展和插件**:EXT Tree有丰富的扩展和插件,如`...

    ext.net 中树加载及实现方式,初学者可以参考

    6. **异步加载实现**:在EXT.NET中,`TreePanel`的`AutoLoad`属性设置为`false`可禁用同步加载,然后通过`TreeLoader`对象配置异步加载。`TreeLoader`的`Url`属性指向获取子节点数据的URL,`NodeParamName`属性设置...

    EXT 树形结构样例

    EXT Tree的配置项也是相当丰富的,例如,你可以定制加载数据的方式(异步或同步)、节点的展开/折叠行为、节点的渲染样式等。例如,你可能需要设置`rootVisible: false`来隐藏根节点,或者使用`loadMask: true`为树...

    ext 动态加载的树源码

    7. **异步与同步加载**:EXT树支持异步和同步两种加载方式。异步加载更常见,它在后台进行,不会阻塞用户界面。同步加载则会等待数据加载完成后再更新界面,一般只在数据量较小或有特定需求时使用。 8. **优化技巧*...

    EXT 分页,树形结构案列

    3. TreeStore:与Grid的Store类似,Tree也有自己的数据存储类TreeStore,它负责加载、管理和同步树节点数据。树数据可以从JSON、XML或自定义的服务器响应中获取。 4. 异步加载(Lazy Loading):EXT Tree支持延迟...

    extJs 2异步树 源程序.

    在传统的同步加载中,整个树结构需要一次性加载到浏览器,这可能导致页面加载缓慢,尤其是当树包含大量节点时。而异步加载则是在用户滚动或展开节点时才请求并加载相关的子节点,显著减少了初始加载时间,提升了用户...

    DWRExt Tree

    Ext Tree支持拖放操作、节点展开和折叠、异步加载等功能,使得用户可以轻松地浏览和操作复杂的数据结构。 在“DWRExt Tree”中,DWR被用来实现在后台处理数据和逻辑,而Ext Tree负责在前端展示这些数据。当用户操作...

    深入浅出Ext_JS:数据存储与传输

    数据存储具有加载、刷新、添加、删除和更新数据的能力,并且能够监听数据变化,实时同步UI。此外,Store与Grid、Tree等组件紧密配合,实现数据的展示和交互。 在数据传输过程中,Ext JS提供了Ajax请求(Ext.Ajax)...

    Ext 3.0 中文文档.zip

    Ext 3.0的Tree支持拖放操作、节点展开/折叠以及异步加载。通过配置,开发者可以定制节点的图标、文本和行为,也可以添加右键菜单和搜索功能。 这份"Ext 3.0中文文档.CHM"包含了上述所有主题的详细解释和示例代码,...

    官方Ext3.0实例包

    2. 强大的数据绑定:通过Data Package,Ext3.0支持与后台数据的双向绑定,能够轻松实现数据的实时更新和同步。 3. 动态加载:支持按需加载组件和数据,优化页面性能,减少初始加载时间。 4. 完善的布局管理:提供...

    extjs tree示例

    4. **同步更新**:添加或删除节点后,需确保客户端的树结构与数据库保持一致。可以通过重新加载树店或仅刷新受影响的子树来实现。 5. **错误处理**:添加错误处理机制,当数据库操作失败时,能够通知用户并恢复树的...

    ExtDemo例子绝对能跑起来

    3. **数据绑定**:ExtJS支持双向数据绑定,这意味着UI组件的状态可以与后台数据模型同步。这简化了数据的处理和更新。 4. **Store和Model**:Store是数据容器,用于存储和管理数据,可以连接到不同的数据源。Model...

    Ext 3.0 中文API

    4. **Store和Model**:Store是存储数据的容器,它可以与服务器进行异步通信,加载和保存数据。Model定义了数据的结构和行为,与Store配合使用,增强了数据处理能力。 5. **Grid组件**:Grid是Ext 3.0中的重要组件,...

    ext2.0正式版本

    EXT库基于AJAX技术,它允许开发者通过异步方式与服务器进行数据交互,提高用户体验,使页面无需刷新就能加载新数据。EXT提供了多种AJAX组件,如Grid Panel、Form Panels等,这些组件不仅具备完整的功能,还支持各种...

    Ext表格控件和树控件

    它可以是同步加载或异步加载。在上面的示例中,`TreeLoader` 从 `data.json` 文件加载数据。 ##### 5.4 自定义 `TreeLoader` 对于更复杂的需求,可以自定义 `TreeLoader` 的行为。例如,可以实现自己的 `...

    ExtJS Ext ExtJavascript Javascript

    它提供了便捷的Ajax请求API,可以轻松实现与服务器的异步通信,如加载数据、提交表单等。同时,ExtJS的Model和Store机制使得数据的加载和处理更加透明化。 在实际项目中,ExtJS的组件库非常实用,它包括了各种各样...

    EXT核心API详解 19章

    数据绑定机制则允许组件与数据源进行实时同步,简化了数据驱动的界面更新。 第一章通常会介绍EXT的环境设置和基础用法,包括如何引入EXT库、创建第一个EXT应用以及了解EXT的基本对象和类结构。 第二章至第四章可能...

    ext-3.0框架源码

    4. **AJAX和JSON**:EXT 3.0提供了强大的AJAX通信机制,可以轻松与服务器进行异步交互,同时支持JSON数据格式,便于前后端数据交换。 5. **布局管理**:EXT 3.0拥有多种布局方式,如Fit布局、Border布局、Table布局...

    EXT 聊天程序

    9. **性能优化**:EXT应用需要优化加载速度和运行效率,例如使用延迟加载(Lazy Loading)减少初始加载的组件数量,以及利用EXT的缓存机制。 通过以上技术的整合和优化,EXT聊天程序能够提供稳定、高效的在线交流...

    Ext3.0英文API.CHM

    - **Ext.tree**:树形结构组件,可用于展示层次结构数据。 4. **高级组件** - **Ext.chart**:图表组件,用于创建各种数据可视化图表。 - **Ext.toolbar**:工具栏组件,可以添加按钮、下拉菜单等。 - **Ext....

Global site tag (gtag.js) - Google Analytics