flex的DataGrid的标题中添加图标以及限制单元格的输值

最新推荐文章于 2024-11-03 15:18:47 发布

Shrek&Lee

最新推荐文章于 2024-11-03 15:18:47 发布

阅读量523

点赞数

分类专栏：前台技术文章标签： flex 标题 DataGrid 输入正则表达式

本文链接：https://blog.csdn.net/bluerain_/article/details/51940167

版权

前台技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该博客介绍如何在Flex的DataGrid组件中为标题添加图标，并实现对单元格输入的正则表达式校验，确保输入的对方账单号不超过22位字符且不能为空。示例代码展示了如何自定义headerRenderer和itemEditor，限制输入字符类型和长度。

摘要由CSDN通过智能技术生成

如图,包括输入校验,长度校验,标题图片.

代码如下:

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"> //导入的特征库

<mx:Script>
<![CDATA[

public function checkYourref(evt:DataGridEvent):void{                        //输入完成后调用的校验函数
    var input:TextInput = TextInput(paytimeLayerYourInfo.itemEditorInstance);
    var newData:String= TextInput(evt.currentTarget.itemEditorInstance).text;
    if(evt.dataField == "yourref"){
     if(StringUtil.trim(newData).length>22){
      input.errorString="对方账单号不能超过22位字符！";
      evt.preventDefault();
      return;
     }
     if(StringUtil.trim(newData).length<1){
      input.errorString="对方账单号不能为空！";
      evt.preventDefault();
      return;
     }
     var aa:String=yourrefId.dataField.toString();
     var ma:RegExp = new RegExp("\u4e00-\u9fa5");
     if(ma.test(yourrefId.dataField.charAt(yourrefId.dataField.length - 1)))
     {
      yourrefId.dataField=aa.substr(0,21);
     }else
     {
      yourrefId.dataField=aa.substr(0,22);
     }
    }
   }
  ]]>
</mx:Script>

<mx:Form width="100%" height="100%" >

<mx:DataGrid id="paytimeLayerYourInfo" height="98" width="100%" verticalScrollPolicy="on" editable="true"
      itemEditEnd="checkYourref(event)" styleName="DataGrid1">
   <mx:columns>
    <mx:DataGridColumn headerText="层号" id="layerNoId" dataField="layerNo" textAlign="center" editable="false"/>
    <mx:DataGridColumn headerText="期号" id="paytimeId" dataField="paytime" textAlign="center" editable="false"/>
    <mx:DataGridColumn id="yourrefId" dataField="yourref" textAlign="center" editable="true">
     <mx:headerRenderer>     //所在列的标题设置
      <mx:Component>
       <mx:HBox width="100%" horizontalAlign="center">
        <mx:Label text="对方账单号" textAlign="right"/>                        //标题部分的汉字
        <mx:Image source="assets/images/conitem/st.png">          //标题部分的图片
        </mx:Image>
       </mx:HBox>
      </mx:Component>
     </mx:headerRenderer>
     <mx:itemEditor>      //所在列的单元格设置
      <mx:Component>
       <mx:TextInput width="100%" styleName="TextInput" textAlign="left" restrict="{'\u4e00-\u9fa5'}A-Za-z0-9"/>        //输入限制(只可以输入中文,英文大小写以及数字)
      </mx:Component>
     </mx:itemEditor>