Flex DataGrid 编辑实例源码
源码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="vertical" horizontalAlign="center" xmlns:mx=" http://www.adobe.com/2006/mxml" > <mx:Script> <![CDATA[ import mx.events.DataGridEventReason; import mx.controls.NumericStepper; import mx.controls.TextInput; import mx.core.UIComponent; import mx.containers.HBox; import mx.controls.DataGrid; import mx.events.DataGridEvent; // 屏蔽第一列的编辑事件 private function onItemEditBeginning(event:DataGridEvent):void{ if(event.columnIndex==0) event.preventDefault(); } private function onItemEditBegin(event:DataGridEvent):void{ // 阻止默认侦听器执行 event.preventDefault(); var dg:DataGrid = event.currentTarget as DataGrid; // 创建项目编辑器实例 dg.createItemEditor(event.columnIndex,event.rowIndex); var editorInstance:UIComponent = dg.itemEditorInstance as UIComponent; var tiLabel:TextInput = editorInstance.getChildAt(0) as TextInput; tiLabel.percentWidth = 50; tiLabel.text = dg.editedItemRenderer.data.label; var numStepper:NumericStepper = editorInstance.getChildAt(1) as NumericStepper; numStepper.percentWidth = 50; numStepper.value = dg.editedItemRenderer.data.price; } private function onItemEditEnd(event:DataGridEvent):void{ if (event.reason == DataGridEventReason.CANCELLED){ // 如果取消编辑,不更新数据 return; } // 阻止默认侦听器执行 event.preventDefault(); var dg:DataGrid = event.currentTarget as DataGrid; var editorInstance:UIComponent = dg.itemEditorInstance as UIComponent; var tiLabel:TextInput = editorInstance.getChildAt(0) as TextInput; var numStepper:NumericStepper = editorInstance.getChildAt(1) as NumericStepper; var newLabel:String = tiLabel.text; var newPrice:Number = numStepper.value; // 取得旧数据 var oldLabel:String = dg.editedItemRenderer.data.label; var oldPrice:Number = dg.editedItemRenderer.data.price; // 判断label是否为空,price是否小于50 if(newLabel=="" || newPrice<50){ //销毁项目编辑器并返回,不更新数据 dg.destroyItemEditor(); return; } // 为项目渲染器设置新数据 dg.editedItemRenderer.data.label = newLabel; dg.editedItemRenderer.data.price = newPrice; dg.destroyItemEditor(); }
]]>
</mx:Script> <mx:Model id="myData"> <items> <item> <icon>assets/icon1.png</icon> <label>Item1</label> <price>60.0</price> </item> <item> <icon>assets/icon2.png</icon> <label>Item2</label> <price>75.0</price> </item> <item> <icon>assets/icon3.png</icon> <label>Item3</label> <price>60.0</price> </item> <item> <icon>assets/icon4.png</icon> <label>Item4</label> <price>70.0</price> </item> </items> </mx:Model> <mx:DataGrid width="400" dataProvider="{myData.item}" editable="true" itemEditBeginning="onItemEditBeginning(event)" itemEditBegin="onItemEditBegin(event)" itemEditEnd="onItemEditEnd(event)"> <mx:columns> <mx:DataGridColumn itemRenderer="mx.controls.Image" dataField="icon"/> <mx:DataGridColumn headerText="price"> <!-- 在项目渲染器中使用Label组件显示label和price值 --> <mx:itemRenderer> <mx:Component> <mx:Label text="{data.label}:${data.price}"/> </mx:Component> </mx:itemRenderer> <mx:itemEditor> <mx:Component> <!-- 在项目编辑器中使用TextInput和NumericStepper组件 --> <mx:HBox horizontalScrollPolicy="off"> <mx:TextInput/> <mx:NumericStepper minimum="0" maximum="100"/> </mx:HBox> </mx:Component> </mx:itemEditor> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="vertical" horizontalAlign="center" xmlns:mx=" http://www.adobe.com/2006/mxml" > <mx:Script> <![CDATA[ import custom.MyEditor; import mx.events.DataGridEventReason; import mx.controls.NumericStepper; import mx.controls.TextInput; import mx.controls.DataGrid; import mx.events.DataGridEvent; // 屏蔽第一列的编辑事件 private function onItemEditBeginning(event:DataGridEvent):void{ if(event.columnIndex==0) event.preventDefault(); } private function onItemEditEnd(event:DataGridEvent):void{ if (event.reason == DataGridEventReason.CANCELLED){ return; } event.preventDefault(); var dg:DataGrid = event.currentTarget as DataGrid; var editorInstance:MyEditor = dg.itemEditorInstance as MyEditor; // 取得项目编辑器中的新数据 var newLabel:String = editorInstance.newLabel var newPrice:Number = editorInstance.newPrice // 检查数据是否符合要求 if(newLabel=="" || newPrice<50){ // 销毁项目编辑器并返回,不更新数据 dg.destroyItemEditor(); return; } // 为项目渲染器设置新数据 dg.editedItemRenderer.data.label = newLabel; dg.editedItemRenderer.data.price = newPrice; dg.destroyItemEditor(); } ]]> </mx:Script> <mx:Model id="myData"> <items> <item> <icon>assets/icon1.png</icon> <label>Item1</label> <price>60.0</price> </item> <item> <icon>assets/icon2.png</icon> <label>Item2</label> <price>75.0</price> </item> <item> <icon>assets/icon3.png</icon> <label>Item3</label> <price>60.0</price> </item> <item> <icon>assets/icon4.png</icon> <label>Item4</label> <price>70.0</price> </item> </items> </mx:Model> <mx:DataGrid width="300" dataProvider="{myData.item}" editable="true" itemEditBeginning="onItemEditBeginning(event)" itemEditEnd="onItemEditEnd(event)"> <mx:columns> <mx:DataGridColumn itemRenderer="mx.controls.Image" dataField="icon" width="100"/> <mx:DataGridColumn headerText="price" itemEditor="custom.MyEditor" editorXOffset="5" editorYOffset="0" editorHeightOffset="40"> <!-- 在项目渲染器中使用Label组件显示label和price值 --> <mx:itemRenderer> <mx:Component> <mx:Label text="{data.label}:${data.price}"/> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </mx:Application> |