`

Ext动态异步树的构建格式

阅读更多
Ext.onReady(function(){
// 开启表单提示
	Ext.QuickTips.init();
	// 设置提示信息位置为边上
	Ext.form.Field.prototype.msgTarget = 'side';
	// 树
	NavTree = function() { // navTree类
		var nav;
		var loader;
		var root;
		var leafMenu;
		var dirMenu;
		return {
			init : function() {
				if (!loader) {
					loader = new Ext.tree.TreeLoader({ // 实例化loader
						// TreeLoader
						url : "../../marketrisk/relativerisk/queryTreeData.action"
					});
					loader.on('beforeload', function(treeloader,node) {// 设置参数
								treeloader.baseParams = {
									id :node.id,
									pid:node.parentNode==null ?'' :node.parentNode.id,
									method : 'tree'
								};
							}, this);

				}
				if (!root) {
					root = new Ext.tree.AsyncTreeNode({// 实例化 根节点root
						id : '-1',
						text : "委托人树"
					});
				}
				if (!nav) {
					nav = new Ext.tree.TreePanel({ // 实例化 树面板nav
						title : "委托人树",
						width : 300,
						autoScroll : true,
						animate : true,
						id:'ptree',
						height:550,
						loader : loader,// 加入loader
						root : root, // 加根节点进来
						//checkModel:"cascade",
						checkModel:'cascade',
						listeners: {  
								'dblclick':function(node,e){
										if(!node.isLeaf()){
											return;
										}
										var nodeid=node.id;
										var porids = nodeid.split(",");
										var proids = node.parentNode.id.split(",");
										var proname=node.parentNode.text;
										
										Ext.getBody().mask("数据加载中.请稍等...","x-mask-loading");
										Ext.Ajax.timeout=50000;
										Ext.Ajax.request({
										 url: '../../marketrisk/relativerisk/findBeathByPor.action',
										 method:'post',
										 success: function(response, options){
										 	Ext.getBody().unmask();
									        var str = Ext.util.JSON.decode(response.responseText);
									        var data=eval(str['treeTable']);
									    	Ext.getCmp('pgrid').store.loadData(data);
									    	grid.expandNodes(0);
										 },
										failure : function(response, options) {
											Ext.getBody().unmask();
											alert("failure,come back:")
										},
										 params:{
											'proid': proids[0],
									 		'porid': porids[0],
									 		'proname':proname
									        }
										});
								     }
							},  
						enableDD : false
							// 能拖动
					});
					nav.on("contextmenu", this.showTreeMenu);// 面板上添加右击菜单,调用方法		
				}

			},
			showTreeMenu : function(node, e) {
				nodeSelected = node;
				nodeSelected.select();// 选中的node
				if (node.isLeaf()) { // 如果是叶子
					leafMenu.showAt(e.getPoint());// 显示叶子
				} else {
					dirMenu.showAt(e.getPoint());// 显示目录
				}
			},

			show : function() {
				nav.render("trees"); // 加入div
				nav.getRootNode().toggle();// 根节点触发查询
				//nav.expandAll();   //将所有含有子节点的节点展开
			}
		}
	}();
	
	NavTree.init();// 初始化方法
	NavTree.show();// 显示方法}
});


引用
后台构建json格式:

/**
	 * 将数组转换成json格式
	 */
	private JSONArray listToJson(List list,String p){
		JSONArray jsonArray=new JSONArray();
		
		Iterator iter=list.iterator();
		NodeTree nodes=null;
		while(iter.hasNext()){
			nodes=(NodeTree)iter.next();
			JSONObject obj=new JSONObject();
			if("".equals(p)){
				obj.put("id", nodes.getId()+",1,"+Math.random()*1999999999+Math.random()*134783498);
			}else if("1".equals(p)){
				obj.put("id",nodes.getId()+",2,"+Math.random()*1999679999+Math.random()*134873498);
			}else if("2".equals(p)){
				obj.put("id", nodes.getId()+",3,"+Math.random()*1999999999+Math.random()*1347983498);
			}else if("3".equals(p)){
				obj.put("id", nodes.getId()+",4,"+Math.random()*1999999999+Math.random()*1347783498);
			}
			obj.put("text",nodes.getText());
			obj.put("leaf",0==nodes.getIs_leaf()? false : true);
			
			jsonArray.add(obj);
		}
		return jsonArray;

分享到:
评论

相关推荐

    ext 异步加载树完整版

    "ext 异步加载树完整版" 提到的是EXT JS框架中的一个特性,EXT JS是一个广泛使用的JavaScript库,用于构建富客户端Web应用程序。在这个场景下,"异步加载树"是指树形组件(Tree Panel)不一次性加载所有节点,而是...

    EXT2.0动态树,分页!

    1. **TreePanel**:EXT2.0中的TreePanel是构建动态树的主要组件。它支持动态加载,可以通过配置异步树加载模式,从服务器获取数据。 2. **Store**:存储数据的容器,负责与服务器进行数据交换。对于分页,我们需要...

    ext树 无限级 json 数据格式 动态加载

    在EXT JS这个强大的JavaScript库中,树形组件...总的来说,EXT树的无限级JSON动态加载涉及数据结构、JSON格式、数据存储以及异步加载等多个方面,理解并熟练运用这些技术,能够帮助我们构建更加高效和灵活的树形界面。

    ExtJS3 实现异步下拉树

    ExtJS 是一个流行的JavaScript库,用于构建富客户端应用程序。它提供了丰富的组件库,包括下拉树(Dropdown Tree),这种组件可以结合下拉框和树结构,适用于数据层级关系的展示和选择。在ExtJS 3中,实现异步下拉树...

    ExtJs目录树、异步树demo(内涵各种例子10个以及Ext中文API).rar

    `EXTJS动态树的实现举例+示例代码.rar`和`Y梨Ext动态树的完整示例代码.rar`等文件提供了实际的实现代码,帮助开发者理解如何配置和使用异步加载。 3. **API文档**: `Ext+中文文档-API.rar`和`Ext_Database.rar`...

    Ext动态树中文API

    Ext动态树是基于Ext JS库的一个组件,用于创建交互式的、可...理解并熟练运用Ext动态树的API,可以帮助你构建出交互性强、用户体验优秀的Web应用。记得在开发过程中结合具体需求,灵活运用这些功能,以实现最佳效果。

    Ext动态树的生成,后台是JSP

    在本场景中,我们将探讨如何结合两者来生成动态的树形结构,即Ext动态树。 首先,我们需要理解ExtJS中的树组件(TreePanel)。树组件提供了一种直观的方式来展示层次化的数据,它能够通过异步加载节点来优化性能。...

    Ext.ux.tree.treegrid异步加载

    - 通过循环遍历数据集的每一行,构建符合前端期望格式的JSON字符串。 #### 五、总结 本文详细介绍了如何使用ExtJS中的`Ext.ux.tree.TreeGrid`组件实现异步加载功能,包括前端配置和后端数据处理两个方面。通过这种...

    Extjs4树结构异步加载

    ExtJS4是一款强大的JavaScript框架,用于构建富...通过这样的方式,我们可以构建一个动态、高效的ExtJS4树结构,仅在需要时加载数据,提升用户体验。同时,这种方式也使得开发者能够更好地控制数据流,降低服务器压力。

    ext 动态加载的树源码

    EXT树的动态加载能力是其一大亮点,它允许我们按需加载节点,从而减少初始页面加载时的数据量,提高应用性能。 在EXT树中,动态加载通常是通过使用`TreeLoader`类实现的。这个类负责从服务器获取子节点数据,当用户...

    Ext 两种树形菜单

    7. **异步加载**:对于大数据量的树形菜单,可以采用异步加载策略,只在需要时加载子节点,提高应用性能。 8. **多选与复选**:通过`selModel`配置,你可以实现树形菜单的多选或单选功能,甚至可以添加复选框来支持...

    ext 下拉树 ext2

    标题中的"ext 下拉树 ext2"指的是使用Ext JS库构建的一个特定版本的下拉树组件,其中"ext2"可能表示使用的是Ext JS的2.x版本。Ext JS是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序,它提供了一系列...

    ext利用js生成树

    2. **数据源**: 在ExtJS中,树形数据通常存储为JSON格式,并通过Store组件加载到TreePanel中。每个节点包含子节点的引用,形成层级结构。你可以通过配置store的proxy属性来指定数据的来源,如Ajax代理,用于从服务器...

    ExtJS构造动态异步加载

    本文将深入探讨如何使用ExtJS构建动态异步加载的树形结构,结合AJAX技术实现JSON数据的高效传输。 首先,我们要理解什么是动态异步加载。在传统的网页开发中,如果一次性加载所有数据,可能会导致页面加载速度慢,...

    EXT 分页,树形结构案列

    在这里,我们将深入探讨EXT如何实现服务器端分页以及如何构建树形结构。 一、EXT 分页 EXT分页主要是为了处理大数据集,提高网页加载速度和用户体验。它通过与服务器进行交互,每次只请求和显示一部分数据,而不是...

    Ext 动态树

    在Ext中,"动态树"是指能够根据需求实时生成或更新的树形结构组件。这种组件在数据管理、目录结构展示、层级关系表示等方面非常有用。下面我们将详细探讨Ext动态树的相关知识点。 首先,我们要理解Ext的树...

    解析Xml构建Ext树形菜单

    在本文中,我们将深入探讨如何使用XML来构建EXT框架中的动态树形菜单。EXT是一个流行的JavaScript库,用于创建丰富的用户界面,而XML则是一种结构化的数据格式,常用于存储和交换数据。结合两者,我们可以创建出功能...

    EXT+ASP动态生成树(XML)

    EXT.tree动态树是EXT JS中的一个核心组件,用于显示层次结构的数据。它支持多种功能,如展开/折叠节点、拖放操作、节点选择等。EXT.tree动态树的创建通常涉及以下步骤: 1. 引入EXT库:在HTML文件(如index.html)...

    Y梨Ext动态树的完整示例代码

    在这个名为“Y梨Ext动态树的完整示例代码”的压缩包中,我们很可能会找到一个完整的EXTJS应用,展示了如何动态加载和操作树节点。 树形组件在很多场景下都非常实用,如文件系统导航、组织结构图、菜单系统等。EXTJS...

    ztree+dwr实现的异步加载树形菜单

    结合ZTree和DWR,我们可以实现以下步骤来构建异步加载的树形菜单: 1. **前端设置**:在HTML页面中,我们需要引入ZTree必要的CSS和JS文件,并创建一个空的div元素作为ZTree的容器。同时,设置DWR引擎,配置相应的...

Global site tag (gtag.js) - Google Analytics