`
yangchunzhi
  • 浏览: 23891 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

tree

阅读更多
Ext.onReady(function (){
  		var treeNode = new Ext.tree.TreeNode({
  			id:'root',
  			text:'<font color=blue >春峰科技</font>', 
  			leaf:false
  		});
  		// ===================student ^============================
  		var student = new Ext.tree.TreeNode({
  			id:'student',
  			text:'<font color=green >student</font>',//文字信息
  			//draggable:true,//允许拖动
  			leaf:false
  		});
  		
  		var queryStudent = new Ext.tree.TreeNode({
  			id:'queryStudent',
  			text:'show student info',
  			leaf:true
  		});
  		
  		var deleteStudent = new Ext.tree.TreeNode({
  			id:'deleteStudent',
  			text:'delete student info',
  			leaf:true
  		});
  		
  		var updateStudent = new Ext.tree.TreeNode({
  			id:'updateStudent',
  			text:'update student info',
  			leaf:true
  		});
  		
  		var addStudent = new Ext.tree.TreeNode({
  			id:'addStudent',
  			text:'add student info',
  			leaf:true
  		});
  		
  		student.appendChild(addStudent);
  		student.appendChild(deleteStudent);
  		student.appendChild(updateStudent);
  		student.appendChild(queryStudent);
  		// ===================students $============================
  		
  		// ===================users ^============================
  		var users = new Ext.tree.TreeNode({
  			id:'users',
  			text:'<font color=green >users</font>',
  			leaf:false
  		});
  		
  		var queryUsers = new Ext.tree.TreeNode({
  			id:'queryUsers',
  			text:'show users info',
  			leaf:true
  		});
  		
  		var deleteUsers = new Ext.tree.TreeNode({
  			id:'deleteUsers',
  			text:'delete users info',
  			leaf:true
  		});
  		
  		var updateUsers = new Ext.tree.TreeNode({
  			id:'updateUsers',
  			text:'update users info',
  			leaf:true
  		});
  		
  		var addUsers = new Ext.tree.TreeNode({
  			id:'addUsers',
  			text:'add users info',
  			leaf:true
  		});
  		
  		users.appendChild(addUsers);
  		users.appendChild(deleteUsers);
  		users.appendChild(updateUsers);
  		users.appendChild(queryUsers);
  		// ===================users $============================
  		
  		// ===================classes ^============================
  		var classes = new Ext.tree.TreeNode({
  			id:'classes',
  			text:'<font color=green >classes</font>',
  			leaf:false
  		});
  		
  		var queryClasses = new Ext.tree.TreeNode({
  			id:'queryClasses',
  			text:'show classes info',
  			leaf:true
  		});
  		
  		var deleteClasses = new Ext.tree.TreeNode({
  			id:'deleteClasses',
  			text:'delete classes info',
  			leaf:true
  		});
  		
  		var updateClasses = new Ext.tree.TreeNode({
  			id:'updateClasses',
  			text:'update classes info',
  			leaf:true
  		});
  		
  		var addClasses = new Ext.tree.TreeNode({
  			id:'addClasses',
  			text:'add classes info',
  			leaf:true
  		});
  		
  		classes.appendChild(addClasses);
  		classes.appendChild(deleteClasses);
  		classes.appendChild(updateClasses);
  		classes.appendChild(queryClasses);
  		// ===================classes $============================

  		treeNode.appendChild(users);
  		treeNode.appendChild(student);
  		treeNode.appendChild(classes);

  		var _west = {
			region:'west',
			id:'west',
			title:'west_tree',
			width:210,
			frame:true,
			draggable:true,//激活拖动
			collapsible:true,
			xtype: 'treepanel',
			bodyStyle:'background:url("tree/images/background.gif");bgcolor:green',
			root:treeNode,
  			listeners:{
  				click:function(_obj){
  					var _node = _obj.attributes;
  					var url = '';
  					if(_node.leaf){
  						if((_node.id).indexOf('Users') != -1){//这个要判断是users的增删查改还是其他的所以要判断下
  							url='users/'+_node.id;//拿到id当作要跳转的URL
  						} else if ((_node.id).indexOf('Student') != -1){
  							url='student/'+_node.id;
  						} else {
  							url='classes/'+_node.id;
  						}
  						var page = _center.add({
	                		id:_node.id,
	                		title:_node.text,
	                		closable:true,//可以关闭的属性
	                		autoScroll: true,
	                		html:'<iframe src=tree/'+url+'.jsp frameboder="2" height="501" width="1200" id="onlyone"></iframe>'
	                	});
	                	_center.setActiveTab(page);
  					}
  				}
  			}
			 /*new Ext.tree.AsyncTreeNode({//这也是一种实现树的方式
	           expanded: false,//设置文件夹是否打开
	           text:'春峰科技',
	           children: [{
	           	id:'users',
	               text: 'users',
	               leaf: false
	           },{
	           	id:'student',
	               text: 'student',
	               leaf: false
	           },{
	           	id:'classes',
	               text: 'classes',
	               leaf: false
	           },{
	           	id:'grade',
	               text: 'grade',
	               leaf: false
	           }]
    		})*/
  		}
  		
  		var _north = {
  			region:'north',
			title:'春峰科技_如果世界末日到了,你会怎么样呢?',
			height:200,
			frame:true,
			draggable:true,//激活拖动
			//hideCollapseTool:true, //不显示收缩的那个按钮
			titleCollapse:true,//表示在头部区域任何位置都可以收缩面板
			collapsible:true,
			html:'<iframe src=tree/border_top.jsp width=100% height=210></iframe>'
  		}
  		
  		var _center = new Ext.TabPanel({
  			region:'center',
  			title:'center',
  			frame:true,
  			xtype:'tabpanel',
  			draggable:true,//激活拖动
  			autoScroll:false,//显示滚动条
  			overflow:'auto',
  			//activeTAb:0,
 			items:[{title:"首页",closable:false,html:'<iframe src=tree/first_page.jsp width=100% height=500 frameborder=NO border=0></iframe>'}],
  			collapsible:true
 		})
  	
  		var viewport = new Ext.Viewport({
  			layout:'border',
  			items:[_north,_west,_center]
  		});
  	});
分享到:
评论

相关推荐

    jsTree中文文档

    **jsTree 中文文档概述** jsTree 是一个流行的JavaScript库,用于在网页上创建交互式的树状视图。它主要用于组织结构化的数据,如文件系统、数据库目录或自定义项目结构。jsTree 支持多种操作,包括点击、拖放、...

    tree(c++ tree容器)

    标题提到的"tree(c++ tree容器)"是一个第三方实现,旨在为C++开发者提供一个类似于STL接口的树容器,方便用户在项目中构建和操作树形数据。 这个源码库的亮点在于它的用法与C++标准库中的其他容器类似,如vector和...

    device-tree-xlnx-master_tree_devicetree2018.3_

    设备树(Device Tree)在嵌入式Linux系统中扮演着至关重要的角色,它是一种数据结构,用于描述硬件配置,使得操作系统内核能够更好地理解和管理硬件资源。`device-tree-xlnx-master_tree_devicetree2018.3_`这个标题...

    jsTree中文api

    **jsTree API详解** jsTree 是一个流行的JavaScript库,用于创建、操作和展示交互式的HTML树状视图。它提供了一套丰富的API,使得开发者能够方便地实现树形结构的各种功能,如添加、删除、修改节点,以及节点的移动...

    speedtree帮助教程

    【速度树(SpeedTree)教程】 SpeedTree是一款广泛应用于游戏开发、影视特效、虚拟现实以及建筑设计等领域的高级树木和植被渲染软件。它以其强大的建模功能、高效的渲染技术和逼真的动态效果而闻名。本教程是专门...

    PowerTree中文教程

    "PowerTree中文教程" PowerTree 是一种强大的电源设计和分析工具,旨在帮助设计工程师和电源完整性工程师更好地设计和优化配电网络 (PDN)。本教程将详细介绍 PowerTree 的基本概念、工作原理、功能特点和应用场景。...

    英文语料库词汇标注软件TreeTagger

    TreeTagger是一款由德国图宾根大学的Philippe Schmid教授开发的著名自然语言处理工具,主要用于对文本进行词性标注、实体识别和句法分析。这个软件在学术界和工业界都得到了广泛的应用,特别是在语言学研究和信息...

    flex带复选框的tree,flex checkboxtree

    在Flex中,Tree组件是用于显示层次结构数据的控件,而"flex带复选框的tree"(Flex CheckboxTree)则是对Tree组件的一种扩展,增加了复选框功能,用户可以对树形结构的节点进行选择或全选操作,常用于权限管理、配置...

    手机端js tree

    在移动设备上,为了有效地展示层次结构数据,如文件系统、组织架构或导航菜单,"手机端js tree"成为了一种实用的解决方案。这个技术基于JavaScript,专为智能手机和平板电脑等移动端设备设计,提供了可自定义的树形...

    el-tree-selected-tree

    在Element UI库中,`el-tree` 是一个强大的组件,用于构建可交互的树形结构数据展示。在实际开发中,我们经常需要处理用户选择的节点,并可能需要独立展示这些选中节点,甚至允许用户在独立的树结构中进行删除操作。...

    SPeedtree 7.14 for Unity

    SPeedtree 7.14 for Unity是一款专为Unity引擎设计的高级植被渲染插件,它为游戏开发者提供了强大的自然环境构建工具。在Unity这个广泛使用的跨平台游戏开发框架中,SPeedtree能够帮助设计师们创建出栩栩如生、细节...

    Excel 建模插件 treeplan

    Excel中的TreePlan是一款强大的建模插件,专用于创建和分析决策树模型。在商业智能、项目管理和风险管理等领域,决策树是一种常用的分析工具,它通过图形化的方式展示各种可能的决策路径及其结果,帮助用户在不确定...

    Ajax tree,动态生成Tree

    **Ajax Tree技术详解** 在网页开发中,树形结构(Tree)是一种常见的数据展示方式,尤其在管理和组织层级数据时非常实用。Ajax Tree是利用Ajax技术动态加载和更新树节点,提供用户友好的交互体验。它允许用户在不...

    EasyTree的使用教程

    【EasyTree的使用教程】 EasyTree 是一个轻量级的前端组件,专用于构建和展示树型结构数据。它在Web应用中广泛用于组织和管理层次化的信息,如目录结构、组织架构或权限管理等。这个教程将详细介绍如何使用经过修改...

    使用jsTree实现js树形结构

    **jsTree:构建前端树形结构的利器** jsTree 是一个强大的 JavaScript 库,专用于在 Web 页面上创建交互式的树形结构。它基于纯 JavaScript 编写,无需依赖其他库,因此对于初学者和有经验的开发者来说,都是一个...

    文件目录生成(tree)

    `Tree` 命令是 Windows 操作系统中一个实用的 DOS 命令,它允许用户以图形化的树状结构来查看指定驱动器或路径的文件夹结构。这种直观的展示方式对于理解和管理文件系统非常有帮助。下面将详细解释 `Tree` 命令的...

    kd-tree的基本教程PDF

    ### KD-Tree基本教程知识点概览 #### 一、引言与背景介绍 - **教程来源**:本教程来源于Andrew W. Moore博士论文的一部分——《Efficient Memory-based Learning for Robot Control》,该章节专用于KD-Tree及其在...

    i-Tree最新版2019年中文操作手册

    i-Tree的五大核心产品包括:i-Tree Eco、i-Tree Streets、i-Tree Hydro、i-Tree Vue和i-Tree Species Selector。 1. i-Tree Eco:它能提供整个城市森林的概况分析,通过使用来自社区随机分布样区的现场数据和当地每...

    TableTree 表格树

    《TableTree:构建表格树形结构的实现与应用》 在数据展示中,有时我们需要将层级关系的数据以表格的形式呈现,这时,表格树形结构(TableTree)就显得尤为重要。它将传统二维表格与树状结构相结合,既保留了表格的...

    js tree,checkbox tree

    JavaScript Tree是一种交互式的前端UI组件,它以树形结构展示数据,常用于网站或应用程序的导航、目录组织或数据层级展示。"Checkbox Tree"是这种树结构的一个扩展,它在每个节点上添加了复选框,允许用户进行多选...

Global site tag (gtag.js) - Google Analytics