flex datagrid 单元格验证(转)

摘要

Flex是一种富客户端技术,异步交互丰富,易于开发和维护,有可视化的控件,datagrid是其重要的插件,可以对其单元格进行编辑和验证。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="absolute"
                creationComplete="init()">
    <mx: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;
                }
            }
        ]]>
    </mx:Script>
    <mx:DataGrid id="_Grid"
                 y="0"
                 width="767"
                 x="0"
                 height="170"
                 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>
</mx:Application>


IT家园
IT家园

网友最新评论 (0)