1

请看下图。

我正在使用 spark DataGrid 使用 DatapPovider 显示姓名和年龄，DatapPovider 从数据库中获取数据并在 DataGrid 中显示它，我还使用 headerRenderer 在 Age 列的标题中添加了两个过滤器，我想从使用这些过滤器并重新呈现此 DataGrid。

火花数据网格

我的主文件有一个代码

    <fx:Script>
    <![CDATA[
        [Bindable] var userListDataProvider:ArrayCollection = new ArrayCollection();
    ]]>
</fx:Script>

<s:DataGrid  dataProvider="{userListDataProvider}">
    <s:columns> 
        <s:ArrayList>
            <s:GridColumn dataField="Name" /> 
            <s:GridColumn dataField="Age" itemEditor="renderer.AgeFilterRenderer"/> 
        </s:ArrayList>
    </s:columns> 
</s:DataGrid>

我的 headerRender 文件有以下代码

<s:HGroup>
    <s:TextInput id="fromAge" text="" />
    <s:Label text="To"/>
    <s:TextInput id="toAge" text="" />
</s:HGroup>

当用户更改 heder 过滤器的值但不知道如何在主 mxml 文件中访问这两个过滤器的值时，我想重新渲染 DataGrid。

做这个的最好方式是什么？

4

1 回答 1

0

我建议从包含这些值的 headerRenderer 分派一个事件。我将在浏览器中编写未经测试的代码；但希望这可以为您提供要点。

首先，创建一个新的事件类：

public package something.something{
public class AgeFilterEvent extends Event{

 public var fromAge :String;
 public var toAge :String;
 public static var AGE_FILTER_REQUEST = "ageFilterRequest";

 public function AgeFilterEvent(type:String):void{
 // be sure that bubbles is set to true when you call the super argument
   super(type);
 }
}
}

更改您的 headerrenderer 以调度事件：

<s:HGroup>
  <fx:script>
    <[[
    protected function onChange():void{
       var event : AgeFilterEvent = new AgeFilterEvent(AgeFilterEvent.AGE_FILTER_REQUEST);
       event.fromAGe = fromAge.text; 
       event.toAge = toAge.text;
       dispatchEVent(event);
    }
  ]]>
  </fx:Script>
    <s:TextInput id="fromAge" text="" change="onChange()" />
    <s:Label text="To"/>
    <s:TextInput id="toAge" text="" change="onChange()"/>
</s:HGroup>

收听 DatGrid 上的事件。您将无法在 MXML 中执行此操作，因为 DataGrid 上不存在相应的元数据；所以创建一个 ACtionScript 监听器：

    <fx:Script>
    <![CDATA[
        [Bindable] var userListDataProvider:ArrayCollection = new ArrayCollection();

        // in your main tag of this component. add an initialize or creationComplete listener to fire off this method handler
        public var onInitialize():void{
               grid.addEventListener(AgeFilterEvent.AGE_FILTER_REQUEST, onFilter);
        }

        public function onFilter():void{
            // code here to filter the dataProvider
       }
    ]]>
</fx:Script>

<!-- added an id to the DataGrid so it could be accessed in ACtionScript -->
<s:DataGrid id="grid"  dataProvider="{userListDataProvider}">
    <s:columns> 
        <s:ArrayList>
            <s:GridColumn dataField="Name" /> 
            <s:GridColumn dataField="Age" itemEditor="renderer.AgeFilterRenderer"/> 
        </s:ArrayList>
    </s:columns> 
</s:DataGrid>
于 2013-09-15T11:39:25.397 回答