Flex DataGrid列排序無效

Question

我想按字母順序對這些關聯進行排序。 標簽功能位於列獲取值的位置下方。

private function setColumnLabel(item:Object, col:*):String
    {
        if(AssociationModel(item).service != null)
            return 
                    AssociationModel(item).service.serviceName
                    +"["+AssociationMoel(item).service.siServiceId+"]";           
        else
            return "";
 }



 <mx:DataGrid id="subLinearAssocGridInView" 
    width="600"
    top="30"
    left="12"
    editable="false"
    maxHeight="500"
    rowHeight="20"
    headerHeight="20">
<mx:columns>
<mx:DataGridColumn [Si_Service_Id]"
            headerText="Service                 
            editable="false"
            dataField="service"
            labelFunction="setColumnLabel"
            sortable="true"/>
</mx:columns>
</mx:DataGrid>

這里我嘗試使用sortabledecsending = true和sortabledecsending = true但它沒有效果

<mx:DataGridColumn
headerText="Service [Si_Service_Id]"
editable="false"
dataField="service"
labelFunction="setServiceColumnLabel"
sortabledecsending=true
sortable="true"/>

而且我也嘗試過使用sortCompareFunction。

public function doSortForField(field:String):Function
 {
 return function(obj1:Object, obj2:Object):int 
  {
return mx.utils.ObjectUtil.stringCompare(obj1[field],obj2[field],true);
                    }


   <mx:DataGrid>
     <mx:columns>
     <mx:DataGridColumn
     sortCompareFunction=”doSortForField(‘service’)”                    
     headerText=”service” dataField=”service” />
     </mx:columns>
     </mx:DataGrid>

但這也沒有效果。 請建議我失蹤的地方。 提前致謝。

Answer 1

您是否嘗試過對dataProvider內容進行排序？ 如果您使用的是Array，請使用Array.sort（） 。 如果您正在使用ArrayCollection，請使用其排序字段

Answer 2

你幾乎是對的，只是你錯過了一件事：

public function doSortForField(field:String, property:String):Function
    {
        return function (obj1:Object, obj2:Object):int
        {
            return mx.utils.ObjectUtil.stringCompare(obj1[field][property], obj2[field][property], true);
        }
    }

但是默認情況下它不會被排序 - 你必須點擊列標題來對它進行排序dec / acc。 請參閱以下結果代碼：

<?xml version="1.0"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            creationComplete="creationCompleteHandler(event)">
<mx:DataGrid id="subLinearAssocGridInView"
             width="600"
             top="30"
             left="12"
             editable="false"
             maxHeight="500"
             rowHeight="20"
             headerHeight="20"
             sortableColumns="true"
             >
    <mx:columns>
        <mx:DataGridColumn
        headerText="Service"
        editable="false"
        dataField="service"
        labelFunction="setColumnLabel"
        sortCompareFunction="doSortForField('service', 'serviceName')"
        />
    </mx:columns>
</mx:DataGrid>

<fx:Script><![CDATA[
    import mx.collections.ArrayCollection;
    import mx.events.FlexEvent;
    import mx.utils.ObjectUtil;

    private function creationCompleteHandler(event:FlexEvent):void
    {
        const mockData:ArrayCollection = new ArrayCollection([
            {service: {serviceName: "service1", siServiceId: "serviceId1"}},
            {service: {serviceName: "service2", siServiceId: "serviceId2"}},
            {service: {serviceName: "service3", siServiceId: "serviceId3"}},
            {service: {serviceName: "service4", siServiceId: "serviceId4"}}
        ]);
        subLinearAssocGridInView.dataProvider = mockData;
    }

    private function setColumnLabel(item:Object, col:*):String
    {
        if (item.service != null)
        {
            return item.service.serviceName + "[" + item.service.siServiceId + "]";
        }
        else
        {
            return "";
        }
    }

    public function doSortForField(field:String, property:String):Function
    {
        return function (obj1:Object, obj2:Object):int
        {
            return mx.utils.ObjectUtil.stringCompare(obj1[field][property], obj2[field][property], true);
        }
    }

    ]]></fx:Script>

如果您想應用默認排序：

 private function subLinearAssocGridInView_creationCompleteHandler(event:FlexEvent):void
    {
        mockData.sort = new Sort();
        mockData.sort.fields = [
            new SortField('serviceName', true, true, false, null, doSortForField('service', 'serviceName'))
        ];
        mockData.refresh();
    }

因此產生的代碼將是：

<?xml version="1.0"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:mx="library://ns.adobe.com/flex/mx">
<mx:DataGrid id="subLinearAssocGridInView"
             dataProvider="{mockData}"
             width="600"
             top="30"
             left="12"
             editable="false"
             maxHeight="500"
             rowHeight="20"
             headerHeight="20"
             creationComplete="subLinearAssocGridInView_creationCompleteHandler(event)"
             >
    <mx:columns>
        <mx:DataGridColumn
        headerText="Service"
        editable="false"
        labelFunction="setColumnLabel"
        sortCompareFunction="doSortForField()"
        />
    </mx:columns>
</mx:DataGrid>

<fx:Script><![CDATA[
    import mx.collections.ArrayCollection;
    import mx.collections.Sort;
    import mx.collections.SortField;
    import mx.events.FlexEvent;
    import mx.utils.ObjectUtil;

    private static const SERVICE_FIELD:String = 'service';
    private static const SERVICE_NAME_PROPERTY:String = 'serviceName';

    [Bindable]
    public var mockData:ArrayCollection = new ArrayCollection([
        {service: {serviceName: "service1", siServiceId: "serviceId1"}},
        {service: {serviceName: "service2", siServiceId: "serviceId2"}},
        {service: {serviceName: "service3", siServiceId: "serviceId3"}},
        {service: {serviceName: "service4", siServiceId: "serviceId4"}}
    ]);

    private function setColumnLabel(item:Object, col:*):String
    {
        if (item.service != null)
        {
            return item.service.serviceName + "[" + item.service.siServiceId + "]";
        }
        else
        {
            return "";
        }
    }

    public function doSortForField(field:String = SERVICE_FIELD, property:String = SERVICE_NAME_PROPERTY):Function
    {
        return function (obj1:Object, obj2:Object):int
        {
            return mx.utils.ObjectUtil.stringCompare(obj1[field][property], obj2[field][property], true);
        }
    }

    private function subLinearAssocGridInView_creationCompleteHandler(event:FlexEvent):void
    {
        mockData.sort = new Sort();
        mockData.sort.fields = [
            new SortField(SERVICE_NAME_PROPERTY, true, true, false, null, doSortForField())
        ];
        mockData.refresh();
    }

    ]]></fx:Script>