0
点赞
收藏
分享

微信扫一扫

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)


     熟悉EBS的朋友应该对Folder的功能很了解吧,不熟悉的朋友可经先预先了解一下,以下是我所实现的Folder功能(实现内容只有FOLDER中的一部分):
    1)New file    — 为表格创建一个模板,保存表格当前列的各种设置
    2)Save file     — 保存创建的模板

    3)Open file    — 打开创建过的模板

    4)Delete file  —删除已创建的模板

    5)Change Prompt   —修改列标题

    6)Hide Field    —隐藏列

    7)Show Field   —显示列

    8)Widen Field   —自动增加列宽

    9)Shrink Field   —自动缩小列宽

  10)Move Right    —列右移

  11)Move Left     —列左移

 

    大家都知道,FLEX DataGrid提供了很多功能,允许用户改变列的顺序等。本次的实践将实现以上描述的功能,但不涉及数据库。若要将DataGrid列的信息保存到数据库中,会更复杂些,不过思路大致上是一样的。

 

    1、先来看主应用程序

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	            layout="absolute"
	            xmlns:component="components.*"
	            creationComplete="init()"
	            fontSize="13">
 <mx:Script>
 	<!--[CDATA[
 		import components.OpenWindow;
 		import components.ShowFieldWindow;
 		import mx.controls.dataGridClasses.DataGridColumn;
 		import components.PromptWindow;
 		import mx.events.ListEvent;
 		import mx.controls.listClasses.IListItemRenderer;
 		import components.FolderWindow;
 	    import mx.controls.Alert;
 	    import mx.managers.PopUpManager;
 	    
 	    //创建datagrid列模板
        var columnTemplate:ArrayCollection=new ArrayCollection();
        //模板名称
        var templateName:String;
        //选中列的序号
        var columnIndex:Number =-1;
        
 		private function init():void{
 			this.addEventListener('OpenEvent',openHandler);
 			this.addEventListener('SaveEvent',saveHandler);
 			this.addEventListener('NewEvent',newHandler);
 			this.addEventListener('DeleteEvent',deleteHandler);
 			this.addEventListener('ChangePromptEvent',changePromptHandler);
 			this.addEventListener('HideEvent',hideFieldHandler);
 			this.addEventListener('ShowEvent',showHandler);
 			this.addEventListener('WidenEvent',widenHandler);
 			this.addEventListener('ShrinkEvent',shrinkHandler);
 			this.addEventListener('MoveRightEvent',moveRightHandler);
 			this.addEventListener('MoveLeftEvent',moveLeftHandler);
 		}
 		
 		private function itemClickHandler(event:ListEvent):void{
    	    columnIndex = event.columnIndex;
        }
 		//打开文件夹窗口
 		var openWin:OpenWindow = new OpenWindow();
 		private function openHandler(evt:Event):void{
 			openWin = OpenWindow(PopUpManager.createPopUp(this,OpenWindow,true));
 			openWin.chooseFlag = openWin.OPEN_FLAG;
 			openWin.winTitle = '打开文件夹';
 			openWin.grid.dataProvider = this.columnTemplate;
 			openWin.addEventListener("OpenFileEvent",openFileHandler);
 		}
 		private function openFileHandler(evt:Event):void{
 			var tempColumns:Array=new Array();
  	        for(var i:Number=0; i<columnTemplate[openWin.rowIndex]['columns'].length; i++){
  		       var datagridColumn:DataGridColumn = new DataGridColumn();
  		       datagridColumn.dataField = columnTemplate[openWin.rowIndex]['columns'][i].dataField;
  		       datagridColumn.labelFunction = columnTemplate[openWin.rowIndex]['columns'][i].labelFunction;
  		       datagridColumn.headerText = columnTemplate[openWin.rowIndex]['columns'][i].headerText;
  		       datagridColumn.width = columnTemplate[openWin.rowIndex]['columns'][i].width;
  		       datagridColumn.visible = columnTemplate[openWin.rowIndex]['columns'][i].visible;
  		       tempColumns.push(datagridColumn);
  	       }
  	      grid.columns = tempColumns;
  	      folderTitle.text = columnTemplate[openWin.rowIndex]['name'];
  	      grid.dataProvider = dg1;
 		}
 		//删除文件夹窗口
 		var deleteWin:OpenWindow = new OpenWindow();
 		private function deleteHandler(evt:Event):void{
 			deleteWin = OpenWindow(PopUpManager.createPopUp(this,OpenWindow,true));
 			deleteWin.grid.dataProvider = this.columnTemplate;
 			deleteWin.winTitle = '删除文件夹';
 			deleteWin.chooseFlag = deleteWin.DELETE_FLAG;
 			deleteWin.addEventListener('DeleteFileEvent',deleteFileHandler);
 		}
 		private function deleteFileHandler(evt:Event):void{
 			this.columnTemplate.removeItemAt(deleteWin.rowIndex);
 		}
 		//修改datagrid列标题
 		var promptWin:PromptWindow = new PromptWindow();
 		private function changePromptHandler(evt:Event):void{
 			if(columnIndex == -1){
 				Alert.show("请先选择其中一列!");
 			}else{
 				promptWin=PromptWindow(PopUpManager.createPopUp( this, PromptWindow , true));
 		    	promptWin.addEventListener("ChangePromptEvent",savePromptHandler);
 			}
 			
 		}
 		private function savePromptHandler(evt:Event):void{
 			grid.columns[columnIndex].headerText = promptWin.prompt.text;
 		}
 		
 		//新建模板名称:弹出窗口
 		var win:FolderWindow = new FolderWindow();
 		private function newHandler(evt:Event):void{
 			win=FolderWindow(PopUpManager.createPopUp( this, FolderWindow , true));
 			win.addEventListener("NewFileEvent",newFileHandler);
 		}
 		private function newFileHandler(evt:Event):void{
 			templateName = win.fileName.text;
 			saveTemplate();
 		}
 		//保存模板名称
 		private function saveHandler(evt:Event):void{
 			if(templateName){
 				saveTemplate();
 			}else{
 				win=FolderWindow(PopUpManager.createPopUp( this, FolderWindow , true));
 			    win.addEventListener("NewFileEvent",newFileHandler);
 			}
 			
 		}
 		//显示隐藏列
 		var showFieldWin:ShowFieldWindow = new ShowFieldWindow();
 		private function showHandler(evt:Event):void{
 			showFieldWin=ShowFieldWindow(PopUpManager.createPopUp( this, ShowFieldWindow , true));
 			showFieldWin.grid.dataProvider = hideColumnArray;
 			showFieldWin.addEventListener("ShowFieldEvent",showFieldHandler);
 		}
 		private function showFieldHandler(evt:Event):void{
 			var datagridColumn:DataGridColumn = new DataGridColumn();
        	datagridColumn.visible=true;
        	datagridColumn.width = showFieldWin.columnData.width;
   	        datagridColumn.headerText = showFieldWin.columnData.headerText;
   	        datagridColumn.dataField = showFieldWin.columnData.dataField;
   	        //在指定列后面显示隐藏列(将grid.columns转换成ArrayCollection类型,利用ArrayCollection提供的方法实现隐藏列显示)
   	        var tempColumns:ArrayCollection = new ArrayCollection(grid.columns);
   	        tempColumns.addItemAt(datagridColumn,this.columnIndex+1);
   	        grid.columns = tempColumns.toArray();
   	        
   	        hideColumnArray.removeItemAt(showFieldWin.columnIndex);  	        
 		}
 		//加宽列
 		private function widenHandler(evt:Event):void{
 			grid.columns[this.columnIndex].width=grid.columns[this.columnIndex].width+20;
 		}
 		//缩短列宽
 		private function shrinkHandler(evt:Event):void{
 			grid.columns[this.columnIndex].width=grid.columns[this.columnIndex].width-20;
 		}
 		//保存模板
        private function saveTemplate():void{
        	var temp:Object=new Object();
  	        var tempColumns:Array=new Array();
  	        for(var i:Number=0; i<grid.columns.length; i++){
  		     var obj:Object=new Object();
  		     obj.headerText = grid.columns[i].headerText;
  		     obj.dataField = grid.columns[i].dataField;
  		     obj.width = grid.columns[i].width;
  		     obj.labelFunction = grid.columns[i].labelFunction;
  		     obj.visible = grid.columns[i].visible;
  		     obj.columnIndex = i;
  		     tempColumns.push(obj);
  	       }
            temp['name']=win.fileName.text;
  	        temp['columns']=tempColumns;
  
  	        columnTemplate.addItem(temp);
  	        win = new FolderWindow();
  	        templateName = null;
  	        Alert.show("Save template: "+temp['name']);
       }
      
  //隐藏列
  var hideColumnArray:ArrayCollection = new ArrayCollection(); //数据库保存时的deleteArray
   private function hideFieldHandler(evt:Event):void{
   	if(columnIndex==-1){
   		Alert.show("请先选择其中一列!");
   	}else{
   		//删除该column前先将其信息保存
   		var obj:Object=new Object();
   		obj.index = columnIndex;
   		obj.headerText = grid.columns[columnIndex].headerText;
        obj.dataField = grid.columns[columnIndex].dataField;
        obj.width = grid.columns[columnIndex].width;
        obj.labelFunction = grid.columns[columnIndex].labelFunction;
   		hideColumnArray.addItem(obj);
   		//通过Array转化成ArrayCollection实现column的移除
   		var a:ArrayCollection = new ArrayCollection(grid.columns);
   		a.removeItemAt(columnIndex);   		  		
   		grid.columns=a.toArray();
   		
   	}
   }
   //列右移
   private function moveRightHandler(evt:Event):void{
   	if(columnIndex == -1){
   		Alert.show("请选择其中一列!");
   	}else if(columnIndex+1 == grid.columns.length){
   		Alert.show("该列无法右移!");
   	}else{
   		var temp:Object=new Object();
   	    temp = grid.columns[this.columnIndex+1];
   	    var tempColumns:Array = grid.columns;
   	    tempColumns[columnIndex+1] = tempColumns[columnIndex];
     	tempColumns[columnIndex] = temp;
     	grid.columns = tempColumns;
   	} 	
   }
   //列左移
   private function moveLeftHandler(evt:Event):void{
   	if(columnIndex == -1){
   		Alert.show("请选择其中一列!");
   	}else if(columnIndex-1 == -1){
   	    Alert.show("该列无法左移!");
   	}else{
   		var temp:Object=new Object();
   	    temp = grid.columns[this.columnIndex];
    	var tempColumns:Array = grid.columns;
     	tempColumns[columnIndex] = tempColumns[columnIndex-1];
    	tempColumns[columnIndex-1] = temp;
    	grid.columns = tempColumns;
   	} 	
   }
    
 	]]-->
 </mx:Script>
	<mx:ArrayCollection id="dg">
		<mx:Object name="A" code="A1" des="A2" enabled="true"/>
		<mx:Object name="B" code="B1" des="B2" enabled="false"/>
		<mx:Object name="C" code="C1" des="C2" enabled="true"/>
		<mx:Object name="D" code="D1" des="D2" enabled="true"/>
	</mx:ArrayCollection>
	<mx:ArrayCollection id="dg1">
		<mx:Object name="A" code="A1" des="A2" enabled="true"/>
		<mx:Object name="B" code="B1" des="B2" enabled="false"/>
		<mx:Object name="C" code="C1" des="C2" enabled="true"/>
		<mx:Object name="D" code="D1" des="D2" enabled="true"/>
		<mx:Object name="E" code="E1" des="E2" enabled="true"/>
	</mx:ArrayCollection>
  <mx:DataGrid id="grid" dataProvider="{dg}" width="60%"
               x="193" y="142" itemClick="itemClickHandler(event)">
    <mx:columns>
        <mx:DataGridColumn headerText="Name" dataField="name"/>
        <mx:DataGridColumn headerText="Code" dataField="code"/>
        <mx:DataGridColumn headerText="Description" dataField="des"/>
        <mx:DataGridColumn headerText="Enabled" dataField="enabled"/>
    </mx:columns>
  </mx:DataGrid>
  <component:FolderComponent width="100%" />
  <mx:HBox x="193" y="112">
  	<mx:Image source="assets/folder.jpg" click="{dispatchEvent(new Event('OpenEvent'));}"/>
  	<mx:Label width="137" id="folderTitle" fontWeight="bold" />
  </mx:HBox>  
</mx:Application>

 

  2、FolderComponent.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
	<mx:Script>
		<!--[CDATA[
			import mx.events.MenuEvent;
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			
			public var menuProvider:ArrayCollection = new ArrayCollection();
			private function init():void{
				var obj:Object = new Object();
                obj.name="Folder";
                obj.data="folder";
                var objChild:ArrayCollection = new ArrayCollection();
                var objChild1:Object = new Object();
                objChild1.name="Open";
                objChild1.data="open";
                var objChild2:Object = new Object();
                objChild2.name="Save";
                objChild2.data="save";
                var objChild3:Object = new Object();
                objChild3.name="New File";
                objChild3.data="new";
                var objChild4:Object = new Object();
                objChild4.name="Change Prompt";
                objChild4.data="changePrompt";
                var objChild5:Object = new Object();
                objChild5.name="Hide Field";
                objChild5.data="hideField";
                var objChild6:Object = new Object();
                objChild6.name="Show Field";
                objChild6.data="showField";
                var objChild7:Object = new Object();
                objChild7.name="Widen Field";
                objChild7.data="widenField";
                var objChild8:Object = new Object();
                objChild8.name="Shrink Field";
                objChild8.data="shrinkField";
                 var objChild9:Object = new Object();
                objChild9.name="Delete";
                objChild9.data="delete";
                var objChild10:Object = new Object();
                objChild10.name="Move Right";
                objChild10.data="moveRight";
                var objChild11:Object = new Object();
                objChild11.name="Move Left";
                objChild11.data="moveLeft";
                objChild.addItem(objChild1);
                objChild.addItem(objChild2);
                objChild.addItem(objChild3);
                objChild.addItem(objChild9);
                objChild.addItem(objChild4);
                objChild.addItem(objChild5);
                objChild.addItem(objChild6);
                objChild.addItem(objChild7);
                objChild.addItem(objChild8);
                objChild.addItem(objChild10);
                objChild.addItem(objChild11);
                obj.children=objChild;
                var obj2:Object = new Object();
                obj2.name="Other";
                obj2.data="2";
                menuProvider.addItem(obj);
                menuProvider.addItem(obj2);
                menuProvider.refresh();
			}
			private function showMenu(event:MenuEvent):void{
				//为不同的选项发布不同的事件
				if(event.item.data=='open'){
					this.dispatchEvent(new Event('OpenEvent',true));
				}else if(event.item.data=='save'){
					this.dispatchEvent(new Event('SaveEvent',true));
				}else if(event.item.data=='new'){
					this.dispatchEvent(new Event('NewEvent',true));
				}else if(event.item.data=='delete'){
					this.dispatchEvent(new Event('DeleteEvent',true));
				}else if(event.item.data=='changePrompt'){
					this.dispatchEvent(new Event('ChangePromptEvent',true));
				}else if(event.item.data=='hideField'){
					this.dispatchEvent(new Event('HideEvent',true));
				}else if(event.item.data=='showField'){
					this.dispatchEvent(new Event('ShowEvent',true));
				}else if(event.item.data=='widenField'){
					this.dispatchEvent(new Event('WidenEvent',true));
				}else if(event.item.data=='shrinkField'){
					this.dispatchEvent(new Event('ShrinkEvent',true));
				}else if(event.item.data=='moveRight'){
					this.dispatchEvent(new Event('MoveRightEvent',true));
				}else if(event.item.data=='moveLeft'){
					this.dispatchEvent(new Event('MoveLeftEvent',true));
				}
			}
		]]-->
	</mx:Script>
	
	<mx:MenuBar id="folderMenu" dataProvider="{menuProvider}" width="100%" labelField="name" itemClick="showMenu(event)"/>
</mx:HBox>

 

3、FolderWindow.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" 
	showCloseButton="true" close="closeHandler()" layout="absolute" fontSize="13" title="创建文件夹">
  <mx:Script>
  	<!--[CDATA[
  		import mx.managers.PopUpManager;
  		private function closeHandler(){
  			PopUpManager.removePopUp(this);
  		}
  		private function save():void{
  			this.dispatchEvent(new Event('NewFileEvent',true));
  			closeHandler();
  		}
  	]]-->
  </mx:Script>
  <mx:VBox width="100%">
    <mx:Spacer width="100%" height="80"/>
  	<mx:FormItem width="100%" label="文件夹" labelWidth="80">
  		<mx:TextInput width="80%" id="fileName"/>
  	</mx:FormItem>
  </mx:VBox> 
  	<mx:Button label="确定" width="80" click="save()" x="290" y="186"/>
</mx:TitleWindow>

4、OpenWindow.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" 
	showCloseButton="true" close="closeHandler()" layout="absolute" fontSize="13" title="{winTitle}">
  <mx:Script>
  	<!--[CDATA[
  		import mx.events.ListEvent;
  		import mx.managers.PopUpManager;
  		import mx.controls.Alert;
  		
  		public var rowIndex:Number =-1;
  		public var columnData:Object=new Object();
  		public var chooseFlag:String;
  		public var OPEN_FLAG:String='OPEN';
  		public var DELETE_FLAG:String='DELETE';
  		public var winTitle:String;
  		private function closeHandler(){
  			PopUpManager.removePopUp(this);
  		}
  		private function save():void{
  			if(rowIndex == -1){
  				Alert.show("请先选择其中一行!");
  			}else{
  			  if(chooseFlag == OPEN_FLAG){
  			  	this.dispatchEvent(new Event('OpenFileEvent',true));
  			  }else if(chooseFlag == DELETE_FLAG){
  			  	this.dispatchEvent(new Event('DeleteFileEvent',true));
  			  }			    
  			    closeHandler();
  			}		
  		}
  		private function itemClickHandler(evt:ListEvent):void{
  			rowIndex = evt.rowIndex;
  		}
  	]]-->
  </mx:Script>
  <mx:VBox width="100%">
  	  <mx:DataGrid id="grid" itemClick="itemClickHandler(event)" width="80%">
  	  	<mx:columns>
  	  		<mx:DataGridColumn headerText="名称" dataField="name"/>
  	  	</mx:columns>
  	  </mx:DataGrid>
  </mx:VBox>  
  	<mx:Button label="确定" width="80" click="save()" x="290" y="224"/> 
</mx:TitleWindow>

5、PromptWindow.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" 
	showCloseButton="true" close="closeHandler()" layout="absolute" fontSize="13" title="更改提示">
  <mx:Script>
  	<!--[CDATA[
  		import mx.managers.PopUpManager;
  		private function closeHandler(){
  			PopUpManager.removePopUp(this);
  		}
  		private function save():void{
  			this.dispatchEvent(new Event('ChangePromptEvent',true));
  			closeHandler();
  		}
  	]]-->
  </mx:Script>
  <mx:VBox width="100%">
    <mx:Spacer width="100%" height="80"/>
  	<mx:FormItem width="100%" label="提示" labelWidth="80">
  		<mx:TextInput width="80%" id="prompt"/>
  	</mx:FormItem>
  </mx:VBox> 
  	<mx:Button label="确定" width="80" click="save()" x="290" y="186"/>
</mx:TitleWindow>

 

6、ShowFieldWindow.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" 
	showCloseButton="true" close="closeHandler()" layout="absolute" fontSize="13" title="显示隐藏列">
  <mx:Script>
  	<!--[CDATA[
  		import mx.events.ListEvent;
  		import mx.managers.PopUpManager;
  		import mx.controls.Alert;
  		
  		public var columnIndex:Number =-1;
  		public var columnData:Object=new Object();
  		private function closeHandler(){
  			PopUpManager.removePopUp(this);
  		}
  		private function save():void{
  			if(columnIndex == -1){
  				Alert.show("请先选择其中一行!");
  			}else{
  				this.columnData['headerText'] = grid.selectedItem.headerText;
  			    this.columnData['width'] = grid.selectedItem.width;
  			    this.columnData['dataField'] = grid.selectedItem.dataField;
  			    this.columnData['visible'] = grid.selectedItem
  			    this.dispatchEvent(new Event('ShowFieldEvent',true));
  			    closeHandler();
  			}		
  		}
  		private function itemClickHandler(evt:ListEvent):void{
  			columnIndex = evt.rowIndex;
  		}
  	]]-->
  </mx:Script>
  <mx:VBox width="100%">
  	  <mx:DataGrid id="grid" itemClick="itemClickHandler(event)" width="80%">
  	  	<mx:columns>
  	  		<mx:DataGridColumn headerText="列名" dataField="headerText"/>
  	  	</mx:columns>
  	  </mx:DataGrid>
  </mx:VBox>
  
  	<mx:Button label="确定" width="80" click="save()" x="290" y="224"/>
 
</mx:TitleWindow>

代码就是以下这些,下面展示一下主要功能:

1)原始状态

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)_object

 

2)调换列的顺序

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)_function_02

 

3)保存该模板

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)_datagrid_03

 

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)_flex_04

 

4)隐藏列

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)_flex_05

 

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)_import_06

 

5)保存模板

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)_import_07

 

6)修改列标题

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)_datagrid_08

 

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)_import_09

 

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)_datagrid_10

 

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)_import_11

 

7)在指定列后面显示隐藏列

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)_object_12

 

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)_import_13

 

8)打开文件夹(显示保存过的模板)

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)_datagrid_14

 

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)_datagrid_15

 

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)_flex_16

 

  9)删除已保存的模板

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)_datagrid_17

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)_object_18

 

FLEX实践—Datagrid 高级应用(模拟EBS Folder功能)_function_19

 

以上就是其中主要功能的演示图片,有兴趣的朋友可以自己试一下。

 

举报

相关推荐

0 条评论