flex表格综合应用(可编辑单元格,自定义函数,行间颜色变化,多
发布时间:2020-12-15 04:12:08 所属栏目:百科 来源:网络整理
导读:案例背景:此案例以 学生成绩单为背景 ? 需求: ? ? ? ? 1.如果总分大于等于270分,表格行,背景色自动填充为 ,绿色 ? ? ? ? 2.表格,单元格是可编辑的 ? ? ? ? 3.总分自动根据编辑完成数据,计算出新的总分 ? ? ? ? 4.编辑单元格数据,只能填入数字,错误
案例背景:此案例以 学生成绩单为背景 ? 需求:? ? ? ? 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:'李四',mathScore:'99',englishScore:'67',totalScore:'256'},{userName:'王五',chineseScore:'40',mathScore:'65',totalScore:'202'},{userName:'赵六',{userName:'刘七',chineseScore:'30',mathScore:'85',englishScore:'77',totalScore:'192'},{userName:'严八',englishScore:'98',totalScore:'283'},{userName:'孙九',chineseScore:'70',mathScore:'94',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,y,height,color,dataIndex); } } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |