DataGrid自定义右键

来源：互联网发布：华为p10 知乎编辑：程序博客网时间：2024/04/29 21:32

<?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>