<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="creationCompleteHandler(event)">
<fx:Declarations>
<mx:Move id="moveHidden" xTo="-500" />
<mx:Move id="moveShown" xFrom="500" xTo="0" />
<mx:ArrayCollection id="dataProvider" >
<fx:Object name="name-001" email="email@001.com" address="address-001" />
<fx:Object name="name-002" email="email@002.com" address="address-002" />
<fx:Object name="name-003" email="email@003.com" address="address-003" />
<fx:Object name="name-004" email="email@004.com" address="address-004" />
</mx:ArrayCollection>
<fx:Object id="editItem" name="{input_name.text}" email="{input_email.text}" address="{input_address.text}" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.events.FlexEvent;
private var gridMenu:ContextMenu;
private var createMenuItem:ContextMenuItem;
private var editorMenuItem:ContextMenuItem;
private var deleteMenuItem:ContextMenuItem;
private var refreshMenuItem:ContextMenuItem;
private var selectionMenuItem:ContextMenuItem;
protected function creationCompleteHandler(event:FlexEvent):void{
createMenuItem = new ContextMenuItem("添加新项目");
createMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onMenuItemSelectHandler);
editorMenuItem = new ContextMenuItem("编辑所选项");
editorMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onMenuItemSelectHandler);
deleteMenuItem = new ContextMenuItem("删除所选项");
deleteMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onMenuItemSelectHandler);
refreshMenuItem = new ContextMenuItem("刷新列表");
refreshMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onMenuItemSelectHandler);
selectionMenuItem = new ContextMenuItem("设置为单选模式", true);
selectionMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onMenuItemSelectHandler);
gridMenu = new ContextMenu;
gridMenu.hideBuiltInItems();
gridMenu.customItems = [createMenuItem, editorMenuItem, deleteMenuItem, refreshMenuItem, selectionMenuItem];
gridMenu.addEventListener(ContextMenuEvent.MENU_SELECT, onMenuSelectHandler);
grid.contextMenu = gridMenu;
}
protected function onMenuItemSelectHandler(event:ContextMenuEvent):void{
switch(event.target){
case createMenuItem:
createItemHandler();
break;
case editorMenuItem:
editItemHandler();
break;
case deleteMenuItem:
deleteItemsHandler();
break;
case refreshMenuItem:
grid.dataProvider = dataProvider;
break;
case selectionMenuItem:
grid.allowMultipleSelection = !grid.allowMultipleSelection;
grid.selectedIndex = -1;
break;
}
}
protected function onMenuSelectHandler(event:ContextMenuEvent):void{
var selectItems:int = grid.selectedItems.length;
editorMenuItem.enabled = (selectItems == 1);
deleteMenuItem.enabled = (selectItems > 0);
selectionMenuItem.caption = grid.allowMultipleSelection ? "设置为单选模式" : "设置为多选模式";
}
protected function createItemHandler():void{
grid.visible = false;
form.visible = true;
editItem = {name:'', email:'', address:''};
}
protected function editItemHandler():void{
if (grid.selectedItem){
grid.visible = false;
form.visible = true;
editItem = grid.selectedItem;
}
}
protected function deleteItemsHandler():void{
var items:Array = grid.selectedItems;
var delFunction:Function = function (event:CloseEvent):void{
if (event.detail != Alert.YES) return;
for (var i:int = 0; i < items.length; i++){
var index:int = dataProvider.getItemIndex(items[i]);
if (index != -1){
dataProvider.removeItemAt(index);
}
}
}
Alert.yesLabel = "确定"; Alert.cancelLabel = "取消";
Alert.show("确定要删除选中的" + items.length + "项数据吗?", "确认删除", Alert.YES|Alert.CANCEL, null, delFunction, null, Alert.CANCEL);
}
protected function saveHandler():void{
if (!dataProvider.contains(editItem)){
dataProvider.addItem(editItem);
}
cancelHandler();
}
protected function cancelHandler():void{
form.visible = false;
grid.visible = true;
}
]]>
</fx:Script>
<mx:DataGrid id="grid" width="100%" height="100%" showEffect="{moveShown}" hideEffect="{moveHidden}" dataProvider="{dataProvider}" allowMultipleSelection="true" doubleClickEnabled="true" doubleClick="{editItemHandler()}" >
<mx:columns>
<mx:DataGridColumn headerText="姓名" dataField="name"/>
<mx:DataGridColumn headerText="邮箱" dataField="email"/>
<mx:DataGridColumn headerText="地址" dataField="address"/>
</mx:columns>
</mx:DataGrid>
<mx:VBox id="form" horizontalAlign="center" verticalAlign="middle"
width="100%" height="100%" visible="false"
showEffect="{moveShown}" hideEffect="{moveHidden}"
backgroundColor="#FFFFFF">
<mx:Form>
<mx:FormItem label="姓名" horizontalAlign="center" width="100%" >
<mx:TextInput id="input_name" text="{editItem.name}" />
</mx:FormItem>
<mx:FormItem label="邮箱" horizontalAlign="center" width="100%" >
<mx:TextInput id="input_email" text="{editItem.email}" />
</mx:FormItem>
<mx:FormItem label="地址" horizontalAlign="center" width="100%" >
<mx:TextInput id="input_address" text="{editItem.address}" />
</mx:FormItem>
<mx:FormItem direction="horizontal" horizontalAlign="center" width="100%">
<mx:Button label="保存"
enabled="{!(input_name.text == '' || input_email.text == '' || input_address.text == '')}"
click="{saveHandler()}" />
<mx:Button label="取消" click="{cancelHandler()}" />
</mx:FormItem>
</mx:Form>
</mx:VBox>
</s:Application>
DataGrid自定义右键
最新推荐文章于 2023-02-24 08:22:39 发布