[ExtJS2.1教程-7]Tree(树控件)

最新推荐文章于 2016-11-25 15:00:47 发布
最新推荐文章于 2016-11-25 15:00:47 发布
阅读量177 收藏 1
点赞数
分类专栏： ext 文章标签： EXT json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_194/article/details/81681871
版权
[b]树控件：
树是由根节点、叶子节点、非叶子节点（目录节点）组成的，其中根节点只有一个，叶子节点是终端节点。[/b]
ext中节点类型有普通树节点和异步加载节点（用于后台交互）
ext中提供了节点的选择模型：单选（选择一行） 多选（选择多行） 复选（通过复选框选择）
TreePanel用于呈现我们树的面板。TreeNode是树节点，AsyncTreeNode是动态加载树节点（异步树节点）。
既然我们要创建Tree，首先要创建一个根，当然ext中根节点也是节点所以统一用TreeNode进行创建。
TreeNode中text属性表示节点名称，leaf表示节点是否是叶子节点，id节点的唯一标识，href，hreftarget表示连接地址及打开方式，draggable表示拖拽，checked表示在节点前面是否展现复选框，allowChildren，allowDrag是否允许添加子节点，是否允许拖动等等。这里text，id是必须的。
我们创建好根之后，就要创建一个树面板(TreePanel)。
TreePanel中的配置选项包含root属性，根节点。renderto用于渲染的div 

<body>
		<div id="hello"></div>
	</body>


Ext.onReady(function(){
	var root = new Ext.tree.TreeNode({
		id:"root",
		text:"我是根"
	});
	var tree = new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:200
	});
});

[img]/upload/attachment/73629/6d2eef56-e37d-30ea-b07f-69d9387c6413.jpg[/img]
这样一颗简单的树就呈现出来了
好像太简单了 我们就想根节点添加一些节点 

Ext.onReady(function(){
	var root = new Ext.tree.TreeNode({
		id:"root",
		text:"我是根"
	});
	root.appendChild(new Ext.tree.TreeNode({
		id:"c1",
		text:"我是子节点"
	}));
	var tree = new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:200
	});
});

[img]/upload/attachment/73631/d7905b54-125f-38ec-98ac-c9f02ef07078.jpg[/img]
[img]/upload/attachment/73633/08b611c2-1e82-3083-af9e-e80feed98095.jpg[/img]
我们发现树的图标发生了改变，可以清晰的看出是否是叶子节点。
我们也可以通过leaf属性进行指定。但是这里我们即便手动定义了leaf：false也是不起作用的因为他下面没有节点。这一点与树的加载方式有关。
如果下面有子节点我们可以强制定义成true 

Ext.onReady(function(){
	var root = new Ext.tree.TreeNode({
		id:"root",
		text:"我是根"
	});
	root.appendChild(new Ext.tree.TreeNode({
		id:"c1",
		text:"我是子节点",
		leaf:false
	}));
	var c2 = new Ext.tree.TreeNode({
		id:"c2",
		text:"我是子节点2"
	});
	c2.appendChild(new Ext.tree.TreeNode({
		id:"c21",
		text:"我是子节点2的子节点"
	}));
	root.appendChild(c2);
	var tree = new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:200
	});
});

[img]/upload/attachment/73639/43179137-6277-324f-82c4-2bd08423ed80.jpg[/img] 


Ext.onReady(function(){
	var root = new Ext.tree.TreeNode({
		id:"root",
		text:"我是根"
	});
	root.appendChild(new Ext.tree.TreeNode({
		id:"c1",
		text:"我是子节点",
		leaf:false
	}));
	var c2 = new Ext.tree.TreeNode({
		id:"c2",
		text:"我是子节点2",
                leaf:true
	});
	c2.appendChild(new Ext.tree.TreeNode({
		id:"c21",
		text:"我是子节点2的子节点"
	}));
	root.appendChild(c2);
	var tree = new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:200
	});
});

[img]/upload/attachment/73641/4c50d9a0-52cd-3ef9-9351-e4377638a414.jpg[/img]
这里我们需要点击节点前面的+-进行展开收缩，
我们也可以通过直接点击节点区域进行展开或者收缩，这里可以通过TreeNode中的singleClickExpand:boolean 

Ext.onReady(function(){
	var root = new Ext.tree.TreeNode({
		id:"root",
		text:"我是根",
		singleClickExpand:true
	});
	root.appendChild(new Ext.tree.TreeNode({
		id:"c1",
		text:"我是子节点",
		leaf:false
	}));
	var c2 = new Ext.tree.TreeNode({
		id:"c2",
		text:"我是子节点2"
		//leaf:true
	});
	c2.appendChild(new Ext.tree.TreeNode({
		id:"c21",
		text:"我是子节点2的子节点"
	}));
	root.appendChild(c2);
	var tree = new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:200
	});
});

以上内容简单介绍了一下静态树的应用，下面我们来研究一下异步加载树的应用。
这里我们要用AsyncTreeNode对TreeNode进行替换。
这里我们同样需要一个根，不过这里的根节点我们使用了AsyncTreeNode异步加载树节点。
AsyncTreeNode是继承于TreeNode。loader是他自己对于TreeNode的扩展，同样我们可以按TreeNode的方式进行添加 

Ext.onReady(function(){
	var root = new Ext.tree.AsyncTreeNode({
		id:"root",
		text:"异步树的根"
	});
	root.appendChild(new Ext.tree.TreeNode({
		id:"c1",
		text:"我是子节点",
		leaf:false
	}));
	var tree = new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:200
	});
});

不同的是当我们展开根之后，根节点前的图标显示一直在加载的状态
[img]/upload/attachment/73645/955f3c0d-6f40-3cd3-9385-c667bc368ad6.jpg[/img]
这是因为他是一个异步的节点，所以一定要有一个加载器进行数据加载来完成他的功能。
这里就用到AsyncTreeNode独有的属性loader:TreeLoader。
我们要指定一个TreeLoader来完成异步加载的数据。
Ext.tree.TreeLoader中的配置选项包括url，dataurl
实际上只需返回一个json字符串就可以了。 

[{
	id:"c1",
	text:"子节点"
},{
	id:"c2",
	text:"子节点2"
}]

Ext.onReady(function(){
	var root = new Ext.tree.AsyncTreeNode({
		id:"root",
		text:"异步树的根",
		loader:new Ext.tree.TreeLoader({
			url:"treedata.js"
		})
	});
	root.appendChild(new Ext.tree.TreeNode({
		id:"c1",
		text:"我是子节点",
		leaf:false
	}));
	var tree = new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:200
	});
});

这里的url是现对于引用界面的相对路径
[img]/upload/attachment/73648/191fb422-95e0-3c88-8ca3-17e3eab7af99.jpg[/img]
我们可以看到当使用loader之后原 

root.appendChild(new Ext.tree.TreeNode({
		id:"c1",
		text:"我是子节点",
		leaf:false
	}));
将不起作用。
这里我们发现树竟然展不完，竟然是一个无限循环。

由于我们的json数据中没有指定他是叶子节点，所以当再次点击的时候他又会重新加载，并将数据挂在当前节点下面。
根本原因在于我们将loader放置在root下面，等同于将它放置在treePanel下面 

Ext.onReady(function(){
	var root = new Ext.tree.AsyncTreeNode({
		id:"root",
		text:"异步树的根"
	});
	root.appendChild(new Ext.tree.TreeNode({
		id:"c1",
		text:"我是子节点",
		leaf:false
	}));
	var tree = new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:200,
		loader:new Ext.tree.TreeLoader({
			url:"treedata.js"
		})
	});
});


[{
	id:"c1",
	text:"子节点",
	leaf:true
},{
	id:"c2",
	text:"子节点2"
}]

实际上loader的放置位置与实际的呈现效果会有一些区别。
这里我们间静态树节点和异步节点结合起来看看 

Ext.onReady(function(){
	var root = new Ext.tree.TreeNode({
		id:"root",
		text:"异步树的根"
	});
	root.appendChild(new Ext.tree.TreeNode({
		id:"c1",
		text:"我是子节点",
		leaf:false
	}));
	var c2 = new Ext.tree.AsyncTreeNode({
		id:"c2",
		text:"我是子节点2",
		loader:new Ext.tree.TreeLoader({
			url:"treedata.js"
		})
	});
	root.appendChild(c2);
	var tree = new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:200

	});
});


[{
	id:"c1",
	text:"子节点21",
	leaf:true
},{
	id:"c2",
	text:"子节点22"
}]

[img]/upload/attachment/73661/8963bc53-6e70-3508-8969-5866768ec601.jpg[/img]
我们将root换成静态节点，这样就不存在root展开时的加载问题

总结：我们在使用AsyncTree的时候需要引入加载器，加载器中的返回的数据是json类型的字符串

节点选择模型
我们首先看一下我们的简单树 

Ext.onReady(function(){

	var root = new Ext.tree.TreeNode({
		id:"root",
		text:"我是根"
	});

	root.appendChild(new Ext.tree.TreeNode({
		id:"c1",
		text:"我是节点1"
	}));

	root.appendChild(new Ext.tree.TreeNode({
		id:"c2",
		text:"我是节点2"
	}));
	root.appendChild(new Ext.tree.TreeNode({
		id:"c3",
		text:"我是节点3"
	}));
	root.appendChild(new Ext.tree.TreeNode({
		id:"c4",
		text:"我是节点4"
	}));
	root.appendChild(new Ext.tree.TreeNode({
		id:"c5",
		text:"我是节点5"
	}));	
	var tree = new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:300
	});
});

[img]/upload/attachment/74282/fdff0130-f0be-3fd1-9388-8b27ab40bb6b.jpg[/img]
该树不能选择多行（无论是使用shift ctrl都不可以）
在树的选择模型上存在DefaultSelectionModel和MultiSelectionModel两个模型选择器。
TreePanel可以通过getSelectionModel可以获得选择模型。默认使用DefaultSelect
不过可以通过配置选项的selModel来设置选择模型
我们通过一个例子看一下选择模型的使用 


Ext.onReady(function(){

	var root = new Ext.tree.TreeNode({
		id:"root",
		text:"我是根"
	});

	root.appendChild(new Ext.tree.TreeNode({
		id:"c1",
		text:"我是节点1"
	}));

	root.appendChild(new Ext.tree.TreeNode({
		id:"c2",
		text:"我是节点2"
	}));
	root.appendChild(new Ext.tree.TreeNode({
		id:"c3",
		text:"我是节点3"
	}));
	root.appendChild(new Ext.tree.TreeNode({
		id:"c4",
		text:"我是节点4"
	}));
	root.appendChild(new Ext.tree.TreeNode({
		id:"c5",
		text:"我是节点5"
	}));	
	var tree = new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:300,
		tbar:[{
			text:"查看",
			pressed:true,
			handler:showSelected
		}]
	});
	function showSelected(){
		var node = tree.getSelectionModel().getSelectedNode();
		if(node){
			alert(node.text);
		}
	}
});

他将alert出我们所选节点的text属性
[img]/upload/attachment/74286/5dce0bd4-304a-3151-8a6d-4fc53e7ee9e9.jpg[/img]

我们来看一看如何使用多选的模型选择器 


Ext.onReady(function(){

	var root = new Ext.tree.TreeNode({
		id:"root",
		text:"我是多选根"
	});

	root.appendChild(new Ext.tree.TreeNode({
		id:"c1",
		text:"我是节点1"
	}));

	root.appendChild(new Ext.tree.TreeNode({
		id:"c2",
		text:"我是节点2"
	}));
	root.appendChild(new Ext.tree.TreeNode({
		id:"c3",
		text:"我是节点3"
	}));
	root.appendChild(new Ext.tree.TreeNode({
		id:"c4",
		text:"我是节点4"
	}));
	root.appendChild(new Ext.tree.TreeNode({
		id:"c5",
		text:"我是节点5"
	}));	
	var tree = new Ext.tree.TreePanel({
		renderTo:"hello",
		title:"多选树模型",
		root:root,
		width:300,
		selModel:new Ext.tree.MultiSelectionModel(),
		tbar:[{
			text:"查看",
			pressed:true,
			handler:showSelected
		}]
	});
	function showSelected(){
		var nodes = tree.getSelectionModel().getSelectedNodes();
		if(nodes && nodes.length){
			alert("选择："+nodes.length+"个");
		}
	}
});

这里我们可以通过ctrl进行多行选中
[img]/upload/attachment/74318/af8708f2-cf27-3ca4-b137-9f46744a71cd.jpg[/img]
我们可以通过TreeNode的checked配置选项设置复选，并且可以通过TreePanel的getChecked()方法得到被选中节点的数组。 


Ext.onReady(function(){

	var root = new Ext.tree.TreeNode({
		id:"root",
		text:"我是复选根",
		checked:false
	});

	root.appendChild(new Ext.tree.TreeNode({
		id:"c1",
		text:"我是节点1",
		checked:true
	}));

	root.appendChild(new Ext.tree.TreeNode({
		id:"c2",
		text:"我是节点2",
		checked:true
	}));
	root.appendChild(new Ext.tree.TreeNode({
		id:"c3",
		text:"我是节点3",
		checked:true
	}));
	root.appendChild(new Ext.tree.TreeNode({
		id:"c4",
		text:"我是节点4",
		checked:true
	}));
	root.appendChild(new Ext.tree.TreeNode({
		id:"c5",
		text:"我是节点5",
		checked:false
	}));	
	var tree = new Ext.tree.TreePanel({
		renderTo:"hello",
		title:"复选树模型",
		root:root,
		width:300,
		tbar:[{
			text:"查看",
			pressed:true,
			handler:showSelected
		}]
	});
	function showSelected(){
		var nodes = tree.getChecked();
		if(nodes && nodes.length){
			alert("选择："+nodes.length+"个");
		}
	}
});

[img]/upload/attachment/74334/18964215-a21a-36b2-bb21-29dc83735d69.jpg[/img]
iteye_194
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJS的使用方法汇总(3)——树形结构
薛敬明的专栏
09-14 1万+
在应用程序中，我们经常需要显示或处理树状结构的对象信息，比如部门信息和地区信息，树是一种非常典型的数据结构，这些信息都可以用树来表示。对于传统的HTML页面来说，完全依靠手动编码来实现树是比较困难的，因为需要写很多的JS代码，对基于AJAX异步加载来说尤其如此，不但涉及AJAX数据异步加载，还需要考虑跨浏览器支持，处理起来非常麻烦，EXT中提供了现成的树控件，通过这些控件，可以在B/S应用中快速开
EXTJS4.0视频教程 30集 下载地址
07-12
- **树（Tree）**：显示层次结构的数据。 **2.3 数据管理** - **Store**：用于存储数据，可以绑定到视图组件上。 - **Model**：定义数据结构，包括字段名、类型等信息。 - **Proxy**：负责数据的读取和写入操作，...
ExtJs Tree
02-13
ExtJs Tree
ExtJS 树事件
diandu2747的专栏
01-16 81
treePanel.on({ //目录树单击事件 'itemclick' : function(view, rcd, item, idx, event, eOpts) { var dirid = rcd.get('id'); //节点id var dirtype = rcd.raw.d...
Extjs-树 Ext.tree.TreePanel
热门推荐
itlwc
08-16 5万+
1.简单的树 效果图 代码 Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif'; var tree = new Ext.tree.TreePanel({ region: 'center', //True表示为面板是可收缩的，并自动渲染一个展开/收缩的
extjs tree
jamm1986的专栏
05-15 101
最近在学习ExtJS，发现其服务器端是php，这一点对我们搞java的有点不厚道啊。昨天学习了ExtJS的树，并做了一棵异步更新的树出来，后台的业务逻辑及持久层使用JPA+Spring2.5实现，发下面把步骤贴出来与大家分享。 　　 首先准备树的域模型，下面是一地区的域模型对象， Region.java 的代码如下： @Entity public class ...
ExtJS6学习资料
03-21
- **组件多样性**：ExtJS 提供了大量的 UI 组件，包括但不限于数据网格（datagrid）、选项卡面板（tab panels）、树状控件（tree controls）、日期选择器等。 - **应用场景**：这些组件特别适用于构建复杂的数据展示...
extjs-ajax
06-22
- **复杂组件**: 包括表格（Grid）、树形视图（Tree）、表单元素（Form Elements）等。 - **布局管理**: 提供多种布局方式（如 FitLayout、BorderLayout 等），帮助开发者灵活地组织界面元素。 ##### 2.3 控件使用...
ExtJS.Tree
03-19 1203
public class Tree { private Integer id; private String text; private boolean expanded = false; private String description; private boolean left = false; private Integer parentId; pub
Extjs的tree
05-09
Extjs的tree Extjs的tree Extjs的tree Extjs的tree Extjs的tree
Extjs树(tree)控件
08-28
详细说明了extjs中的树控件,正确无误的说明extjs树控件的强大之处
extjs ajax tree（js动态树,无需递归）
05-26
NULL 博文链接：https://esayjava.iteye.com/blog/499176
Extjs下拉多选树
07-22
Extjs 下拉树 下拉多选树 支持多选 全选/全不选 下拉多选框
Extjs Tree + JSON + Struts2 示例源代码
10-14
Extjs Tree + JSON + Struts2 示例源代码
extjs tree 树
Java小白的博客
11-25 2337
extjs 从数据库获取数据，生成一颗树
extjs---树
05-17 939
今天讲的是extjs中的树形结构，下面写一个简单的小例子，来熟悉一下extjs树形的一些属性等 首先创建一个js文件 tree.js (function(){ Ext.onReady(function(){ /* * tree概念 * treePanel组件的基本应用 */ var tree=Ext.create('Ext.tree.Panel',{ title:
extjs - 树
chanball的专栏
03-12 120
[b][/b]重新load单一树节点(node) [code="js"] tree.loader.load(node); [/code] [b][/b]刷新整棵树 [code="js"] tree.root.reload(); [/code] [b][/b]修改ext tree树的节点请求地址 [code="js"] 用treepanel.loader.dataUrl...
ext 树节点的一些常用操作
jcy472578的专栏
12-05 1127
1、全部展开 tree.expandAll(); 2、全部收缩 tree.collapseAll(); 3、得到父节点 node.parentNode 4、判断是否有父节点 node.parentNode==null 5、判断是否有子节点 node.hasChildNodes() 6、获取下一级所有子节点 node.eachChild(function(child) { }) 7、获取
ExtJs 2.1 学习笔记概览
1. ExtJs结构树：这部分内容可能讲解了ExtJs的基本组织结构，包括其组件层次、类库的模块化设计以及如何理解并利用这些结构进行应用开发。 2. 对ExtJs的态度：作者指出ExtJs虽然功能强大，但也存在一些问题，如加载...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值