flex表格綜合應用（可編輯儲存格，自訂函數，行間顏色變化，多列頭）

案例背景：此案例以 學產生績單為背景

 

需求：
        1.如果總分大於等於270分，表格行，背景色自動填滿為 ，綠色
        2.表格，儲存格是可編輯的
        3.總分自動根據編輯完成資料，計算出新的總分
        4.編輯儲存格資料，只能填入數字，錯誤資料格式，要予以提示
        5.合併儲存格（如學科下有，語文，數學，英語等，見圖）
        6.格式化輸入的正確資料（如3就格式化成3.00）
        7.根據集合資料，自動產生序號

效果圖：

項目目錄：

demo：

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"             xmlns:components="components.*">             <mx:Script> <![CDATA[ import mx.olap.aggregators.MinAggregator; import mx.events.ValidationResultEvent; import mx.validators.NumberValidator; import mx.events.AdvancedDataGridEvent; import mx.controls.TextInput; import mx.events.DataGridEvent; import mx.validators.StringValidator; import mx.collections.ArrayCollection; import mx.formatters.NumberFormatter; import mx.controls.DataGrid; /** * 產生序號 */private function formatIndexNumber(item:Object, colum:Object):String{  var dataGrid:Object = colum.mx_internal::owner;  var datas:Array = dataGrid.dataProvider.source;  var indexNum:int = (datas.indexOf(item) + 1);  return indexNum.toString();}/** * 格式化數字資料 */ private function foramtNumberField(item:Object, column:Object):String {                var numberFormatter:NumberFormatter = new NumberFormatter();                var value:Number = item[column.dataField];                numberFormatter.precision = "2";                numberFormatter.thousandsSeparatorTo = ",";                return numberFormatter.format(value);             }                          [Bindable]public var sourceData:ArrayCollection = new ArrayCollection([                 {userName:'張三',chineseScore:'90',mathScore:'95',englishScore:'97',totalScore:'282'}                ,{userName:'李四',chineseScore:'90',mathScore:'99',englishScore:'67',totalScore:'256'}                ,{userName:'王五',chineseScore:'40',mathScore:'65',englishScore:'97',totalScore:'202'}                ,{userName:'趙六',chineseScore:'90',mathScore:'95',englishScore:'97',totalScore:'282'}                ,{userName:'劉七',chineseScore:'30',mathScore:'85',englishScore:'77',totalScore:'192'}                ,{userName:'嚴八',chineseScore:'90',mathScore:'95',englishScore:'98',totalScore:'283'}                ,{userName:'孫九',chineseScore:'70',mathScore:'94',englishScore:'97',totalScore:'261'}]);;/**start：校正資料是否合法**/public var nv:NumberValidator;private function onEditEnd(event:AdvancedDataGridEvent):void{var dataField:String = event.dataField;var fCell:Array=[event.columnIndex,event.rowIndex];var textInput:TextInput = TextInput(event.currentTarget.itemEditorInstance);var newData:String = textInput.text;nv = new NumberValidator();if(dataField == 'chineseScore' || dataField == 'mathScore' || dataField == 'englishScore'){nv.source = event.currentTarget.itemEditorInstance;nv.property = "text";nv.required=true;nv.requiredFieldError = "內容不可為空字串，請重新輸入資料。";nv.invalidCharError = "必須為數字，請重新輸入資料";nv.allowNegative=false; //允許為負數設定nv.negativeError="內容不能為負數，請重新輸入資料"nv.precision=2;nv.precisionError="小數點後只能有兩位有效數字。"nv.decimalPointCountError="分隔字元或數字小數的錯誤!";nv.thousandsSeparator=",";var val:ValidationResultEvent = nv.validate();if(val.type == ValidationResultEvent.INVALID){callLater(maintainEdit,fCell); }                                else        {     callLater(maintainFocus);}}else{callLater(maintainFocus);}}private function maintainFocus():void{   dg.editedItemPosition = null;}private function maintainEdit(colIndex:int,rowIndex:int):void{var editCell:Object = {columnIndex:colIndex, rowIndex: rowIndex};if(dg.editedItemPosition==null){   dg.editedItemPosition = editCell;callLater(validateCurrentEditor);   }  }private function validateCurrentEditor():void{if(dg.itemEditorInstance!=null){    nv.source = dg.itemEditorInstance;     nv.validate();   }}/**end：校正資料是否合法**/ ]]> </mx:Script> <mx:Style>Application{backgroundColor: #FFFFFF;backgroundDisabledColor: #FFFFFF;backgroundSize: "100%";fontSize: 12;} AdvancedDataGrid{     headerColors: #cad5db, #edf3f7;   rollOverColor: #faf1d2;   borderColor: #ffffff;   selectionColor: #fbcfae;} .errorTip    {       fontSize: 11;    } </mx:Style> <mx:VBox height="100%" width="100%">             <components:RowColorDataGrid id="dg" width="100%" height="100%" editable="true" dataProvider="{sourceData}"                 sortableColumns="false" sortExpertMode="true" itemEditEnd="onEditEnd(event)">                <components:groupedColumns>                    <mx:AdvancedDataGridColumnGroup headerText="2013年上學期，高三(3)班，期末成績單">                    <mx:AdvancedDataGridColumn  labelFunction="formatIndexNumber" headerText="序號"  width="40" editable="false" />                    <mx:AdvancedDataGridColumn  headerText="姓名" dataField="userName" width="80" editable="false"/>                    <mx:AdvancedDataGridColumnGroup headerText="學科">                    <mx:AdvancedDataGridColumn  headerText="語文" dataField="chineseScore" width="60" editable="true">                          <mx:itemRenderer>                               <mx:Component>                                   <mx:Label>                                       <mx:Script>                                          <![CDATA[                                          import mx.formatters.NumberFormatter;                                            override public function set data(value:Object ) : void {                                                super.data = value;                                                                                                 var numberFormatter:NumberFormatter = new NumberFormatter();                numberFormatter.precision = "2";                numberFormatter.thousandsSeparatorTo = ",";                                                   this.htmlText =  numberFormatter.format(value.chineseScore);                                                                                                                                                    value.totalScore = Number(value.chineseScore)+ Number(value.mathScore) + Number(value.englishScore);                                            }                                          ]]>                                      </mx:Script>                                  </mx:Label>                              </mx:Component>                          </mx:itemRenderer>                     </mx:AdvancedDataGridColumn >                     <mx:AdvancedDataGridColumn  headerText="數學" dataField="mathScore" width="100"   editable="true" labelFunction="foramtNumberField"/>                     <mx:AdvancedDataGridColumn  headerText="英語" dataField="englishScore" width="80" editable="true" labelFunction="foramtNumberField"/>                     </mx:AdvancedDataGridColumnGroup>                 <mx:AdvancedDataGridColumn  headerText="總分" dataField="totalScore" width="60" editable="false" labelFunction="foramtNumberField"/>                </mx:AdvancedDataGridColumnGroup>                </components:groupedColumns>            </components:RowColorDataGrid>        </mx:VBox></mx:Application>

RowColorDataGrid.as

package components{import flash.display.Sprite;import mx.controls.AdvancedDataGrid;    public class RowColorDataGrid extends AdvancedDataGrid{//用於設定顏色，參數: 當前item, rowIndex, dataIndex, 當前colorpublic var rowColorFunction:Function;//覆寫drawRowBackground，目的是根據rowColorFunction返回顏色設定當前行override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number,color:uint, dataIndex:int):void{//從dataProvider中擷取當前itemvar item:Object;if(dataProvider != null && dataIndex < dataProvider.length){item = dataProvider[dataIndex];}if(item!= null){ //如果當前item存在，從rowColorFunction中擷取行的顏色if(item.totalScore >= 270.00){color = 0x92d564; }}//調用父類方法設定當前行顏色super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);}}}