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, 当前color
		public var rowColorFunction:Function;
		//覆写drawRowBackground，目的是根据rowColorFunction返回颜色设置当前行
		override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number,color:uint, dataIndex:int):void{
			//从dataProvider中获取当前item
			var 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);
		}
	}
}