6.8.啟動DataGrid拖拽功能

2024-04-27 13:51:58

字體：大中小

來源：轉載

供稿：網友

6.8.1. 問題
我想啟動DataGrid 數據項拖動功能，以便用戶能拖動它們到其他表格上。
6.8.2. 解決辦法
設置源DataGrid 的dragEnabled 為true，和目標DataGrid 的dropEnabled 屬性為true。
6.8.3. 討論
要啟動基于列表的控件比如DataGrid 的拖拽功能，最簡單的方法就是設置相應的屬性為true，因為Flex 框架將負責所有相關的底層工作。例如，下面的例子設置AdvancedDataGrid的dragEnabled 屬性為true，意思就是支持該控件的數據項能被拖動到控件之外的地方。而DataGrid 的dropEnabled 屬性設置為true，表示該控件可接受被拖進來的數據項。另外一個屬性即dragMoveEnabled 將影響拖動效果。

對于非列表型控件或需自定義拖拽操作的，Flex 3 框架為此提供了DragManager，它將在第十章, "拖拽操作" 中介紹。

-XML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal" creationComplete="initApp()">
<mx:HTTPService id="srv" url="assets/homesforsale.xml"
resultFormat="object" result="onResult(event)"/>
<mx:AdvancedDataGrid id="grid" width="100%" height="100%"
sortableColumns="false"
dragEnabled="true"
dataProvider="{homesForSale}">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Total No."
dataField="total"/>
<mx:AdvancedDataGridColumn headerText="City"
sortable="false" dataField="city"/>
<mx:AdvancedDataGridColumn headerText="State"
dataField="state"/>
</mx:columns>
</mx:AdvancedDataGrid>
<mx:DataGrid width="100%" height="100%"
dropEnabled="true">
<mx:columns>
<mx:DataGridColumn headerText="Total No."
dataField="total"/>
<mx:DataGridColumn headerText="City" sortable="false"
dataField="city"/>
<mx:DataGridColumn headerText="State"
dataField="state"/>
</mx:columns>
</mx:DataGrid>
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var homesForSale:ArrayCollection;
private function initApp():void {
this.srv.send();
}
private function onResult(evt:ResultEvent):void {
this.homesForSale = evt.result.data.region;
}

]]>
</mx:Script>
</mx:Application>