代码改变世界

DataGrid-自定义排序

2014-01-27 10:40  cai-yigo  阅读(594)  评论(0编辑  收藏  举报

1:通过对sortCompareFunction属性的比较函数必须具有以下签名:

function sortCompareFunction(obj1:Object, obj2:Object, gc:GridColumn):int { 
    // Sort logic 
}

2:举例:

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkDGXMLSort.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    width="500" height="600">
    <s:layout>
        <s:VerticalLayout paddingTop="10"/>
    </s:layout>

    <fx:Declarations>
        <fx:XMLList id="employees">
            <employee>
                <name>Joanne Wall</name>
                <phone>555-219-2012</phone>
                <email>jwall@fictitious.com</email>
                <active>true</active>
            </employee>
            <employee>
                <name>Mary Jones</name>
                <phone>555-219-2000</phone>
                <email>mjones@fictitious.com</email>
                <active>true</active>
            </employee>            
            <employee>
                <name>mary jones</name>
                <phone>555-219-2000</phone>
                <email>mjones@fictitious.com</email>
                <active>true</active>
            </employee>            
            <employee>
                <name>Maurice Smith</name>
                <phone>555-219-2012</phone>
                <email>maurice@fictitious.com</email>
                <active>false</active>
            </employee>            
            <employee>
                <name>Dave Davis</name>
                <phone>555-219-2000</phone>
                <email>ddavis@fictitious.com</email>
                <active>true</active>
            </employee>            
            <employee>
                <name>Tom Maple</name>
                <phone>555-219-2000</phone>
                <email>tmaple@fictitious.com</email>
                <active>true</active>
            </employee>            
        </fx:XMLList>
        <s:XMLListCollection id="employees2" source="{employees}"/>
        <s:XMLListCollection id="employees3" source="{employees}"/>
    </fx:Declarations>
    
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import spark.collections.Sort;
            import spark.collections.SortField;
            import spark.globalization.SortingCollator;
            
            // Create an instance of the SortingCollator.
            private var collator:SortingCollator = new SortingCollator();
            
            // Define the sort compare function used by the first column.
            private function sortCompareFunction(obj1:Object, obj2:Object, gc:GridColumn):int {
                // Make the sort case insensitive. The default is case sensitive.
                collator.ignoreCase = true;
                return collator.compare(obj1[gc.dataField], obj2[gc.dataField]);
            }
        ]]>
    </fx:Script>

    <s:Label text="Custom case insensitive sort of the Name colum"/>
    <s:DataGrid id="dg" width="500" dataProvider="{employees2}">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="name" headerText="Name" 
                    sortCompareFunction="sortCompareFunction"/>
                <s:GridColumn dataField="phone" headerText="Phone"/>
                <s:GridColumn dataField="email" headerText="Email"/>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>

    <s:Label text="Default case sensitive sort of the Name colum"/>
    <s:DataGrid width="500" dataProvider="{employees3}">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="name" headerText="Name"/>
                <s:GridColumn dataField="phone" headerText="Phone"/>
                <s:GridColumn dataField="email" headerText="Email"/>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>    
</s:Application>

3:效果

4:参考 http://help.adobe.com/en_US/flex/using/WSd867f5c5d869105e43810e1112c55502365-8000.html