通过Flex组合框(ComboBox)来过滤DataGrid

开发 后端
本文向大家介绍一下如何使用Flex组合框来过滤DataGrid,Flex中一个很普遍的应用就是用Flex组合框过滤显示在DataGrid中的数据。

在学习Flex的过程中,你可能会遇到Flex组合框的使用,这里和大家分享一下通过Flex组合框来过滤DataGrid,相信本文介绍一定会让你有所收获。

通过Flex组合框来过滤DataGrid

Flex中一个很普遍的应用就是用Flex组合框过滤显示在DataGrid中的数据。在这个技巧里,目的是把一个“作者”数据库表里的数据显示到DataGrid里,表的结构如下:

CODE:
 

  1. authorId:String;  
  2. authorName:String;  
  3. status:String; 

◆另外,用户可以选择Flex组合框中包含的不同的作者状态的值来过滤DataGrid显示的作者信息。推荐你把从服务器请求获得的结果转换为ArrayCollection,然后把这个ArrayCollection作为DataGrid的dataProvider。这样做你会发现操作和过滤显示的数据会很变得容易。获取数据超出了现在这个技巧的范围,不过关于这个问题有很多的例子可以参考。

首先,把结果转换为ArrayCollection。

CODE:
 

  1. importmx.utils.ArrayUtil;  
  2.  
  3. importmx.collections.ArrayCollection;  
  4.  
  5. //event.resultcontainsthedatafromtheauthorssearch.  
  6.  
  7. publicvarauthorsArray:Array=mx.utils.ArrayUtil.toArray(event.result);  
  8.  
  9. //UseauthorsDataProviderasthedataProviderforthedataGrid.  
  10.  
  11. [Bindable]  
  12.  
  13. publicvarauthorsDataProvider:ArrayCollection=newArrayCollection(authorsArray);  
  14.  

 ◆接下来,把搜索结果中的作者状态值动态加载到Flex组合框中。在这里,数据库中可能的作家状态值是"Active","Inactive"和"Deleted"。但是在进行之前,让我们来回顾一下用例。我们把搜索作者得到的结果通过DataGrid视图向用户显示出来,在看过之后,用户可能希望过滤这些数据让它只显示“Active”的作者。当然,Flex组合框中的"Active","Inactive"和"Deleted"可以直接硬编码,但是如果那样做的话,当数据库中添加了一个新的状态值得时候我们必须修改程序。

而且,Flex组合框中的值应该只包含搜索结果中的作者状态,如果搜索结果只包含状态为"Active"和"Inactive"的作者,Flex组合框应该只包含相应的值(没有”Delete”)。如果所有数据库中可能的作者状态值都在Flex组合框中硬编码,用户就可以选择”Delete”这个值,然后就会看到一个没有任何数据的DataGrid。我们不想困扰用户,所以接下来的代码会动态加载作者状态值到一个数组,然后把这个数组作为Flex组合框的dataProvider。

CODE:
 

  1. //UsetheauthorsStatusArrayasthedataProviderfortheCombox.  
  2.  
  3. [Bindable]  
  4. publicvarauthorsStatusArray:Array=populateAuthorsStatusArray(authorsArray);  
  5.  
  6. publicfunctionpopulateAuthorsStatusArray(authorsArray:Array):Array  
  7. {  
  8. varstatusArrayHashMap:Object=newObject();  
  9. varstatusArray:Array=newArray;  
  10.  
  11. varn:int=authorsArray.length;  
  12. for(vari:int=0;i<n;i++)  
  13. {  
  14. if(statusArrayHashMap[authorsArray[i].status]==undefined)  
  15. {  
  16. statusArrayHashMap[authorsArray[i].status]=newObject();  
  17. statusArray.push(authorsArray[i].status);  
  18. }  
  19. }  
  20. statusArray.sort();  
  21. statusArray.unshift("All");  
  22.  
  23. //The"All"valueisusedprogrammaticallytoun-filter(reset)theresultinthedataGrid.  
  24. returnstatusArray;  
  25. }  
  26.  

 下面是mxml写的代码:
CODE: 

  1. <mx:Comboxidmx:Comboxid="cboAuthorsStatusFilter" 
  2. dataProvider="{authorsStatusArray}" 
  3. change="filterAuthorsGrid();"/> 

这就是全部的技巧。因为DataGrid的dataProvider利用了绑定(binding),所以当用户在Flex组合框中选中了一个值的时候,DataGrid会动态显示过滤后的结果。请紧记,这只是一个小技巧而且可能有一些生涩的地方。但是你应该可以通过这些代码领会这种思想。

【编辑推荐】

  1. 探秘Flex与JavaScript交互
  2. 常用FlexBuilder快捷键用法指导
  3. Flex框架Riawave的定制应用
  4. 技术前沿 Flex2.0 从零开始实现文件上传
  5. FlexBuilder开发方法及特点解析 

 

责任编辑:佚名 来源: it168.com
相关推荐

2010-07-27 13:53:15

Flex ComboB

2010-08-11 16:10:27

Flex DataGr

2010-07-27 14:00:53

Flex ComboB

2010-08-06 14:13:31

FlexDataGrid分页控

2010-08-11 16:03:02

Flex DataGr

2009-09-16 10:53:50

Flex界面

2010-08-11 16:30:49

Flex DataGr

2009-09-18 19:14:29

Hook机制

2010-08-11 16:41:30

Flex DataGr

2010-07-28 09:29:36

Flex DataGr

2010-08-11 15:51:45

Flex DataGr

2010-08-11 15:35:47

Flex DataGr

2009-08-07 18:04:22

ASP.NET Dat确认对话框

2009-11-13 10:51:20

Visual Stud

2023-10-09 08:33:50

过滤和排序分布式搜索

2010-07-29 11:12:30

Flex日期格式化

2010-08-05 13:27:06

Flex布局

2009-07-03 08:58:22

Flex教程Flex程序

2009-10-20 10:16:24

VB.NET COMB

2010-07-27 13:46:18

Flex swf
点赞
收藏

51CTO技术栈公众号