`

Flex 中的DataGrid添加右键菜单

阅读更多
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
				verticalAlign="middle"
				backgroundColor="white"
				creationComplete="init()">
	
	<mx:Script>
		<![CDATA[
			
			import mx.controls.Alert;
			
			
			[Bindable]
			private var cm:ContextMenu;
			
			private var alert:Alert;
			
			private function init():void {
				var cmi:ContextMenuItem = new ContextMenuItem("菜单项", true);
				cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_menuItemSelect);
				
				var cmi1:ContextMenuItem = new ContextMenuItem("菜单项1", false);
				cmi1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_menuItemSelect1);
				
				cm = new ContextMenu();
				
				cm.hideBuiltInItems();
				//添加菜单项
				cm.customItems = [cmi,cmi1];
				cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);



			}
			
			private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
				dataGrid.selectedIndex = lastRollOverIndex;
			}



			
			
			
			private function contextMenuItem_menuItemSelect(evt:ContextMenuEvent):void {
				var obj:Object = dataGrid.selectedItem;



				alert = Alert.show("Property A: " + obj.@propertyA + "\n" + "Property B: " + obj.@propertyB,""+ obj.@label, Alert.OK);
			}
			private function contextMenuItem_menuItemSelect1(evt:ContextMenuEvent):void {
				var obj:Object = dataGrid.selectedItem;



				alert = Alert.show("Property A: " + obj.@propertyA + "\n" + "Property B: " + obj.@propertyB, ""+ obj.@label, Alert.OK);
			}
			
			
		]]>
	</mx:Script>
	
	<mx:XML id="itemsXML">
		<items>
			<item label="Item 1" data="i001" propertyA="Item 1.A" propertyB="Item 1.B" />
			<item label="Item 2" data="i002" propertyA="Item 2.A" propertyB="Item 2.B" />
			<item label="Item 3" data="i003" propertyA="Item 3.A" propertyB="Item 3.B" />
	 
			<item label="Item 4" data="i004" propertyA="Item 4.A" propertyB="Item 4.B" />
			<item label="Item 5" data="i005" propertyA="Item 5.A" propertyB="Item 5.B" />
			<item label="Item 6" data="i006" propertyA="Item 6.A" propertyB="Item 6.B" />
			<item label="Item 7" data="i007" propertyA="Item 7.A" propertyB="Item 7.B" />
			<item label="Item 8" data="i008" propertyA="Item 8.A" propertyB="Item 8.B" />
	 
		</items>
	</mx:XML>
	
	<mx:Number id="lastRollOverIndex" />
	
	<mx:DataGrid id="dataGrid"
				 width="400"
				 dataProvider="{itemsXML.item}"
				 contextMenu="{cm}"



				 itemRollOver="lastRollOverIndex = event.rowIndex"


>
		<mx:columns>
			<mx:DataGridColumn id="labelCol"
							   dataField="@label"
							   headerText="Label:" />
			
			<mx:DataGridColumn id="propACol"
							   dataField="@propertyA"
							   headerText="Property A:" />
			
			<mx:DataGridColumn id="propBCol"
							   dataField="@propertyB"
							   headerText="Property B:" />
		</mx:columns>
	</mx:DataGrid>
	
	<mx:Label text="{dataGrid.selectedItem.@label}" />
	
</mx:Application>

 

 

 

 

1、第一步:在DataGrid中设置右键的浮动菜单:

 contextMenu="{cm}"


 

2、itemRollOver事件设置选择的行下标

itemRollOver="lastRollOverIndex = event.rowIndex"





 

 

3、在init()中设置DataGrid的选择事件,把行下标设置给datagrid的selectIndex

 

 

    //菜单添加选择事件

cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);



 

   //选择事件把行下标设置给datagrid的selectIndex

private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
				dataGrid.selectedIndex = lastRollOverIndex;
			}


 

 

4、在其它的菜单事件中获取DataGrid的选择行的记录

var obj:Object = dataGrid.selectedItem;


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    Flex自定义右键菜单

    在Flex开发中,自定义右键菜单是一项常见的需求,它能为用户界面提供更丰富的交互体验。Flex是一款基于ActionScript 3.0的开源框架,主要用于构建富互联网应用程序(RIA)。在这里,我们将深入探讨如何在Flex中实现...

    在Flex中给datagrid添加右键菜单项的具体实现

    在Flex开发中,给DataGrid添加右键菜单项是一个常见的需求,这允许用户通过鼠标右键触发特定的操作,如编辑、删除或自定义功能。以下是一个详细的教程,讲解如何在Flex项目中实现这一功能。 首先,我们需要创建一个...

    Flex4.5导入Excel/csv到DataGrid及DataGrid右键

    本知识点将详细介绍如何在Flex 4.5环境中将Excel和CSV文件导入到DataGrid中,以及如何自定义DataGrid选中行的右键菜单,从而提升用户界面的交互性和实用性。 首先,我们需要了解Flex 4.5中的DataGrid组件。DataGrid...

    Flex-DataGrid源码及资料

    1. 鼠标右键:在Flex DataGrid中添加鼠标右键菜单,可以为用户提供额外的操作选项。例如,用户可以通过右键点击某一列来执行排序、隐藏或显示列、导出数据等操作。这通常需要自定义事件监听器,并创建一个...

    Flex4实现的右键完整功能

    "Flex4实现的右键完整功能"这个主题聚焦于如何利用Adobe Flex 4框架来增强数据网格(DataGrid)组件的交互性,特别是通过鼠标右键菜单实现数据的添加、删除和修改操作。Flex 4是ActionScript 3.0基础上的一个强大的...

    FLEX datagrid应用实例

    4. 菜单和工具提示:为行或列添加右键菜单,或为单元格提供额外信息的工具提示。 5. 数据验证:在用户编辑数据时进行实时验证,确保输入符合预期格式。 通过这些实例,初学者可以了解并掌握Flex DataGrid的基础用法...

    Flex3 DataGrid拖拽到ClumnChart动态显示图表实现代码

    - 为了增加用户体验,我们可以为ColumnChart添加一个右键菜单,允许用户清空图表。`initMenu`函数初始化这个菜单,并添加一个“清空图表”的选项。 - `clearAction`函数:当用户选择“清空图表”时,它会被触发,...

    flex 小节.rar

    如远程对象的配置, flex 默认右键 菜单的屏蔽, datagrid 的渲染器, 编辑器。 tip 提示的重写。 Menu 的默认样式改写, 比如把分割线变细,flex 组件的生命周期,flex皮肤样式,动态图片的加载, 文件的上传于下载...

    flex组件介绍

    Flex控件的使用通常遵循以下步骤:创建控件实例、设置属性、添加事件监听器、将控件添加到容器中。例如,要创建一个按钮并添加到界面上,首先需要实例化按钮组件,然后通过设置其属性来定义按钮的样式和行为,接着...

    自定义可增删改的grid表

    我们可以添加按钮或右键菜单来触发这些操作,并在用户确认后执行。 6. **样式和皮肤**:为了使DataGrid符合项目需求,我们可能需要自定义其样式和皮肤,包括字体、颜色、边框等。Flex提供了强大的皮肤系统,允许...

    构建Flex4为前端的Java EE项目

    8. **添加DataGrid控件**:切换到Flash视图,并向sampleApp.mxml中拖入DataGrid控件以备后续使用。 #### 第三步:运行sampleApp项目 完成项目的创建后,可以进行项目运行测试: 1. **切换到Java EE视图**:确保...

    flex3的cookbook书籍完整版dpf(包含目录)

    为List创建右键菜单 5.13节.自定义List被选中项的外观 第六章. DataGrid和高级DataGrid(179) 6.1节. 创建DataGrid自定义列 6.2节. 为DataGrid列设定排序函数 6.3节. 启动DataGrid多列排序 6.4节. 过滤DataGrid数据...

Global site tag (gtag.js) - Google Analytics