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

Ext4.2 treepanel 获取当前节点node,展开节点node,选择节点node,刷新树

阅读更多

 

treepanel 当前节点,以下3种方法都可以

currentNode = record;   
currentNode = this.getSelectionModel().getLastSelected();  
currentNode = treOrganization.getStore().getNodeById(record.data.id);

 

	var currentNodeId = 1; 	//组织树当前节点id;
	var parentNodeId = 0;	//组织树父节点id;	0	

	//组织树store
	var treeStoreOrganization = Ext.create('Ext.data.TreeStore', {
		nodeParam: 'parentId',	//默认的是把id作为node传到后台
		autoLoad: true, 		//此属性为false时,root的expanded也得为false
		proxy: {
            type: 'ajax',
            url: 'getListByParentId.json',
            extraParams  : {                         
            	expandedLevels : 1 //预先在后台展开几级,暂时没用
			},
            reader: {
				type: 'json',
        		root: 'extTreeVoList' //josn中的根节点
         	}
        },
	    root: {
	    	text: '根节点',
            id: 0,
	        expanded: true,	//为true就会自动加载
	    }
//	        ,
//		    sorters: [{
//	            property: 'text',
//	            direction: 'ASC'
//	        }]
	});

	treeStoreOrganization.on('load',function(store,records,success,options) {
		if(records.data.id == 0){	//records看似像加载来的子节点,但他是父节点
			parentNodeId = 0;
			if(treOrganization.getRootNode().childNodes.length>0){
				var node = treOrganization.getRootNode().childNodes[0];	//根下的第一个节点
				treOrganization.getSelectionModel().select(node);
				currentNodeId = node.data['id'];
				node.expand();
				//idPath = node.getPath("id"); // /0/1
				//node.getPath('text')
			}
		}
	});
	
	//组织树
	var treOrganization = Ext.create('Ext.tree.Panel', {
		id: 'treOrganization',
		//title: '组织机构管理',
		//region:'west',
        store: treeStoreOrganization,
        rootVisible:false,	                
        useArrows: false,
        border: false,
        listeners : {
            'itemclick' : function(view,record,item,index,e,eOpts){  
            	currentNodeId = record.data.id;
            	parentNodeId = record.parentNode.data.id;
            	//currentNodePath = record.getPath();

//        		currentNode = record; 
//            	currentNode = this.getSelectionModel().getLastSelected();
//            	currentNode = treOrganization.getStore().getNodeById(record.data.id);
            	
            	getPageList();
                if(record.data.leaf){
                    //alert(record.data.id);
                	//alert(record.data.text);
                    //alert(record.raw.url); //不扩展也能从raw取
                }else{  
//                    if(record.data.expanded){  
//                        view.collapse(record);  
//                    }else{  
//                        view.expand(record);  
//                    }  
                }  
            }  
        }  
    });

 

对树进行增删改后,刷新树

/**
 * 刷新树 刷新父节点,展开或不展开当前节点,选中当前节点
 * @param treePanel	
 * @param refreshRoot	是否刷新root
 * @param currentNodeId	当前节点id
 * @param parentNodeId	父节点id
 */
function refreshNode(treePanel, refreshRoot, currentNodeId, parentNodeId){
	var currentNode = treePanel.getStore().getNodeById(currentNodeId); //当前节点删除了就不存在了
	var parentNode = treePanel.getStore().getNodeById(parentNodeId);
	var rootNode = treePanel.getStore().getRootNode();
	
	var path;
	if(currentNode){
		path = currentNode.getPath('id'); //currentNode.getPath('text')
	} else if(parentNode){
		path = parentNode.getPath('id');
	} else {
		path = rootNode.getPath('id');
	}
	
	var loadNode;
	if(refreshRoot){
		loadNode = rootNode;
	} else {
		loadNode = parentNode;
	}
	//刷新节点,展开节点,选中节点
	treePanel.getStore().load({
			node: loadNode, 
			callback:function(){
				if(currentNode && currentNode.data.expanded){
					//之前展开的还是展开
					treePanel.expandPath(path);
				}
				treePanel.selectPath(path);
			}
		});
}

 

分享到:
评论

相关推荐

    在VS下利用Ext4.2的TreePanel的简单demo

    在Ext4.2中,TreePanel提供了丰富的配置选项和事件处理,可以定制各种复杂的树形界面。 要构建这个简单的demo,我们需要以下几个步骤: 1. **设置环境**:确保已安装了Visual Studio和ExtJS库。在VS项目中引入...

    Ext.net TreePanel的Checkbox操作及父子节点联动(修正)

    总结起来,EXT.NET TreePanel的Checkbox操作和父子节点联动是构建具有交互性树形结构的关键部分。通过正确的配置和事件处理,我们可以实现高效且用户友好的多选功能,而修正之前的Bug则确保了用户体验的一致性和正确...

    获取Extjs中的TreePanel中所有的被checked的叶子节点的id

    在本篇文章中,我们将深入探讨如何在ExtJS框架中获取TreePanel中所有被选中(checked)的叶子节点的ID。此技术对于处理复杂的数据结构、优化用户交互体验以及实现高效的数据管理至关重要。 ### 一、ExtJS简介 ...

    Ext TreePanel

    TreePanel提供了一种交互式的树形视图,用户可以通过展开、折叠节点来查看和操作数据。 在Ext JS中,TreePanel是基于Ext.grid.Panel扩展的,它包含了树形数据的渲染和操作功能。TreePanel可以与Ext.data.TreeStore...

    Ext 异步加载添加 删除节点 修改combobox选择项

    本篇文章主要探讨了如何在异步加载的场景下,实现树形控件(TreePanel)中节点的动态添加、删除以及ComboBox选择项的修改。 首先,让我们详细了解一下动态添加节点的过程。在Ext中,树形控件的节点可以通过...

    ext生成树节点带链接

    ### 关于ExtJS生成树节点并添加链接的知识点 #### 1. ExtJS与树形菜单简介 在Web开发领域,ExtJS是一个非常强大的JavaScript框架,它提供了丰富的UI组件库,帮助开发者快速构建复杂的前端应用。其中,树形菜单...

    ExtTreePanel新增节点

    `TreePanel`提供了丰富的功能,如拖放操作、节点展开/折叠、节点选择等。 2. **添加节点的原理** 要向`ExtTreePanel`添加新节点,首先需要创建一个新的`Ext.data.Model`实例,然后通过`TreeStore`的`insertNode`或...

    Extjs 加载数据库 生成tree

    通过java 访问数据库而生成节点 子节点的 ID 与 父节点的关系为“父节点id_子节点id”此id为数据库中的id 同理“父节点id_子节点id_子子节点id”,因此加载树时将node.id做为参数 通过split("_"),根据数据的长度就...

    extjs TreePanel

    - **selModel**: 树的选择模型,决定了用户如何选择树中的节点,默认是`Ext.tree.DefaultSelectionModel`。 - **pathSeparator**: 分隔树节点路径的字符,默认是`"/"`。 - **singleExpand**: 如果设置为`true`,...

    ext 关于树目录开发使用

    ### 关于 Ext.js 中树目录开发使用的关键知识点 在现代 Web 开发中,Ext.js 是一个非常流行的 JavaScript 框架,它提供了丰富的 UI 组件和功能强大的数据处理能力。本文将详细介绍 Ext.js 中关于树目录开发使用的...

    根据输入的关键字过滤ext树节点

    首先,理解“树节点过滤”(Tree Node Filtering)的概念。在ExtJS的树视图中,过滤功能允许用户通过输入关键字快速查找并高亮显示与之匹配的节点,这极大地提高了用户的交互体验。当用户在搜索框中输入字符时,系统...

    Ext_Tree属性方法

    `Ext.data.Node`是Ext框架中的节点类,用于构建树形数据结构中的各个节点。 - **id**:节点的唯一标识。 - **leaf**:表示当前节点是否为叶子节点。 - **attributes**:节点的自定义属性集合。 - **parentNode**:...

    ExtJS4.2 tree 级联选择

    在ExtJS库中,Tree组件允许我们展示和操作数据以树形结构显示,而级联选择功能则意味着当用户选择一个节点时,它的所有子节点也会被自动选中,反之亦然,如果取消选中父节点,其所有子节点也将被取消选中。...

    父节点选中自动选中其相应的子节点(转别人的)

    根据提供的标题、描述、标签及部分内容,我们可以了解到这篇文章主要探讨的是如何在树形结构(Tree)控件中实现“父节点选中时自动选中其所有子节点”的功能,并且遇到了`node.attributes is undefined`的问题。...

    Ext树例子

    树的每个节点通常由`Ext.tree.Node`对象表示,包含了节点的数据、子节点以及相关的操作方法。 创建一个基本的Ext树需要以下几个步骤: 1. 定义树的数据源:这通常是JSON格式的数据,包含节点的ID、文本、子节点等...

    EXT实现动态树的功能

    总的来说,EXT实现动态树功能涉及到EXT TreePanel的使用、数据存储的配置、节点操作的实现以及用户交互的处理。通过深入理解和实践这些知识点,你可以创建出功能强大的动态树形视图,满足复杂的数据管理和展示需求。

    磁盘目录树(EXT-js)

    2. **使用NodeInterface**:EXT-js的TreeNode实现了NodeInterface接口,使得每个节点都可以拥有父节点、子节点等属性,方便进行树形结构的操作和遍历。 3. **异步加载**:为了提高性能,通常会使用异步加载技术,只...

    ext2.0 树的增删改操作

    - **增加**:在树中增加新节点通常通过`treePanel.getRootNode().appendChild(node)`或者`treePanel.insertNode(position, node)`实现,其中`node`是包含新节点信息的对象,`position`表示插入的位置。 - **删除**...

    学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)

    ### 学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点) #### 引言 在本篇文章中,我们将深入探讨如何使用YUI.Ext库中的TreePanel组件来实现异步获取树节点的功能。不同于同步加载方式,异步加载能够显著...

    ext利用js生成树

    TreePanel提供了丰富的功能,包括拖放、展开/折叠节点、节点选择以及自定义节点图标和样式。 2. **数据源**: 在ExtJS中,树形数据通常存储为JSON格式,并通过Store组件加载到TreePanel中。每个节点包含子节点的引用...

Global site tag (gtag.js) - Google Analytics