Extjs4之 treepanel 操作

最新推荐文章于 2021-09-01 16:02:46 发布
最新推荐文章于 2021-09-01 16:02:46 发布
阅读量769 收藏
点赞数 1
分类专栏： EXTJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lianghl8090/article/details/49902401
版权 


<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<%@ include file="/WEB-INF/views/include/public.jsp" %>
		<%@ include file="/WEB-INF/views/include/includeext.jsp" %>
		<fireflybiz:dict2array var="checkItemResultType" list='${fireflyFn:getDictDataByCode("checkItemResultType")}'></fireflybiz:dict2array>
		<script type="text/javascript">
			var areaTreePanel, treeResource,childrenData,areaFormPanel,dataType,mdflag;
			Ext.onReady(function(){
				
				Ext.define("treeModel", {// 定义树节点数据模型
					extend : "Ext.data.Model",
					fields : [{
						name : "id",
						type : "string"
					}, {
						name : "text",
						type : "string"
					}, {
						name : "uuid",
						type : "string"
					}, {
						name : "areaId",
						type : "string"
					},{
						name : "buildingId",
						type : "string"
					}, {
						name : 'code',
						type : "string"
					}, {
						name : 'name',
						type : "string"
					}, {
						name : 'description',
						type : "string"
					}]
				});
				
				//加载组织结构数据
				treeDataLoad();
				
				treeResource = Ext.create('Ext.data.TreeStore', {
					model : 'treeModel',
					proxy : {
						type : 'memory',
						reader : {
							type : 'json'
						}
					},
					root : {
						expanded : true,
						id : '-1',
						text : '组织结构',
						children : childrenData
					}
				});
				
				contextMenu = Ext.create('Ext.menu.Menu', {
					id : 'treeMenu_contextMenu',
					border : false,
					items : [{
						id : 'mdfOrg',
						iconCls : 'edit',
						text : '修改',
						handler: function () {
                        	mdflag = "修改";
                        	showAreaFormPanel();
                        }
					}, '-', {
						id : 'delOrg',
						iconCls : 'minus',
						text : '删除',
						handler : function(){
							Ext.MessageBox.confirm('提示', '确定删除吗？', function(btn) {
								var sltNode = areaTreePanel.getSelectionModel().getLastSelected();
								if(btn=="yes"){
									Ext.Ajax.request({
										url : '${basePath}area/area!dataDelete.json',
										params : {
											uuid : sltNode.get('uuid'),
											type : sltNode.get('type')
										},
										method : 'POST',
										success : function(response) {
											var result = Ext.JSON.decode(response.responseText);
											if (result['frf_success']) {
												Ext.Msg.alert("提示", "删除成功！");
												treeDataLoad();
												var root = {
													expanded : true,
													id : '-1',
													text : '组织结构',
													children : childrenData
												}
												areaTreePanel.getStore().setRootNode(root);
											}
										},
										failure : function() {
											Ext.Msg.alert("提示", "删除失败！");
										}
									});
								}
								
							});
						}
					}]
				});
				
				var tbar = Ext.create("Ext.toolbar.Toolbar", {
	                items: [
	                    {
	                        text: '区域',
	                        id:'area',
	                        iconCls: 'plus',
	                        tooltip:'增加区域',
	                        handler: function () {
	                        	dataType = "area";
	                        	showAreaFormPanel("增加区域");
	                        }
	                    }, '-',
	                     {
	                         text: '楼宇',
	                         id:'building',
	                         iconCls: 'plus',
	                         tooltip:'增加楼宇',
	                         disabled:true,
	                         handler: function () {
	                        	 dataType = "building";
	                        	 showAreaFormPanel("增加楼宇");
	                         }
	                     }, '-',
	                     {
	                         text: '楼层',
	                         id:'floor',
	                         iconCls: 'plus',
	                         tooltip:'增加楼层',
	                         disabled:true,
	                         handler: function () {
	                        	 dataType = "floor";
	                        	 showAreaFormPanel("增加楼层");
	                         }
	                    }
	                ]
	            });
					
					
				areaTreePanel = Ext.create('Ext.tree.Panel', {
					id : 'areaTreePanel',
					//title : '组织结构管理',
					region:'center',
					store : treeResource,
					rootVisible : false,
					rowLines : true,
					columnLines : true,
					border : true,
					useArrows : false,
					margin:'3px',
					tbar:tbar,
					columns: [{
	                    text: 'uuid',
	                    hidden:true,
	                    dataIndex: 'uuid'
	                },{   //定义tree的列
	                    xtype: 'treecolumn',
	                    text: '名称',  //显示的表头列名称
	                    width: 180,
	                    dataIndex: 'text'  //对应store的列字段名称
	                }, {
	                    text: '编码',
	                    width: 60,
	                    dataIndex: 'code'
	                }],
					listeners : {
						itemcontextmenu : function(view, rec, item, index, e, opt) {
							e.preventDefault();
							/* if (rec.data.text == '组织结构') {
								Ext.each(contextMenu.query('menuitem(true)[id!="addOrg"]'), function(item) {
									item.disable();
								});
							} else {
								Ext.each(contextMenu.query('menuitem(true)[id!="addOrg"]'), function(item) {
									item.enable();
								});
							} */
							contextMenu.showAt(e.getXY());
							return false;
						},
						select : function(tree, rec, idx, eOpts) {
							var type = rec.get('type');
							if(type=="area")
							{
								Ext.getCmp('building').enable();
								Ext.getCmp('floor').disable();
							}else if(type=="building"){
								Ext.getCmp('floor').enable();
								Ext.getCmp('building').disable();
							}else{
								Ext.getCmp('building').disable();
								Ext.getCmp('floor').disable();
							}
						},
						scope : this
					}
				});
				
				
				Ext.create('Ext.container.Viewport', {
					layout : 'border',
					style : 'background-color: #f5f5f5;',
					items : [areaTreePanel],
					renderTo : Ext.getBody()
				});
				
			});
			
			
			// 区域，楼宇，楼层 表单
			function showAreaFormPanel(title) {
				if (!areaFormPanel) {
					areaFormPanel = Ext.create('Ext.form.Panel', {
						id : 'areaFormPanel',
						modal : true,
						autoScroll : true,
						frame : true,
						bodyStyle : 'padding:5px 20px 5px 6px;background-color:#f5f5f5;border:1px solid #d0d0d0;',
						buttonAlign : 'center',
						buttons : [{
							text : '提交',
							handler : function() {
								var sltNode = areaTreePanel.getSelectionModel().getLastSelected();
								var data = areaFormPanel.getForm().getValues();
								
								if("修改" == mdflag){
									data['type'] = sltNode.get('type');
								}else{// 增加操作  处理 区域，楼宇，楼层
									if(sltNode == null){
										data['type'] = dataType;
									}else{
										if(sltNode.get('type') == "area" && dataType == "building"){ // 选中区域 增加  楼宇
											data['areaId'] = sltNode.get('id');
											data['type'] = dataType;
										}else if(sltNode.get('type') == "building" && dataType == "floor"){// 选中楼宇 增加 楼层 
											data['buildingId'] = sltNode.get('id');
											data['type'] = 'floor';
										}else{
											data['type'] = dataType;
										}
									}
								}
								//return ;
								Ext.Ajax.request({
									url : '${basePath}area/area!dataSave.json',
									params : data,
									method : 'POST',
									success : function(response) {
										var result = Ext.JSON.decode(response.responseText);
										if (result['frf_success']) {
											Ext.Msg.alert("提示", "操作成功！");
											areaFormPanel.hide();
											treeDataLoad();
											var root = {
												expanded : true,
												id : '-1',
												text : '组织结构',
												children : childrenData
											}
											areaTreePanel.getStore().setRootNode(root);
											// 修改的标识
											mdflag = "";
										}
									},
									failure : function() {
										Ext.Msg.alert("提示", "操作失败！");
									}
								});
							},
							scope : this
						}, {
							text : '取消',
							handler : function() {
								areaFormPanel.getForm().reset();
								areaFormPanel.close();
							},
							scope : this
						}],
						closable : true,
						closeAction : 'hide',
						defaults : {
							bodyStyle : 'background-color:#f5f5f5;',
							border : false
						},
						draggable : true,
						floating : true,
						frame : true,
						maxHeight : 480,
						width : 640,
						height : 200,
						iconCls : 'modalWin',
						loader : {
							loadMask : true
						},
						items : [{
							layout : 'column',
							anchor : '100% 100%',
							defaults : {
								bodyStyle : 'background-color:#f5f5f5;',
								labelAlign : 'right',
								width : 135
								//labelWidth : 100
							},
							items : [{
								xtype : 'hidden',
								name:'uuid'
							},{
								xtype : 'hidden',
								name:'areaId'
							},{
								xtype : 'hidden',
								name:'buildingId'
							},{
								columnWidth : .50,
								xtype : 'textfield',
								fieldLabel : '<span style="font-weight:bold;color:red">*</span>名称',
								name : 'name',
								id : 'name',
								allowBlank : false
							}, {
								columnWidth : .50,
								xtype : 'textfield',
								fieldLabel : '<span style="font-weight:bold;color:red">*</span>编码',
								name : 'code',
								id : 'code',
								style : 'margin-left:10px;',
								allowBlank : false
							}, {
								columnWidth : 1,
								xtype : 'textarea',
								fieldLabel : '备注',
								name : 'description',
								id : 'description',
								style : 'margin-top:10px;'
							}]
						}]
					});
				}
				
				if("修改"==mdflag){
					var sltNode = areaTreePanel.getSelectionModel().getLastSelected();
					var fieldsData = sltNode.data;
					areaFormPanel.getForm().setValues(sltNode.data);
				}else{
					areaFormPanel.getForm().reset();
				}
				areaFormPanel.setTitle(title); 
				areaFormPanel.show();
				areaFormPanel.center();
			}
			
			
			function treeDataLoad() {
				childrenData = Ext.decode($.ajax({
				async : false,
				url: '${basePath}/area/area!areaTreeLoad.json'
				}).responseText)['frf_resultModel'];
			}
		</script>	
	</head>
	<body></body>
</html>

无奈的伤城
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Extjs4 treePanel节点刷新JS函数
03-30
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
Extjs4中关于TreeStore加载数据
07-10 1万+
Extjs4中对使用的TreeStore时，常常摆在眼前的问题是如何加载数据，从加载的方式上来说，可以分为两类：异步加载和全部加载。 异步加载  异步加载的好处主要是，需要数据的时候才从后台请求，每次加载的数据量少，加快了页面初始化速度，用户体验较好，异步加载的方式可以按照如下方式定义： 1.定义Store Ext.define('AM.store.monitor.Le
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-树 Ext.tree.TreePanel 动态加载数据
weixin_30430169的博客
12-13 1483
先上效果图 1、说明Ext.tree.Panel 控件是树形控件，大家知道树形结构在软件开发过程中的应用是很广泛的，树形控件的数据有本地数据、服务器端返回的数据两种。对于本地数据的加载，在extjs的 api文档中都有介绍，但是Extjs.tree.Panel怎么动态加载数据库中的数据，API文档介绍的较少，以至于初学者，不知道怎么实现。本篇文章将介绍Extjs.tree.Panel动态加载...
ExtJs之结构树 Ext.tree.panel详细用法
idomyway的博客
12-10 1万+
1.简单的树 效果图 代码 [javascript] view plain copy print? "text/javascript" defer>      Ext.onReady(function(){          Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';    
extjs4.2 隐藏treePanel 的节点
david的专栏
10-17 4857
利用treePanel 的view来获取页面的html元素，设置它的display属性为none;   Ext.onReady(function(){  var store = Ext.create('Ext.data.TreeStore', {     root: {         expanded: true,         children: [            
Ext.JS——treepanel
小小白
09-01 384
xxx
【无事水一发】ExtJS4 Ext.tree.Panel (无限层级)带复选框树勾选(父级子级)联动代码
IGFrameの世界
03-14 2707
//原创，转载请注明出处~~//勾选父节点，之下所有子节点自动勾选；反之自动取消子节点勾选（无限层级）//勾选所有子节点，父节点自动勾选；反之自动取消父节点勾选（无限层级）Ext.onReady(function() { var store = Ext.create('Ext.data.TreeStore', {//测试数据 root:{ text:'Root'
extjs4 treepanel动态改变行高度示例
10-26
本文为大家介绍下extjs4 treepanel如何动态改变行高度，下面有个不错的示例，感兴趣的朋友可以参考下
ExtJs动态生成treepanel的Json格式
10-23
主要介绍了ExtJs动态生成treepanel的Json格式的相关资料,需要的朋友可以参考下
ExtJS4 treepanel与girdpanel简单案例（包括MVC模式与非MVC模式）
01-21
用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式：需要在引入js文件夹中的main.js文件 mvc开发模式：需要引入app文件夹中的app.js文件 适合初学extjs4的朋友
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
10-19
主要介绍了Extjs 中 Treepanel 实现菜单级联选中效果,需要的朋友可以参考下
ExtJs TreePanel 使用帮助
p656456564545的专栏
09-23 390
tree ：树    node：节点   1、全部展开 tree.expandAll(); 2、全部收缩 tree.collapseAll(); 3、得到父节点 node.parentNode 4、判断是否有父节点 node.parentNode==null 5、判断是否有子节点 node.hasChildNodes() 6、获取下
ExtJs4 笔记（10） Ext.tab.Panel 选项卡
weixin_30851409的博客
12-21 168
《回到系列目录 本篇讲解选项卡控件。 一、基本选项卡 首先我们来定义一个基本的选项卡控件，其中每个Tab各有不同，Tab的正文内容可以有三种方式获取： 1.基本方式:通过定义html和items的方式。 2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文。 3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据。 另外，...
ExtJS专题-TreePanel(1)
ama7449的博客
09-09 156
这次我们来学习下ExtJS中的树面板（TreePanel），很多人都说，只是为了树，都要好好学习ExtJS！可见大家对Tree的一往情深。从另一方面来说，Tree这种结构在实际项目中也的确用得相当广泛，所以我们很有必要研究一下它。这次我们完成的树大致上有这样的功能：它的节点是动态异步从后台（存储在数据库中一张电子产品分类表）加载的，节点之间可以拖曳，节点可以编辑，同时还支持右键菜单，而且...
Extjs学习笔记-1.TreePanel+TabPanel简单的树形菜单
st291223883的专栏
06-10 2284
1、wmcoreframe.jsp page contentType="text/html;charset=UTF-8" %>   DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> h
extjs4 treepanel、 树、节点的操作
.
08-31 5665
这是个tree panel的实例，是基于extjs的mvc模式，先得对mvc模式有一定的了解 效果图 store存储层下加载tree数据的类 Ext.define('yang.store.frameAAA.module.FrameAAAWestTreeStore', { extend : 'Ext.data.TreeStore', storeId : 'frameAAAW
我自己写的关于EXTJS的TreePanel、viewPort和tabPanel动态切换和添加tabpanel的例子
shelleychen008的专栏
11-16 1415
什么也不说直接上代码： var tabPanel; Ext.onReady(function () { Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif"; tabPan
Extjs4之 grid中加入合计行（summary ）
为梦想放生,创造梦一样的未来！
07-03 7417
Ext.onReady(function () { Ext.define('TestResult', { extend: 'Ext.data.Model', fields: ['student', { name: 'mark', type: 'int'
extjs4 api官网
最新发布
11-18
extjs4是一个功能强大的JavaScript框架，用于构建交互式的Web应用程序。它提供了丰富的组件和工具，帮助开发人员快速创建现代化的用户界面。extjs4的API官网为开发人员提供了详细的文档和示例，帮助他们更好地了解和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值