`
xiaoer_1982
  • 浏览: 1806889 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

Flex中利用CheckBox对DataGrid控件中的项目进行过滤的例子

阅读更多

下面的例子展示了Flex中如何利用一个CheckBox控件以及ArrayCollection类的filterFunctio属性,对DataGrid控件中的项目进行过滤。

下面是具体的例子以及源代码:
<!--more-->

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2008/03/12/using-a-combobox-to-filter-items-in-a-datagrid-in-flex/ -->
  3. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"
  4. layout="vertical"
  5. verticalAlign="middle"
  6. backgroundColor="white">
  7. <mx:Script>
  8. <![CDATA[
  9. importmx.controls.dataGridClasses.DataGridColumn;
  10. privatefunction toggleFilter():void {
  11. if(checkBox.selected) {
  12. arrColl.filterFunction = processFilter;
  13. }else {
  14. arrColl.filterFunction = null;
  15. }
  16. arrColl.refresh();
  17. }
  18. privatefunction processFilter(item:Object):Boolean {
  19. returnparseFloat(item.value) == 0;
  20. }
  21. privatefunction value_labelFunc(item:Object, col:DataGridColumn):String {
  22. returnitem[col.dataField].toFixed(2);
  23. }
  24. ]]>
  25. </mx:Script>
  26. <mx:ArrayCollection id="arrColl">
  27. <mx:source>
  28. <mx:Array>
  29. <mx:Object name="ColdFusion" value="0.00" />
  30. <mx:Objectname="Dreamweaver" value="0.12" />
  31. <mx:Object name="Fireworks" value="1.01" />
  32. <mx:Objectname="Flash" value="0" />
  33. <mx:Object name="Flash Player" value="-0.00" />
  34. <mx:Objectname="Flex" value="0.00" />
  35. <mx:Object name="Illustrator" value="2.92" />
  36. <mx:Objectname="Lightroom" value="0.32" />
  37. <mx:Object name="Photoshop" value="0.06" />
  38. </mx:Array>
  39. </mx:source>
  40. </mx:ArrayCollection>
  41. <mx:Panel status="{arrColl.length}/{arrColl.source.length}item(s)">
  42. <mx:DataGrid id="dataGrid"
  43. dataProvider="{arrColl}"
  44. verticalScrollPolicy="on">
  45. <mx:columns>
  46. <mx:DataGridColumn dataField="name" />
  47. <mx:DataGridColumn dataField="value"
  48. labelFunction="value_labelFunc" />
  49. </mx:columns>
  50. </mx:DataGrid>
  51. <mx:ControlBar>
  52. <mx:CheckBox id="checkBox"
  53. label="FilterDataGrid"
  54. click="toggleFilter();" />
  55. </mx:ControlBar>
  56. </mx:Panel>
  57. </mx:Application>
下面是执行实例(可以右键察看源代码):

本文转自:http://elanso.com/ArticleModule/sourcearticle.aspx?idx=KAMbHlQwW6I5KeMGQcMGRRIi

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics