6.7.AdvancedDataGrid數據項選擇

2024-04-27 13:51:58

字體：大中小

來源：轉載

供稿：網友

6.7.1. 問題
我想編程實現選擇AdvancedDataGrid 多個單元格
6.7.2. 問題
設置AdvancedDataGrid 的selectionMode 屬性為multipleCells 和selectedCells 屬性為object數組，該數組包含被選擇單元格的rowIndex 和columnIndex。
6.7.3. 討論
AdvancedDataGrid 控件對于選擇單元格提供了多種選項設置。selectionMode 屬性值有以下幾種選擇：
Multiple cells
Multiple rows
Single cell
Single row
None
要允許多個單元格被選擇，allowMultipleSelection 屬性也需要被設置為true。

下面的例子中，當用戶選擇City 列中的復選框時，該列的所有單元格都被選中。這個例子代碼建立上一節的例子之上。當city 列表頭的復選框被選擇時，AdvancedDataGrid 發出ColumnSelectedEvent 事件，由onColumnSelect 方法處理該事件。onColumnSelect 方法構造一個object 數組，每個對象都包含被選擇單元格的rowIndex 和cellIndex。這個例子選中了該列的所有單元格，最后把這個object 數組賦值給selectedCells 屬性。需要注意的是，如果表格顯示發生變化，則需要重新創建一個數組并賦值給selectedCells 屬性。想通過
grid.selectedCells.push 方法直接添加單元格到selectedCells 屬性是不行的，因為表格不會去檢測數組是否發生變化。

-XML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" creationComplete="initApp()">
<mx:HTTPService id="srv" url="assets/homesforsale.xml"
resultFormat="object" result="onResult(event)"/>
<mx:Form>
<mx:FormItem label="City">
<mx:TextInput id="cityFilter" change="applyFilter()"/>
</mx:FormItem>
</mx:Form>
<mx:AdvancedDataGrid id="grid" width="100%" height="100%"
sortExpertMode="true" dataProvider="{homesForSale}"
selectionMode="multipleCells"
creationComplete="assignListeners()">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Total No."
dataField="total"/>
<mx:AdvancedDataGridColumn headerText="City"
sortable="false"
headerRenderer="CheckBoxHeaderRenderer2" dataField="city"/>
<mx:AdvancedDataGridColumn headerText="State"
dataField="state"/>
<mx:AdvancedDataGridColumn headerText="Price Ranges
[<350K] [350K -600K] [>600K]"
dataField="range"
itemRenderer="RangeRenderer"
sortCompareFunction="sortRanges"/>
</mx:columns>
</mx:AdvancedDataGrid>
<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;
}
private function sortRanges(obj1:Object,
obj2:Object):int{
var value1:Number = obj1.range.range1;
var value2:Number = obj2.range.range1;
if(value1 < value2) {
return -1;
}
else if(value1 > value2){
return 1;
}
else {
return 0;
}
}
private function applyFilter():void {
if(this.homesForSale.filterFunction == null) {
this.homesForSale.filterFunction =
this.filterCities;
}
this.homesForSale.refresh();
}
private function filterCities(item:Object):Boolean {
var match:Boolean = true;
if(cityFilter.text != "") {
var city:String = item["city"];
var filter:String = this.cityFilter.text;
if(!city ||
city.toLowerCase().indexOf(filter.toLowerCase()) < 0) {
match = false;
}
}
return match;
}
private function assignListeners():void {
this.grid.addEventListener(ColumnSelectedEvent.COLUMN_SELECTED,
onColumnSelect);
}
private function
onColumnSelect(evt:ColumnSelectedEvent):void {
var selectedCells:Array = new Array();
var colIdx:int = evt.colIdx;
if(evt.isSelected) {
for(var i:int=0;i<this.homesForSale.length;i++) {
selectedCells.push({rowIndex:i,columnIndex:colIdx});
}
}
this.grid.selectedCells = selectedCells;
}

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