6.3.启动DataGrid多列排序
本章用到的 Flex3中文教程--homesforsale.xml文件
6.3.1. 问题
我想启动多列排序功能
6.3.2. 解决办法
使用AdvancedDataGrid 控件的AdvancedDataGridColumn 提供多列排序支持
6.3.3. 讨论
AdvancedDataGrid 控件内建支持多列排序。为了演示，下面的例子代码修改了上一节的例子，用AdvancedDataGrid 和AdvancedDataGridColumn 代替DataGrid 和DataGridColumn ，AdvancedDataGrid 支持两种多列排序方式。默认为sortExpertMode=false，允许用户点击列表头作为主要排序方式，第二排序是通过点击多列排序区域(表头的右边)实现的。下面的例子使用专家模式sortExpertMode=false，也就是点击列表头作为主要排序次要排序是右击列表头，
6.3.1. 问题
我想启动多列排序功能
6.3.2. 解决办法
使用AdvancedDataGrid 控件的AdvancedDataGridColumn 提供多列排序支持
6.3.3. 讨论
AdvancedDataGrid 控件内建支持多列排序。为了演示，下面的例子代码修改了上一节的例子，用AdvancedDataGrid 和AdvancedDataGridColumn 代替DataGrid 和DataGridColumn ，AdvancedDataGrid 支持两种多列排序方式。默认为sortExpertMode=false，允许用户点击列表头作为主要排序方式，第二排序是通过点击多列排序区域(表头的右边)实现的。下面的例子使用专家模式sortExpertMode=false，也就是点击列表头作为主要排序次要排序是右击列表头，
+展开
-XML
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="initApp()">
<mx:HTTPService id="srv" url="assets/homesforsale.xml"
resultFormat="object"
result="onResult(event)"/>
<mx:AdvancedDataGrid id="grid"
width="100%"
height="100%"
sortExpertMode="true"
dataProvider="{homesForSale}">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Total No."
dataField="total"/>
<mx:AdvancedDataGridColumn headerText="City"
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.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;
}
}
]]>
</mx:Script>
</mx:Application>
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="initApp()">
<mx:HTTPService id="srv" url="assets/homesforsale.xml"
resultFormat="object"
result="onResult(event)"/>
<mx:AdvancedDataGrid id="grid"
width="100%"
height="100%"
sortExpertMode="true"
dataProvider="{homesForSale}">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Total No."
dataField="total"/>
<mx:AdvancedDataGridColumn headerText="City"
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.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;
}
}
]]>
</mx:Script>
</mx:Application>
加支付宝好友偷能量挖...
