Flex Datagrid 行列增加和删除(支持右键)

目前能实现的功能:
1.支持编辑表头;
2.删除添加自动更新序号;
3.支持右键操作DataGrid表;
4.支持dg表返回xml字符串

图例:


例子:
MXML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute"
	 creationComplete="init();">
	 <mx:Script source="main.as"/>
	<mx:Style>
		Application{
			font-size:12px;
		}
	</mx:Style>
</mx:Application>

main.as

	// ActionScript file
	import flash.events.ContextMenuEvent;
	import flash.events.MouseEvent;
	import flash.ui.ContextMenu;
	import flash.ui.ContextMenuItem;
	
	import mx.collections.ArrayCollection;
	import mx.containers.HBox;
	import mx.containers.VBox;
	import mx.controls.Alert;
	import mx.controls.Button;
	import mx.controls.DataGrid;
	import mx.controls.dataGridClasses.DataGridColumn;
	import mx.core.ClassFactory;
	import mx.events.DataGridEvent;
	import mx.events.FlexEvent;
	import mx.managers.PopUpManager;
	
	import net.diding.dgRender.DgHeaderTextRender;
	import net.diding.manager.EditDataGridManager;
	import net.diding.window.InsertDGColumnWindow;
	import net.diding.window.InsertDGRowWindow;
	
	
	
	private var MyDataDG:DataGrid;
	private var mainVBox:VBox;
	private var editDgManager:EditDataGridManager;
	private var myContextMenu:ContextMenu=new ContextMenu();

	private function init():void
	{
		mainVBox=new VBox();
		mainVBox.percentHeight=100;
		mainVBox.percentWidth=100;
		this.addChild(mainVBox)
	
		createDataGrid(mainVBox)
	
		var controlBox:HBox=new HBox();
		controlBox.percentWidth=100;
		mainVBox.addChild(controlBox);
	
		
		var ViewBtn:Button=new Button();
		ViewBtn.label="查看XML数据";
		controlBox.addChild(ViewBtn);
		ViewBtn.addEventListener(MouseEvent.CLICK, ViewHandler)
	}
	
	private function createDataGrid(MainVBox:VBox):void
	{
		MyDataDG=new DataGrid();
		
		editDgManager=new EditDataGridManager();
		editDgManager.taget=MyDataDG;

		MyDataDG.editable=true;
		MyDataDG.sortableColumns=false
		MyDataDG.percentWidth=100;
		MyDataDG.setStyle("verticalAlign", "middle")
		MyDataDG.columns=myGridcolumns();
		MainVBox.addChild(MyDataDG);
		ShowList();
	}
	
	private function addDataGridMenuItems():void
	{
		myContextMenu.hideBuiltInItems();
		var MenuList:Array=["删除行", "删除列", "插入行", "插入列"];
		var separatorBeforeArray:Array=[true, false, true, false];
	
		for (var j:int=0; j < MenuList.length; j++){
			var item:ContextMenuItem=new ContextMenuItem(MenuList[j], separatorBeforeArray[j]);
			item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, MenuItemSelectHandler);
			myContextMenu.customItems.push(item);
		}
	}
	
	private function MenuItemSelectHandler(event:ContextMenuEvent):void{
		var CaptionString:String=event.target.caption;
		trace(CaptionString);
		switch (CaptionString)
		{
			case "删除行":
			editDgManager.DelRow();
			break;
			
			case "删除列":
			editDgManager.DelColumn();
			break;
			
			case "插入行":
			var InsertRowWindow:InsertDGRowWindow=InsertDGRowWindow(PopUpManager.createPopUp(this,InsertDGRowWindow, false));
			InsertRowWindow.title="-->插入行设置";
			InsertRowWindow.getWinArg(editDgManager)
			break;
			
			case "插入列":
			var InsertColWindow:InsertDGColumnWindow=InsertDGColumnWindow(PopUpManager.createPopUp(this,InsertDGColumnWindow, false));
			InsertColWindow.title="-->插入列设置";
			InsertColWindow.getWinArg(editDgManager)
			break;
	
		}
	}
	//此项数据可以动态创建
	private var HeadArray:Array=["姓名", "学号", "性别"];
	private var arDatas:ArrayCollection;
	private function myGridcolumns():Array
	{
		var cols:Array=MyDataDG.columns;
		//锁定的order
		var ID_DC:DataGridColumn=new DataGridColumn();
		ID_DC.editable=false;
		ID_DC.draggable=false;
		ID_DC.headerText="序号"
		ID_DC.dataField="ID";
		ID_DC.setStyle("textAlign", "center");
		ID_DC.width=45;
		cols.push(ID_DC)
		//根据headerArray建立DataGridColumn
		for (var m:int=0; m < HeadArray.length; m++)
		{
			var ShowID_DC:DataGridColumn=new DataGridColumn();
			ShowID_DC.editable=true;
			ShowID_DC.draggable=false;
			ShowID_DC.headerText=HeadArray[m];
			ShowID_DC.dataField=HeadArray[m];
			ShowID_DC.headerRenderer=new ClassFactory(DgHeaderTextRender);
			ShowID_DC.setStyle("textAlign", "center");
			cols.push(ShowID_DC)
		}
		return cols;
	}
	
	private function ShowList():void
	{
		arDatas=new ArrayCollection();
		arDatas.removeAll();
		for (var i:int=0; i < HeadArray.length; i++)
		{
			var names:String=HeadArray[i];
			var obj:Object=new Object();
			var show_num:Number=Number(i + 1);
			if (show_num < 10)
			{
				obj.ID="No.0" + show_num;
			}else{
				obj.ID="No." + show_num;
			}
			obj.names=HeadArray[i];
			arDatas.addItem(obj)
	
		}
		
		editDgManager.arData=arDatas;
		MyDataDG.dataProvider=arDatas;
	
		MyDataDG.addEventListener(DataGridEvent.ITEM_FOCUS_OUT, clearMenuHandler);
		MyDataDG.addEventListener(DataGridEvent.ITEM_FOCUS_IN, setMenuHandler);
	}
	
	private function setMenuHandler(event:DataGridEvent):void
	{
		editDgManager.SelColumnIndex=event.columnIndex;
		MyDataDG.contextMenu=myContextMenu;
		addDataGridMenuItems();
		
	}
	
	private function clearMenuHandler(event:DataGridEvent):void
	{
		MyDataDG.contextMenu=null;
	}

	private function ViewHandler(event:MouseEvent):void{
		var xmlStr:String=editDgManager.ViewXML();
		Alert.show(xmlStr)
	}

评论

4 楼 terryang 2011-08-09  

你的EditDataGridManager在哪啊    

3 楼 marcucuckoo 2010-09-26  

博主，谢谢，太好了

2 楼 diding 2009-03-10  

其实也差不多,个人习好;
我比较喜欢全用AS来构架,阅读起来顺眼,呵呵
PS:
用AS定义的module通常会比mxml的module少10KB左右(但是有些类和组件会在runtime时提示找不到(我用module加载module时发现的,这就是为什么会小提源故吧,),这样,只需在main.as 定义一下就可以了,(常见的有datagrid,NumericStepper,TabNavigator,comboBox和DividedBox等)

1 楼 chenguo 2009-03-09  

Thanks!还有一个问题想问你：注意到你的组件全是用.as文件写好的，那么如果是用.mxml写好的，有什么不同吗，是不是效率问题？我自己也不太明白，望指教。