Flex Cookbook 18章3节翻译

13.8 过滤和排序一个XMLListCollection集合
13.8.1 问题
需要对一个XMLListCollection过滤和排序
13.8.2解决
使用ListViewCollection类的filterFunction和sortFunction属性（XMLListCollection类扩展自该类)或者仅仅传递一个类型Sort的对象给XMLListCollections的sort属性。
13.8.3讨论
XMLListCollections描述XML数据,在根部含有多个节点。例如，包含在nutriton节点里的food项目集将被解释成XMLListCollection，使得这些food节点被看作一个集合。

<nutrition>
<food>
        <name>Avocado Dip</name>
        <calories>110</calories>
        <total-fat>11</total-fat>
        <saturated-fat>3</saturated-fat>
        <cholesterol>5</cholesterol>
        <sodium>210</sodium>
        <carb>2</carb>
        <fiber>0</fiber>
        <protein>1</protein>
</food>
...
</nutrition>

过滤XMLListCollection的方式和ArrayCollection相同：也是通过传递一个函数的引用，该函数接收一个Object作为参数，返回布尔值，用来决定是否该对象应该留在过滤后的视图中。例如:

coll.filterFunction = lowCalFilter;
private function lowCalFilter(value:Object):Boolean {
        if(Number(value.calories) < 200) {
                return true;
        }
        return false;
}

过滤XMLListCollection需要一个Sort对象，这个对象的fields数组属性需要设置为一些SortField对象。

var sort:Sort = new Sort();
sort.fields = [new SortField("calories", false, false, true)];
coll.sort = sort;
coll.refresh();

这里列出了演示XMLListCollection的完整的代码，代码包含HTTPService的调用，排序及过滤，如下:

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300"
creationComplete="xmlService.send()">
        <mx:HTTPService url="assets/data.xml" resultFormat="xml" id="xmlService" result=
"createXMLCollection(event)"/>
        <mx:Script>
                <![CDATA[
                        import mx.collections.SortField;
                        import mx.collections.Sort;
                        import mx.rpc.events.ResultEvent;
                        import mx.collections.XMLListCollection;

                        [Bindable]
                        private var coll:XMLListCollection;

                        private function createXMLCollection(event:ResultEvent):void {
                                var list:XMLList = new XMLList(event.result);
                                coll = new XMLListCollection(list.food);
                                var sort:Sort = new Sort();
                                sort.fields = [new SortField("calories", false, false, true)];
                                coll.sort = sort;
                                coll.refresh();
                            }

                     private function applyFilter():void {
                             coll.filterFunction = lowCalFilter;
                             coll.refresh();
                        }

                        private function lowCalFilter(value:Object):Boolean {
                                if(Number(value.calories) < 200) {
                                        return true;
                                }
                                return false;
                        }


                ]]>
        </mx:Script>
        <mx:DataGrid dataProvider="{coll}">
                        <mx:columns>
                                    <mx:DataGridColumn dataField="calories"/>
                                    <mx:DataGridColumn dataField="name"/>
                        </mx:columns>
        </mx:DataGrid>
        <mx:Button click="applyFilter()" label="filter"/>
</mx:VBox>

通过对XML集合中的不同节点使用E4X语句可以实现复杂的过滤;例如，通过如下所示的@语法访问属性:

private function lowFatFilter(value:Object):Boolean {
        if(value.calories(@fat) < Number(value.calories)/5) {
                    return true;
        }
        return false;
}

 

 

译者注:如果觉得老外的例子不是很好，改了改:

程序代码:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="xmlService.send()">
<mx:Style>
  Application{font-size:12px;}
</mx:Style>
<mx:HTTPService url="data.xml" resultFormat="xml" id="xmlService" result="createXMLCollection(event)"/>
        <mx:Script>
                <![CDATA[
                        import mx.collections.SortField;
                        import mx.collections.Sort;
                        import mx.rpc.events.ResultEvent;
                        import mx.collections.XMLListCollection;

                        [Bindable]
                        private var coll:XMLListCollection;

                        private function createXMLCollection(event:ResultEvent):void {
                                var list:XML = new XML(event.result);
                                coll = new XMLListCollection(list.student);
                                var sort:Sort = new Sort();
        
        //SortField(字段名=null,大小写不敏感?=false,降序?=false,Object是否按编号?=null)
                                sort.fields = [new SortField("total", false, true, true)];//降序
                                coll.sort = sort;
                                coll.refresh();//因为绑定，coll的变化引起DataGrid的刷新
                            }

                     private function applyFilter():void {
                             coll.filterFunction = myFilter;
                             coll.refresh();
                        }

        
                        private function myFilter(value:Object):Boolean {
                                if(Number(value.total) < 380) {
                                        return true;//保留总分<380，看看<380的都有哪些人
                                }
                                return false;
                        }


                ]]>
        </mx:Script>
        <mx:DataGrid dataProvider="{coll}">
                        <mx:columns>
                                    <mx:DataGridColumn headerText="姓名" dataField="name"/>
                                    <mx:DataGridColumn headerText="语文" dataField="chinese"/>
                                    <mx:DataGridColumn headerText="数学" dataField="math"/>
                                    <mx:DataGridColumn headerText="英语" dataField="english"/>
            <mx:DataGridColumn headerText="总分" dataField="total"/>
                        </mx:columns>
        </mx:DataGrid>
        <mx:Button click="applyFilter()" label="过滤"/>
</mx:Application>

 

data.xml:

 

<?xml version="1.0" encoding="utf-8" ?>
<students>
<student>
        <name>张三</name>
        <chinese>130</chinese>
        <math>140</math>
        <english>125</english>
        <total>395</total>
</student>
<student>
        <name>李四</name>
        <chinese>110</chinese>
        <math>138</math>
        <english>126</english>
        <total>374</total>
</student>
<student>
        <name>王五</name>
        <chinese>120</chinese>
        <math>125</math>
        <english>135</english>
        <total>380</total>
</student>
</students>

这里的total字段的值是钉死的，实际中可能会根据其他字段计算求和的。