小小菜鸟的web菜园子

web开发学习。好记性不如烂笔头。每天进步一点点!

导航

拖拽删除DataGrid中的某一项。

DragManager的学习、使用。
示例:


代码:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/16/removing-items-from-a-flex-datagrid-control-using-the-dragmanager-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout
="vertical"
        verticalAlign
="middle"
        backgroundColor
="white">

    
<mx:Script>
        
<![CDATA[
            import mx.core.IUIComponent;
            import mx.events.DragEvent;
            import mx.managers.DragManager;

            private function image_dragEnter(evt:DragEvent):void {
                var obj:IUIComponent = IUIComponent(evt.currentTarget);
                DragManager.acceptDragDrop(obj);
            }

            private function image_dragDrop(evt:DragEvent):void {
                var item:Object = dataGrid.selectedItem;
                var idx:int = arrColl.getItemIndex(item);
                arrColl.removeItemAt(idx);
            }
        
]]>
    
</mx:Script>

    
<mx:ArrayCollection id="arrColl">
        
<mx:source>
            
<mx:Array>
                
<mx:Object c1="r1.c1" c2="r1.c2" c3="r1.c3" c4="r1.c4"/>
                
<mx:Object c1="r2.c1" c2="r2.c2" c3="r2.c3" c4="r2.c4"/>
                
<mx:Object c1="r3.c1" c2="r3.c2" c3="r3.c3" c4="r3.c4"/>
                
<mx:Object c1="r4.c1" c2="r4.c2" c3="r4.c3" c4="r4.c4"/>
                
<mx:Object c1="r5.c1" c2="r5.c2" c3="r5.c3" c4="r5.c4"/>
                
<mx:Object c1="r6.c1" c2="r6.c2" c3="r6.c3" c4="r6.c4"/>
                
<mx:Object c1="r7.c1" c2="r7.c2" c3="r7.c3" c4="r7.c4"/>
                
<mx:Object c1="r8.c1" c2="r8.c2" c3="r8.c3" c4="r8.c4"/>
                
<mx:Object c1="r9.c1" c2="r9.c2" c3="r9.c3" c4="r9.c4"/>
            
</mx:Array>
        
</mx:source>
    
</mx:ArrayCollection>

    
<mx:Panel title="Drag DataGrid item over the trash icon to remove item"
            styleName
="opaquePanel">
        
<mx:DataGrid id="dataGrid"
                dataProvider
="{arrColl}"
                dragEnabled
="true"
                width
="400"
                rowCount
="6"
                verticalScrollPolicy
="on">
            
<mx:columns>
                
<mx:DataGridColumn dataField="c1"
                        headerText
="Column 1" />
                
<mx:DataGridColumn dataField="c2"
                        headerText
="Column 2" />
                
<mx:DataGridColumn dataField="c3"
                        headerText
="Column 3" />
                
<mx:DataGridColumn dataField="c4"
                        headerText
="Column 4" />
            
</mx:columns>
        
</mx:DataGrid>

        
<mx:ControlBar horizontalAlign="right">
            
<mx:Image id="image"
                    source
="@Embed('assets/iconUninstall.png')"
                    dragDrop
="image_dragDrop(event);"
                    dragEnter
="image_dragEnter(event);" />
        
</mx:ControlBar>
    
</mx:Panel>

</mx:Application>

posted on 2008-05-04 20:38  『小小菜鸟』  阅读(1166)  评论(0编辑  收藏  举报