DataGrid 过滤的例子

    技术2022-05-11  7

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

    点击这里查看示例

    下面是代码

    <?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 creationCompletepublic 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 dataprivate 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 diplaytitle.label = eachHead[i].name();//the data used for set column bgcolortitle.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 dataprivate 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 comboboxprivate 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 valuesprivate 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 filterprivate 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 datasetprivate 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 statusprivate 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>


    最新回复(0)