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 JS框架中的一个特性,EXT JS是一个广泛使用的JavaScript库,用于构建富客户端Web应用程序。在这个场景下,"异步加载树"是指树形组件(Tree Panel)不一次性加载所有节点,而是...
1. **TreePanel**:EXT2.0中的TreePanel是构建动态树的主要组件。它支持动态加载,可以通过配置异步树加载模式,从服务器获取数据。 2. **Store**:存储数据的容器,负责与服务器进行数据交换。对于分页,我们需要...
在EXT JS这个强大的JavaScript库中,树形组件...总的来说,EXT树的无限级JSON动态加载涉及数据结构、JSON格式、数据存储以及异步加载等多个方面,理解并熟练运用这些技术,能够帮助我们构建更加高效和灵活的树形界面。
ExtJS 是一个流行的JavaScript库,用于构建富客户端应用程序。它提供了丰富的组件库,包括下拉树(Dropdown Tree),这种组件可以结合下拉框和树结构,适用于数据层级关系的展示和选择。在ExtJS 3中,实现异步下拉树...
`EXTJS动态树的实现举例+示例代码.rar`和`Y梨Ext动态树的完整示例代码.rar`等文件提供了实际的实现代码,帮助开发者理解如何配置和使用异步加载。 3. **API文档**: `Ext+中文文档-API.rar`和`Ext_Database.rar`...
Ext动态树是基于Ext JS库的一个组件,用于创建交互式的、可...理解并熟练运用Ext动态树的API,可以帮助你构建出交互性强、用户体验优秀的Web应用。记得在开发过程中结合具体需求,灵活运用这些功能,以实现最佳效果。
在本场景中,我们将探讨如何结合两者来生成动态的树形结构,即Ext动态树。 首先,我们需要理解ExtJS中的树组件(TreePanel)。树组件提供了一种直观的方式来展示层次化的数据,它能够通过异步加载节点来优化性能。...
- 通过循环遍历数据集的每一行,构建符合前端期望格式的JSON字符串。 #### 五、总结 本文详细介绍了如何使用ExtJS中的`Ext.ux.tree.TreeGrid`组件实现异步加载功能,包括前端配置和后端数据处理两个方面。通过这种...
ExtJS4是一款强大的JavaScript框架,用于构建富...通过这样的方式,我们可以构建一个动态、高效的ExtJS4树结构,仅在需要时加载数据,提升用户体验。同时,这种方式也使得开发者能够更好地控制数据流,降低服务器压力。
EXT树的动态加载能力是其一大亮点,它允许我们按需加载节点,从而减少初始页面加载时的数据量,提高应用性能。 在EXT树中,动态加载通常是通过使用`TreeLoader`类实现的。这个类负责从服务器获取子节点数据,当用户...
7. **异步加载**:对于大数据量的树形菜单,可以采用异步加载策略,只在需要时加载子节点,提高应用性能。 8. **多选与复选**:通过`selModel`配置,你可以实现树形菜单的多选或单选功能,甚至可以添加复选框来支持...
标题中的"ext 下拉树 ext2"指的是使用Ext JS库构建的一个特定版本的下拉树组件,其中"ext2"可能表示使用的是Ext JS的2.x版本。Ext JS是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序,它提供了一系列...
2. **数据源**: 在ExtJS中,树形数据通常存储为JSON格式,并通过Store组件加载到TreePanel中。每个节点包含子节点的引用,形成层级结构。你可以通过配置store的proxy属性来指定数据的来源,如Ajax代理,用于从服务器...
本文将深入探讨如何使用ExtJS构建动态异步加载的树形结构,结合AJAX技术实现JSON数据的高效传输。 首先,我们要理解什么是动态异步加载。在传统的网页开发中,如果一次性加载所有数据,可能会导致页面加载速度慢,...
在这里,我们将深入探讨EXT如何实现服务器端分页以及如何构建树形结构。 一、EXT 分页 EXT分页主要是为了处理大数据集,提高网页加载速度和用户体验。它通过与服务器进行交互,每次只请求和显示一部分数据,而不是...
在Ext中,"动态树"是指能够根据需求实时生成或更新的树形结构组件。这种组件在数据管理、目录结构展示、层级关系表示等方面非常有用。下面我们将详细探讨Ext动态树的相关知识点。 首先,我们要理解Ext的树...
在本文中,我们将深入探讨如何使用XML来构建EXT框架中的动态树形菜单。EXT是一个流行的JavaScript库,用于创建丰富的用户界面,而XML则是一种结构化的数据格式,常用于存储和交换数据。结合两者,我们可以创建出功能...
EXT.tree动态树是EXT JS中的一个核心组件,用于显示层次结构的数据。它支持多种功能,如展开/折叠节点、拖放操作、节点选择等。EXT.tree动态树的创建通常涉及以下步骤: 1. 引入EXT库:在HTML文件(如index.html)...
在这个名为“Y梨Ext动态树的完整示例代码”的压缩包中,我们很可能会找到一个完整的EXTJS应用,展示了如何动态加载和操作树节点。 树形组件在很多场景下都非常实用,如文件系统导航、组织结构图、菜单系统等。EXTJS...
结合ZTree和DWR,我们可以实现以下步骤来构建异步加载的树形菜单: 1. **前端设置**:在HTML页面中,我们需要引入ZTree必要的CSS和JS文件,并创建一个空的div元素作为ZTree的容器。同时,设置DWR引擎,配置相应的...