DataGrid 过滤的例子

用Flex开发的时候经常会用到DataGrid这个组件，这里有一个过滤DataGrid的例子，应该对初学者有所帮助。这个是从CFLEX那里看到的，仔细看了之后发现是个中国开发者写的，http://www./ 大家可以去看看，是个不错的社区，里面资讯教程都挺好。

点击这里查看示例

下面是代码

程序代码

<?xml version="1.0" encoding="GBK"?>
<!-- This example uses the dataProvider to build the dataGrid columns dynamically -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="initApp()" >

<mx:Script><![CDATA[
   import mx.controls.dataGridClasses.DataGridColumn;
   import mx.controls.DataGrid;

   import mx.collections.XMLListCollection;
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
    
    //the dataProvider for the DG
   [Bindable]
  private var _xlcCatalog:XMLListCollection;  
  // the dataProvider for combobox
   [Bindable]
  private var _comboData:ArrayCollection;
  

  //run by creationComplete
  public function initApp():void
  {
  _xlcCatalog = new XMLListCollection(xmlCatalog.product);
  
  var aColumnDef:Array = getComboDatas(xmlCatalog.product[0]);
  _comboData = new ArrayCollection(aColumnDef);
  setFirstColumnBG(_comboData[0]);  
  }
  //get grid title name by xml head data
  private function getGridTitles(headRow:XMLList):Array{
     var titles:Array = new Array();                          
  var headRoot:XML = headRow[0];
  var eachHead:XMLList = headRoot.children();
  for (var i:int=0;i<eachHead.length();i++)  {    
    var headNode:XML = eachHead[i];                                        
      titles.push(headNode.toString());        
  }    
  return titles;
  }
  private function setFirstColumnBG(item:Object):void{
        
     for(var i:int=0;i<dg.columns.length;i++ ){
      var bgStyle:String = dg.columns[i].getStyle("backgroundColor");
      if(bgStyle!=null){
      dg.columns[i].clearStyle("backgroundColor");      
   }              
  }  
  dg.columns[item.data].setStyle("backgroundColor","#FFFF00");  
  var maxValue:int = getSpecificColumnMax(item.label);
  setSliderComp(maxValue);
  }

  private function getComboDatas(headRow:XML):Array{
  var titles:Array = new Array();                              
  var eachHead:XMLList = headRow.children();
  for (var i:int=0;i<eachHead.length();i++)  {    
    var headNode:XML = eachHead[i];
    var nodeText:Number = Number(headNode.toString());
    if(!isNaN(nodeText)){
      var title:Object = new Object();
   //the label used for diplay
      title.label = eachHead[i].name();  
   //the data used for set column bgcolor
      title.data = i;    
      titles.push(title);  
    }  
  }
    
  return titles;
  }
  private function getSpecificColumnMax(columnName:String):int{
  var maxValue:Number = 0;
  
  for(var i:int=0;i<_xlcCatalog.length;i++ ){
      var eachProduct:XML = _xlcCatalog[i];
   var productAttr:XMLList = eachProduct.children();
  
   for(var j:int=0;j<productAttr.length();j++){
       var eachCell:XML = productAttr[j];
       var origColumnName:String = eachCell.name();
    
    if(origColumnName==columnName){          
        var columnValue:Number = Number(eachCell.toString());    
        if(columnValue>maxValue){
        maxValue = columnValue;      
     }
    }
   }
  }
  return int(maxValue)+1;
  }
  private function setSliderComp(max:int):void{
  slider.maximum = max;
  slider.values = [0, max];
  slider.labels = ["0",String(max)];
  
  }

//save the selected column datafield for sort use, assigned by headerRelease event;
private var selectedColumn:String;
//sort column data
private function comparGridItem(itema:XML,itemb:XML):int{
     var filteredField:String = selectedColumn;  
  var itemValueA:int = int(itema[filteredField]);
  var itemValueB:int = int(itemb[filteredField]);
  if(itemValueA > itemValueB){
   return -1;
  }else if(itemValueA < itemValueB){
   return 1;
  }else{
   return 0;
  }  
  
}
//change combo data while drag the gridheader to change its sequence saved in combobox
private function changeColumnIndex():void{
     var comboItems:Array = new Array();
     for(var i:int=0; i<_comboData.length;i++){  
      var eachItem:Object = _comboData[i];  
  
   var comboField:String = eachItem.label;
   for(var j:int=0;j<dg.columns.length;j++){
       var eachColumn:DataGridColumn = dg.columns[j];
    var eachColumnField:String = eachColumn.dataField;    
    if(eachColumnField == comboField){      
     eachItem.data = j;    
     break;
    }
   }    
  }  
}
//manul filter grid items by slider values
private function refreshGridBySlider(sliderValues:Array):void{
    
     var startValue:int = int(sliderValues[0]);
  var endValue:int = int(sliderValues[1]);
     var filterField:String = columnSelecter.selectedItem.label;
  var lastData:XMLList = _xlcCatalog.source;
     var filterProducts:XMLList = getMultiConditionFilterData(filterField,startValue,endValue,lastData);  
     _xlcCatalog = new XMLListCollection(filterProducts);
  debugger.text = _xlcCatalog.length.toString()+" records";
  
}
//deal with multiple condition filter
private function getMultiConditionFilterData(filterField:String, startValue:int,endValue:int, lastData:XMLList):XMLList{
     var newRootXml:XML = <root/>;
  for(var i:int=0;i<lastData.length();i++){
      var eachProduct:XML = lastData[i];
   var filteredData:String = eachProduct[filterField];
   var filteredValue:int = int(filteredData);
   if(filteredValue>startValue && filteredValue<endValue){
       newRootXml.appendChild(eachProduct);
   }
  }
  return newRootXml.children();
}

//retrieve data by slider values from initial dataset
private function resetGridData():void{
     var sliderValues:Array = slider.values;
  var startValue:int = int(sliderValues[0]);
  var endValue:int = int(sliderValues[1]);
     var filterField:String = columnSelecter.selectedItem.label;
  var allProductsData:XMLList = xmlCatalog.product;
     var filterProducts:XMLList = getMultiConditionFilterData(filterField,startValue,endValue,allProductsData);  
     _xlcCatalog = new XMLListCollection(filterProducts);
  debugger.text = _xlcCatalog.length.toString()+" records";
}
//restore grid data to initial status
private function restoreGridData():void{
  var allProductsData:XMLList = xmlCatalog.product;
  _xlcCatalog = new XMLListCollection(allProductsData);
  debugger.text = _xlcCatalog.length.toString()+" records";
}

]]></mx:Script>
  <mx:HBox borderStyle="solid" height="30" width="100%">    
<mx:ComboBox id="columnSelecter" dataProvider="{_comboData}"
              change="setFirstColumnBG(ComboBox(event.target).selectedItem)" />
<mx:HSlider id="slider" width="180" thumbCount="2" snapInterval="1" minimum="0" allowTrackClick="true" liveDragging="false" labelOffset="0"  
          change="refreshGridBySlider(HSlider(event.currentTarget).values)"/>
<mx:Button id="reset" label="reset" click="resetGridData()"/>
<mx:Button id="restore" label="restore" click="restoreGridData()"/>
<mx:Label id="debugger" text=""/>
  </mx:HBox>
  <mx:Canvas id="gridParent" borderStyle="solid" height="450" width="100%" >
   <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{_xlcCatalog}"
                headerRelease="selectedColumn=event.dataField"
       headerShift="changeColumnIndex()">
            <mx:columns>
                <mx:DataGridColumn dataField="time" headerText="Time"/>
                <mx:DataGridColumn dataField="ne" headerText="Region" />
                <mx:DataGridColumn dataField="price" headerText="Price" sortCompareFunction="comparGridItem"/>
    <mx:DataGridColumn dataField="deposit" headerText="Deposit" sortCompareFunction="comparGridItem"/>    
            </mx:columns>
        </mx:DataGrid>  
  </mx:Canvas>
  <mx:XML id="xmlCatalog">
<catalog>  
  <product productId="1">
   <time >2007-04-01</time>
   <ne>Bejing</ne>
   <price>99.99</price>
   <deposit>6000</deposit>  
  </product>
  <product productId="2">
   <time>2007-04-02</time>
   <ne>Shanghai</ne>
   <price>139</price>
   <deposit>5500</deposit>  
  </product>
  <product productId="3">
   <time>2007-04-03</time>
   <ne>Neimeng</ne>
   <price>39</price>
   <deposit>5000</deposit>  
  </product>
  <product productId="4">
   <time>2007-04-04</time>
   <ne>Guangzhou</ne>
   <price>159.99</price>
   <deposit>4500</deposit>  
  </product>
  <product productId="5">
   <time>2007-04-05</time>
   <ne>Tibet</ne>
   <price>59.99</price>
   <deposit>4000</deposit>  
  </product>
  <product productId="6">
   <time>2007-04-06</time>
   <ne>Shandong</ne>
   <price>59.99</price>
   <deposit>3000</deposit>  
  </product>
  <product productId="7">
   <time>2007-04-07</time>
   <ne>Wuhan</ne>
   <price>49.99</price>
   <deposit>2000</deposit>  
  </product>
  <product productId="8">
   <time>2007-04-08</time>
   <ne>Jinan</ne>
   <price>88.99</price>
   <deposit>1700</deposit>  
  </product>
  <product productId="9">
   <time>2007-04-09</time>
   <ne>Nanjing</ne>
   <price>59.99</price>
   <deposit>5700</deposit>  
  </product>
  <product productId="10">
   <time>2007-04-10</time>
   <ne>Huhehaote</ne>
   <price>25</price>
   <deposit>7800</deposit>  
  </product>
</catalog>
  </mx:XML>
</mx:Application>