ExtJS TreePanel

最新推荐文章于 2017-03-23 14:37:20 发布
最新推荐文章于 2017-03-23 14:37:20 发布
阅读量124 收藏
点赞数
分类专栏： Ext 文章标签： json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kanpiaoxue/article/details/84147952
版权

ExtJS的Treepanel 经常被使用到，这里我写了一颗树。上面的数据用json从后台打回来到前台就可以使用。这颗树的json数据里面有部分属性没有用到，请大家使用的时候自己去掉。

 

var treeMenu = [ {
			"id" : 370,
			"valid" : true,
			"createTime" : "2011-07-22 00:00:00",
			"text" : "小型超市商务平台",
			"nodeId" : "132",
			"parentNodeId" : "0",
			"cls" : "folder",
			"sortId" : 100,
			"link" : "#",
			"children" : [ {
				"id" : 371,
				"valid" : true,
				"createTime" : "2011-07-22 00:00:00",
				"text" : "销售",
				"nodeId" : "133",
				"parentNodeId" : "132",
				"cls" : "folder",
				"sortId" : 1,
				"link" : "#",
				"children" : [ {
					"id" : 376,
					"valid" : true,
					"createTime" : "2011-07-26 00:00:00",
					"text" : "当前销售",
					"nodeId" : "138",
					"parentNodeId" : "133",
					"cls" : "file",
					"sortId" : 1,
					"link" : "/jsp/",
					"children" : [],
					"validValue" : 0,
					"leaf" : true
				}, {
					"id" : 377,
					"valid" : true,
					"createTime" : "2011-07-26 00:00:00",
					"text" : "销售记录",
					"nodeId" : "139",
					"parentNodeId" : "133",
					"cls" : "file",
					"sortId" : 10,
					"link" : "/jsp",
					"children" : [],
					"validValue" : 0,
					"leaf" : true
				} ],
				"validValue" : 0,
				"leaf" : false
			}, {
				"id" : 372,
				"valid" : true,
				"createTime" : "2011-07-22 00:00:00",
				"text" : "进货",
				"nodeId" : "134",
				"parentNodeId" : "132",
				"cls" : "folder",
				"sortId" : 10,
				"link" : "#",
				"children" : [],
				"validValue" : 0,
				"leaf" : false
			}, {
				"id" : 373,
				"valid" : true,
				"createTime" : "2011-07-22 00:00:00",
				"text" : "仓储",
				"nodeId" : "135",
				"parentNodeId" : "132",
				"cls" : "folder",
				"sortId" : 20,
				"link" : "#",
				"children" : [],
				"validValue" : 0,
				"leaf" : false
			}, {
				"id" : 374,
				"valid" : true,
				"createTime" : "2011-07-22 00:00:00",
				"text" : "结余",
				"nodeId" : "136",
				"parentNodeId" : "132",
				"cls" : "folder",
				"sortId" : 30,
				"link" : "#",
				"children" : [],
				"validValue" : 0,
				"leaf" : false
			} ],
			"validValue" : 0,
			"leaf" : false
		}, {
			"id" : 368,
			"valid" : true,
			"createTime" : "2000-01-01 00:00:00",
			"text" : "系统管理",
			"nodeId" : "6",
			"parentNodeId" : "0",
			"cls" : "folder",
			"sortId" : 999999,
			"link" : "#",
			"children" : [ {
				"id" : 378,
				"valid" : true,
				"createTime" : "2011-07-26 00:00:00",
				"text" : "后台管理-管理员",
				"nodeId" : "140",
				"parentNodeId" : "6",
				"cls" : "folder",
				"sortId" : 999,
				"link" : "#",
				"children" : [ {
					"id" : 379,
					"valid" : true,
					"createTime" : "2011-07-26 00:00:00",
					"text" : "个人信息",
					"nodeId" : "141",
					"parentNodeId" : "140",
					"cls" : "file",
					"sortId" : 1,
					"link" : "/jsp/",
					"children" : [],
					"validValue" : 0,
					"leaf" : true
				} ],
				"validValue" : 0,
				"leaf" : false
			}, {
				"id" : 7,
				"valid" : true,
				"createTime" : "2009-04-07 00:00:00",
				"text" : "后台管理-<span style='color:red;'>超级管理员<\/span>",
				"nodeId" : "1",
				"parentNodeId" : "6",
				"cls" : "folder",
				"sortId" : 900000,
				"link" : "#",
				"children" : [ {
					"id" : 49,
					"valid" : true,
					"createTime" : "2009-06-05 00:00:00",
					"text" : "菜单树管理",
					"nodeId" : "5",
					"parentNodeId" : "1",
					"cls" : "file",
					"sortId" : 0,
					"link" : "/direct/menuTree.do",
					"children" : [],
					"validValue" : 0,
					"leaf" : true
				}, {
					"id" : 103,
					"valid" : true,
					"createTime" : "2009-07-14 00:00:00",
					"text" : "用户管理",
					"nodeId" : "122",
					"parentNodeId" : "1",
					"cls" : "file",
					"sortId" : 10,
					"link" : "/direct/user/manage.do",
					"children" : [],
					"validValue" : 0,
					"leaf" : true
				}, {
					"id" : 375,
					"valid" : true,
					"createTime" : "2011-07-26 00:00:00",
					"text" : "用户组管理",
					"nodeId" : "137",
					"parentNodeId" : "1",
					"cls" : "file",
					"sortId" : 15,
					"link" : "/jsp/",
					"children" : [],
					"validValue" : 0,
					"leaf" : true
				}, {
					"id" : 107,
					"valid" : true,
					"createTime" : "2010-01-07 00:00:00",
					"text" : "用户组分配",
					"nodeId" : "131",
					"parentNodeId" : "1",
					"cls" : "file",
					"sortId" : 20,
					"link" : "/jsp/background_management/adminUserGroup.jsp",
					"children" : [],
					"validValue" : 0,
					"leaf" : true
				}, {
					"id" : 105,
					"valid" : true,
					"createTime" : "2010-01-07 00:00:00",
					"text" : "权限组管理",
					"nodeId" : "129",
					"parentNodeId" : "1",
					"cls" : "file",
					"sortId" : 40,
					"link" : "/jsp/background_management/addAuthGroup.jsp",
					"children" : [],
					"validValue" : 0,
					"leaf" : true
				}, {
					"id" : 20,
					"valid" : true,
					"createTime" : "2009-04-28 00:00:00",
					"text" : "用户权限管理",
					"nodeId" : "2",
					"parentNodeId" : "1",
					"cls" : "file",
					"sortId" : 50,
					"link" : "/jsp/background_management/admin.jsp",
					"children" : [],
					"validValue" : 0,
					"leaf" : true
				}, {
					"id" : 106,
					"valid" : true,
					"createTime" : "2010-01-07 00:00:00",
					"text" : "组权限分配",
					"nodeId" : "130",
					"parentNodeId" : "1",
					"cls" : "file",
					"sortId" : 60,
					"link" : "/jsp/background_management/adminAuthGroup.jsp",
					"children" : [],
					"validValue" : 0,
					"leaf" : true
				} ],
				"validValue" : 0,
				"leaf" : false
			} ],
			"validValue" : 0,
			"leaf" : false
		} ];
  /** 
			 * 左边的树
			 */
			var westObj = {
				id : 'menuTree',
				region : 'west',
				collapsible : true,
				animate : true,
				title : CommonUtils.language.treeTitle,
				xtype : 'treepanel',
				width : 200,
				autoScroll : true,
				split : true,
				loader : new Ext.tree.TreeLoader(),
				root : new Ext.tree.AsyncTreeNode( {// 树根
							id : 'rootTreeId',
							text : CommonUtils.language.projectName,
							iconCls : 'treeNodeStyle',
							expanded : true,
							children : treeMenu
						}),
				rootVisible : true,// 根节点的可见性
				listeners : {// 点击后调用的方法
					click : function(n) {

						// 如果是叶子节点并且点击的不是olap菜单
				if (n.isLeaf()) {
					var tabTitle = n.attributes.text;
					var targetUrl = basePath + n.attributes.link;
					addTab(n.attributes.id, tabTitle, targetUrl);
				} else {
					if (n.isExpanded()) {// 树节点的开关
					n.collapse(false, true);
				}
			}

		}
	}
			};
 
kanpiaoxue
关注
专栏目录
ExtJS4.0.7 树组建treePanel简单介绍
origin 专栏
04-25 9387
ExtJS4 树组件 Tree Ext.tree.Panel      Ext.data.TreeExt.data.NodeInterfaceExt.data.TreeStoreExt.tree.View          相关的类有Panel，Tree， NodeInterface，TreeStore，View。从treePanel看起，treePanel主要提供树结构数据的UI展
extjs4 treepanel动态改变行高度示例
10-26
在本文中，我们将探讨ExtJS 4框架中的TreePanel组件如何动态地改变行高。TreePanel是ExtJS中用于展示树形结构数据的组件，它通常用于显示文件系统结构、组织架构等层次化数据。动态改变行高是提高用户界面友好性和...
ExtJS中TreePanel的使用
weixin_34351321的博客
10-08 89
昨天帮朋友用ExtJS的TreePanel做了个小demo,实现从动态异步从后台加载并构建节点（为了方便演示，这里使用本地的XML文件进行模拟）。网上的资料大多是使用JSON格式的数据进行讲解的，相比起来，JSON格式确实要简单一些。 首先看看效果： 下面开始来一步步做下去，首先是页面文件index.html, 这里有两个地方要注意一下，一个是我们引用的JS如果采用GBK的默认编码，浏览器会显...
ExtJS专题-TreePanel(1)
ama7449的博客
09-09 172
这次我们来学习下ExtJS中的树面板（TreePanel），很多人都说，只是为了树，都要好好学习ExtJS！可见大家对Tree的一往情深。从另一方面来说，Tree这种结构在实际项目中也的确用得相当广泛，所以我们很有必要研究一下它。这次我们完成的树大致上有这样的功能：它的节点是动态异步从后台（存储在数据库中一张电子产品分类表）加载的，节点之间可以拖曳，节点可以编辑，同时还支持右键菜单，而且...
ExtJs之TreePanel篇
Kenshin Cui's Blog
10-28 9352
ExtJs系列的东西好久没有写了（最初想一气呵成的，可是中间有些工作，就给耽误了），今天我们继续看Ext中的TreePanel。有人说即使为了"树"也要学习Ext，足见"树"在Ext中是何等的重要。事实上也确实如此，在Ext中使用"树"可以像在WinFrom中一样操作树形结构。 静态树 现在我们先看看Ext中最简单的静态树。  看一下效果。 上面我基本上对每个配置属性进行了说明，值得注意的就是loader配置属性，它的功能就是加载数据，虽然从上面还看不到它的作用（因为我们的是静态树，数据直
ExtJS学习之TreePanel
达拉斯母牛
10-28 5576
1 树（Tree Panel） 在Web应用程序开发中，Tree Panel使用的频率很高。Tree Panel是ExtJS的核心组件之一，Tree Panel和Grid Panel一样都是从相同的类（Ext.panel.Table）扩展， 因此Tree Panel具有Grid Panel的所有功能，Grid Panel的features、extensions和plugins在Tree Pan
extjs TreePanel
02-15
EXTJS中的TreePanel是用于展示层级数据的组件，它以树状结构呈现数据。TreePanel提供了丰富的配置项和方法，使得我们可以灵活地控制树的显示和交互。以下是对TreePanel及其主要配置项和方法的详细说明： 1. **主要...
关于extjs treepanel复选框选中父节点与子节点的问题
10-27
在ExtJS框架中，TreePanel组件是用来展示层次化数据的一种常用方式。当TreePanel组件配置了复选框时，就会涉及到节点间复选状态的联动处理问题。也就是说，当用户操作某个节点的复选框时，需要根据一定的逻辑规则来...
ExtJs TreePanel应用
07-11
ExtJs TreePanel是一种在Web应用程序中用于展示层次结构数据的强大组件。它被广泛应用于构建具有树状结构的导航菜单、文件系统目录视图或者组织结构图。TreePanel结合了丰富的功能和灵活的定制性，使其成为ExtJs框架...
extjs treepanel
xing_sky的专栏
09-27 1219
Insert title here  Ext.onReady(function() {     Ext.QuickTips.init();// 浮动信息提示     Ext.BLANK_IMAGE_URL = 'images/default/s.gif';// 替换图片文件地址为本地     // 创建一个简写     var Tree = Ext.tree;
ExtJS_TreePanel_树的配置详细属性
11-05
主要方法： collapseAll()：收缩所有树节点 expandAll()：展开所有树节点 getRootNode()：获取根节点 getNodeById(String id)：获取指定id的节点 expand( [Boolean deep], [Boolean anim],
extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据
04-16
NULL 博文链接：https://maoyi606.iteye.com/blog/1782825
ExtJS——TreePanel
u013127751的博客
03-23 414
index.html Ext.onReady(function(){ //树的节点数据源 var node = { text:'根', expanded:true, leaf:false,//是否为叶节点 children:[ { text:
ExtJS 的TreePanel
其疾如风，其徐如林，侵掠如火，不动如山
05-08 654
TreePanel为树状的数据结构提供了树状结构UI表示层，是从panel继承过来的，有着panel的所有属性 首先加载ExtJS框架 .nodeicon { background-image: url(image/user.gif) !important; }
ExtJs——TreePanel(动态)！！！
事后诸葛亮的程序人生（微信：zq9017197）
03-14 2003
<br />Ext.onReady(function(){ var root = new Ext.tree.AsyncTreeNode({id:'1',text:'根节点',leaf:false}); var tree = new Ext.tree.TreePanel({ dataUrl:'TreeServlet.do', title:'异步加载节点', width:300, height:300 }); tree.setRootNode(root); tree.
Extjs TreePanel示例
weixin_34239592的博客
04-05 103
      这几天用到了Extjs的TreePanel来创建树形菜单，在网上没瞧见一个好的示例，遂决定写一个，供后来者参考（本文下方的&amp;ldquo;附件下载&amp;rdquo;可下载本示例的完整源代码）。      先创建一个雏形，代码如下：var tree = new Ext.tree.TreePanel({         title : '主菜单',         width :...
ExtJs4之treepanel
suxiaolsx的专栏
09-17 200
对于Extjs学习者来说，treepanel的运用是必不可少的，treepanel主要就包括store层和view层，注意store层是Ext.data.TreeStore，与我们常用的Ext.data.Store是属于并列关系，同继承于Ext.data.AbstractStore，因此tree节点都有默认的model，包括allowDrag，allowDrop，checked，cls，depth...
extjs中treepanel例子
Carl——拥抱变化、拥抱自然、拥抱互联网
09-09 1351
本文导读：TreePanel继承自Panel，在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点，比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext.tree.TreeLoader。下面介绍几个extjs中treepanel例子 一、TreePanel基本配
extjs 树形控件(treePanel)
u011123176的专栏
02-24 1022
树形控件   树形控件由Ext.tree.TreePanel类定义.控件的名字为treePanel.TreePanel面板.在Extjs中使用树控件其实很简单.   树的节点信息.Extjs的树形控件提供了对这种功能的支持,你只需要在创建树控件的时候,通过给树指定一个节点加载器,   可以用来从服务器段动态的加载树的节点信息.  var store = Ext.create('Ex
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值