Flex 可编辑DataGrid的输入验证例子

最新推荐文章于 2025-08-23 13:25:08 发布

转载最新推荐文章于 2025-08-23 13:25:08 发布 · 1.3k 阅读

文章标签：

#datagrid #flex #import #application #library #function

flex 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用Flex DataGrid实现的数据验证应用，包括非空验证和数字验证。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="init()">
   <fx:Declarations>
       
   </fx:Declarations>
   <fx:Script>
       <![CDATA[
       import mx.collections.ArrayCollection;
       import mx.utils.StringUtil;
       import mx.controls.TextInput;
       import mx.events.DataGridEventReason;
       import mx.events.DataGridEvent;

       [Bindable]
       private var list:ArrayCollection = new ArrayCollection();
       //初始化方法
       private function init():void{
       for(var i:int = 0;i < 10;i++){
       var o:Object;
       if(i%2 ==0)
       o = {num:i,notNull:"非空的第"+i+"行内容",any:"任意的第"+i+"行内容"};
       else
       o = {num:i,notNull:"非空的第"+i+"行内容",any:i};
       list.addItem(o);
       }
       }
       //验证的操作方法
       private function validateItem(event:DataGridEvent):void{
       //如果没有更新数据则直接返回
       if (event.reason == DataGridEventReason.CANCELLED){
       return;
       }
       var input:TextInput = TextInput(_Grid.itemEditorInstance);
       var newData:String= TextInput(event.currentTarget.itemEditorInstance).text;
       //如果商品查询的输入则验证非空
       if(event.dataField == "notNull" && StringUtil.trim(newData).length<=0){
       event.preventDefault();
       input.errorString="不能为空！";
       }
       //如果是数量则验证必须为数字
       if(event.dataField == "num" && isNaN(Number(StringUtil.trim(newData)))){
       event.preventDefault();
       input.errorString="必须为数字！";
       return;
       }
       }
       ]]>
   </fx:Script>
   <mx:DataGrid id="_Grid" y="0" width="100%" x="0" height="100%" itemEditEnd="validateItem(event)" dataProvider="{list}" textAlign="center" editable="true" fontSize="12">
       <mx:columns>
           <mx:DataGridColumn headerText="数字" dataField="num"/>
           <mx:DataGridColumn headerText="非空" dataField="notNull"/>
           <mx:DataGridColumn headerText="任意" dataField="any"/>
       </mx:columns>
   </mx:DataGrid>
</s:Application>