flex表格综合应用（可编辑单元格，自定义函数，行间颜色变化，多列头）

来源：互联网发布：丝洛芬淘宝有得卖编辑：程序博客网时间：2024/05/20 02:26

案例背景：此案例以学生成绩单为背景

需求：
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);}}}