现在的位置: 首页 > 综合 > 正文

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

2013年11月04日 ⁄ 综合 ⁄ 共 2122字 ⁄ 字号 评论关闭

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

下面是具体的例子以及源代码:

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:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.controls.dataGridClasses.DataGridColumn;
  11.  
  12.             private function toggleFilter():void {
  13.                 if (checkBox.selected) {
  14.                     arrColl.filterFunction = processFilter;
  15.                 } else {
  16.                     arrColl.filterFunction = null;
  17.                 }
  18.                 arrColl.refresh();
  19.             }
  20.  
  21.             private function processFilter(item:Object):Boolean {
  22.                 return parseFloat(item.value) == 0;
  23.             }
  24.  
  25.             private function value_labelFunc(item:Object, col:DataGridColumn):String {
  26.                 return item[col.dataField].toFixed(2);
  27.             }
  28.         ]]>
  29.     </mx:Script>
  30.  
  31.     <mx:ArrayCollection id="arrColl">
  32.         <mx:source>
  33.             <mx:Array>
  34.                 <mx:Object name="ColdFusion" value="0.00" />
  35.                 <mx:Object name="Dreamweaver" value="0.12" />
  36.                 <mx:Object name="Fireworks" value="1.01" />
  37.                 <mx:Object name="Flash" value="0" />
  38.                 <mx:Object name="Flash Player" value="-0.00" />
  39.                 <mx:Object name="Flex" value="0.00" />
  40.                 <mx:Object name="Illustrator" value="2.92" />
  41.                 <mx:Object name="Lightroom" value="0.32" />
  42.                 <mx:Object name="Photoshop" value="0.06" />
  43.             </mx:Array>
  44.         </mx:source>
  45.     </mx:ArrayCollection>
  46.  
  47.     <mx:Panel status="{arrColl.length}/{arrColl.source.length} item(s)">
  48.         <mx:DataGrid id="dataGrid"
  49.                 dataProvider="{arrColl}"
  50.                 verticalScrollPolicy="on">
  51.             <mx:columns>
  52.                 <mx:DataGridColumn dataField="name" />
  53.                 <mx:DataGridColumn dataField="value"
  54.                         labelFunction="value_labelFunc" />
  55.             </mx:columns>
  56.         </mx:DataGrid>
  57.         <mx:ControlBar>
  58.             <mx:CheckBox id="checkBox"
  59.                     label="Filter DataGrid"
  60.                     click="toggleFilter();" />
  61.         </mx:ControlBar>
  62.     </mx:Panel>
  63.  
  64. </mx:Application>
下面是执行实例(可以右键察看源代码):

 

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

抱歉!评论已关闭.