关闭

Extjs4之 treepanel 操作

210人阅读 评论(0) 收藏 举报
分类:


<%@ 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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:77004次
    • 积分:1451
    • 等级:
    • 排名:千里之外
    • 原创:57篇
    • 转载:88篇
    • 译文:0篇
    • 评论:5条
    文章分类