案例背景:此案例以 学生成绩单为背景
需求:
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);
}
}
}