Extjs4----tree

最新推荐文章于 2017-03-01 15:53:28 发布

小姐你喜不喜欢吃青椒

最新推荐文章于 2017-03-01 15:53:28 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： extjs4 Java Web 文章标签： extjs tree function flex 数据库

本文链接：https://blog.youkuaiyun.com/lc448986375/article/details/7957387

extjs4 同时被 2 个专栏收录

41 篇文章

订阅专栏

Java Web

25 篇文章

订阅专栏

本文介绍了如何使用ExtJS框架创建树形面板，并通过两个示例详细展示了基本配置及多列树面板的具体实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只是在页面中演示tree的使用，写死在页面中，未从数据库中调用数据

<script type="text/javascript">
			Ext.onReady(function() {
				var tree = Ext.create('Ext.tree.Panel', {
					title : '树面板简单示例',//标题
					width : 200,
					height : 500,
					rootVisible: true,//是否显示root
					renderTo : Ext.getBody(),
					root : 
						{
							text : '树根',//节点名称
							expanded : true,//默认展开根节点
							//创建子节点
							children : 
							[
								//第一个子节点
								{
									text : '节点1',//节点名称
									leaf : false,//说明不是叶子节点，可以加子节点
									children : 
									{
										text : '节点1',//节点名称
										leaf : true,//说明为叶子节点，后面不再有子节点
									}
								},
								//第二个子节点
								{
									text : '节点2',//节点名称
									leaf : true,//说明为叶子节点
								}
							]
						}
				});
			});
		</script>

效果图

多列树

<script type="text/javascript">
			Ext.onReady(function() {
				var tree = Ext.create('Ext.tree.Panel', {
					title : '树面板简单示例',//标题
					width : 300,
					height : 500,
					rootVisible: true,//是否显示root
					fields : ['text','description'],
					columns : 
						[
							{
								xtype: 'treecolumn',//树状表格列   
        						text: '名称',   
						        dataIndex: 'text',   //设置显示的名称
						        width: 150,   
						        sortable: true 
							},
							{
								text: '描述',   
						        dataIndex: 'description',   
						        flex: 1,   
						        sortable: true  
							}
						],
					renderTo : Ext.getBody(),
					root : 
						{
							text : '树根',//节点名称
							description : '根目录',
							expanded : true,//默认展开根节点
							//创建子节点
							children : 
							[
								//第一个子节点
								{
									text : '节点1',//节点名称
									description : '第一个节点',
									leaf : false,//说明不是叶子节点，可以加子节点
									children : 
									{
										text : '节点1的节点',//节点名称
										description : '第一个节点的节点',
										leaf : true,//说明为叶子节点，后面不再有子节点
									}
								},
								//第二个子节点
								{
									text : '节点2',//节点名称
									description : '第二个节点',
									leaf : true,//说明为叶子节点
								}
							]
						}
				});
			});
		</script>

效果图