在DataGrid使用itemRender和itemEditor，综合一例

功能描述
在DataGrid中，综合使用一些组件，包括RadioButtonGroup、checkbox、ComboBox等

技术点说明

• itemRender和itemEditor的用法
• renderIsEditor = true，可以始终显示Editor
• 将多种不同格式的日期字符串使用正则表达式转换成日期类型，默认不能直接将yyyy-mm-dd格式直接转换成日期
• 工资账号分组编辑
• 复选框(CheckBox)、单选框(RadioButtonGroup)、下拉列表框(ComboBox)的用法
• 日期选择(DateField)，出生日期使用 renderIsEditor

更多的细节可以直接看代码中的注释

预览


代码下载
baseUsing.mxml
http://my.jhost.cn/iihe602_2/flex/sdk3/baseUsing.html


代码展示

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="left"
  3     fontSize="12" borderColor="white"> 
  4 
  5     <mx:Script>
  6         <![CDATA[
  7             import mx.events.DataGridEventReason;
  8             import mx.events.DataGridEvent;
  9             import mx.controls.Alert;
 10             import mx.events.CollectionEvent;
 11             import mx.charts.chartClasses.DataDescription;
 12             import mx.utils.StringUtil; 
 13             import mx.utils.ArrayUtil;
 14 
 15             import mx.formatters.DateFormatter;  
 16             
 17             [Bindable]
 18             public var cities: Array = ("北京,天津,河北,内蒙古,山西,上海,安徽,江苏,浙江,山东,福建,江西,广东,广西,海南," + 
 19                     "河南,湖北,湖南,黑龙江,吉林,辽宁,陕西,甘肃,宁夏,青海,XinJiang,重庆,四川,云南,贵州,西藏,香港,澳门,台湾").split(",");
 20 
 21             private function birthday_labelFunction(item:Object, column:DataGridColumn):String
 22             {
 23                 //return birthdayFormatter.format(item.birthday); 这样些，得到的是一个空值，必须使用toString()，这一点需要注意
 24                 //下面的方法才正确
 25                 return birthdayFormatter.format(item.birthday.toString());
 26             }
 27             
 28             private function age_labelFunction(item:Object, column:DataGridColumn):String
 29             {
 30                 // todo: 将类似1999-2-24这样的字符串解析成日期，会有不成功的情况，暂时先使用正则表达式匹配获取到年
 31                 //下面的方法才正确
 32                 var birthStr: String = item.birthday.toString().match(/\d{4}/);
 33                 var now: Date = new Date();
 34                 return (now.fullYear - Number(birthStr)).toString();
 35             }
 36             
 37             private function married_labelFunction(item:Object, column:DataGridColumn):String
 38             {
 39                 return item.married == "已婚" ? "已婚" : "未婚";
 40             }    
 41             
 42             protected function dg_itemEditEndHandler(event:DataGridEvent):void
 43             {
 44                 //如果用户按Cancel键，则不需要处理
 45                 if (event.reason == DataGridEventReason.CANCELLED) return;
 46                 
 47                 //是否正在输入birthday
 48                 if (event.dataField == "birthday")
 49                 {
 50 //                    //注意是怎么获取当前输入组件实例
 51 //                    var editor: TextInput = (event.target as DataGrid).itemEditorInstance as TextInput;
 52 //                    //检查日期是否合法
 53 //                    // todo: 目前还没有判断日期是否真正合法？
 54 //                    if (editor.text.search(/(\d{4})-(\d{1,2})-(\d{1,2})/) == -1)
 55 //                    {
 56 //                        //阻止将输入值提交到后台
 57 //                        event.preventDefault();
 58 //                        //显示错误提示信息
 59 //                        editor.errorString = "日期输入错误。";
 60 //                    }
 61                 }
 62                 //还可以继续判断其他列的输入
 63             }
 64 
 65         ]]>
 66     </mx:Script>
 67 
 68     <mx:DateFormatter id="birthdayFormatter" formatString="YYYY-MM-DD"/>
 69 
 70     <mx:XML id="employees" source="assets/data.xml"/>
 71     
 72     <mx:XMLListCollection id="employeeCollection" source="{employees.emp}"/>
 73     
 74     <mx:DataGrid id="dg" dataProvider="{employeeCollection}" editable="true" tabChildren="true"
 75         itemEditEnd="dg_itemEditEndHandler(event)">
 76         <mx:columns>
 77             <mx:DataGridColumn headerText="员工编号" dataField="empId" editable="false" color="gray"/>
 78             
 79             <mx:DataGridColumn headerText="姓名" dataField="name"/>
 80             
 81             <!--使用RadioButtonGroup-->
 82             <mx:DataGridColumn headerText="性别" dataField="sex" width="100" editorDataField="value" rendererIsEditor="true">
 83                 <mx:itemRenderer>
 84                     <mx:Component>
 85                         <mx:HBox>
 86                             <mx:Script>
 87                                 <![CDATA[
 88                                     import mx.controls.DateField;
 89                                     public function get value(): Object
 90                                     {
 91                                         return sexGroup.selectedValue;
 92                                     }
 93                                     
 94                                     override public function set data(value:Object) : void
 95                                     {
 96                                         super.data = value;
 97                                         sexGroup.selectedValue = value.sex;
 98                                         
 99                                     } 
                                 ]]>
                             </mx:Script>
                             <mx:RadioButtonGroup id="sexGroup"/>
                             <mx:RadioButton groupName="sexGroup" label="男" value="男"/>
                             <mx:RadioButton groupName="sexGroup" label="女" value="女"/>
                         </mx:HBox>
                     </mx:Component>
                 </mx:itemRenderer>
             </mx:DataGridColumn>
             
             <mx:DataGridColumn headerText="出生日期" dataField="birthday" editorDataField="value" rendererIsEditor="true">
                 <mx:itemRenderer>
                     <mx:Component>
                         <mx:Box>
                             <mx:Script>
                                 <![CDATA[
                                     public function get value(): Object
                                     {
                                         /*注意：月份是从0开始的，所以必须加1*/
                                         return df.selectedDate.fullYear.toString() + "/" + (df.selectedDate.month+1).toString() + "/" + df.selectedDate.date.toString();
                                     }
                                     
                                     override public function set data(value:Object) : void
                                     {
                                         super.data = value;
                                         var datestr: String = value.birthday.toString();
                                         var tempDate:Date = null;
                                         var re:RegExp = null;
                                         
                                         /*yyyy-mm-dd*/
                                         re = /(\d{4})[-\/](\d{1,2})[-\/](\d{1,2})/;
                                         if (tempDate == null && re.test(datestr))
                                         {                                         
                                             datestr = datestr..replace(re, "$1/$2/$3");
                                             tempDate = new Date(datestr);
                                         }
                                         
                                         /* mm-dd-yyyy */
                                         re = /(\d{1,2})[-\/](\d{1,2})[-\/](\d{4})/;
                                         if (tempDate == null && re.test(datestr))
                                         {
                                             datestr = datestr..replace(re, "$3/$1/$2");
                                             tempDate = new Date(datestr);
                                         }
                                         
                                         if (tempDate != null)
                                             df.selectedDate = tempDate;
                                     }
                                 ]]>
                             </mx:Script>
                             <mx:DateField id="df" width="100%" formatString="YYYY-MM-DD"/>
                         </mx:Box>
                     </mx:Component>
                 </mx:itemRenderer>
             </mx:DataGridColumn>
             
             <!--注意不同日期格式转换成日期类型的算法，由于as默认并不支持将yyyy-mm-dd中国常用的日期格式直接转换成日期类型，
                   因此这里使用正则表达式进行匹配并转换-->
             <mx:DataGridColumn headerText="年龄（计算）" dataField="age" editable="false" labelFunction="age_labelFunction" color="gray"/>
             
             <mx:DataGridColumn headerText="籍贯" dataField="city" editorDataField="value">
                 <mx:itemEditor>
                     <mx:Component>
                         <mx:HBox>
                             <mx:Script>
                                 <![CDATA[
                                     import mx.utils.ArrayUtil;
                                     
                                     public function get value(): Object
                                     {
                                         //由于HBox不能够直接返回value，需要写一个value的getter函数
                                         return citiesComboBox.selectedItem;
                                     }
                                     
                                     override public function set data(value:Object) : void
                                     {
                                         //必须要给data复制，否则会导致程序崩溃
                                         super.data = value;
                                         //给combobox赋初始值
                                         citiesComboBox.selectedItem = value.city;
                                     } 
                                 ]]>
                             </mx:Script>
                             <mx:ComboBox id="citiesComboBox" dataProvider="{ArrayUtil.toArray(outerDocument.cities)}" width="100%"/>
                         </mx:HBox>
                     </mx:Component>
                 </mx:itemEditor>
             </mx:DataGridColumn>
             
             <!--在表格中使用checkbox，注意是如何将实际数据和显示数据进行转换的-->
             <mx:DataGridColumn headerText="婚否" dataField="married" editorDataField="value" rendererIsEditor="true">
                 <mx:itemRenderer>
                     <mx:Component>
                         <mx:Box horizontalAlign="center">
                             <mx:Script>
                                 <![CDATA[
                                     public function get value(): Object
                                     {
                                         return cbMarried.selected ? "已婚" : "未婚";                                    
                                     }
                                     
                                     override public function set data(value:Object) : void
                                     {
                                         super.data = value;
                                         cbMarried.selected = value.married == "已婚";                                    
                                     }
                                 ]]>
                             </mx:Script>
                             <mx:CheckBox id="cbMarried"/>
                         </mx:Box>        
                     </mx:Component>
                 </mx:itemRenderer>
             </mx:DataGridColumn>
             
             <!--将工资账号进行4位一组，便于输入；显示时也是4位一组，便于阅读；但实际存储是连续的-->
             <mx:DataGridColumn headerText="工资账号" dataField="salaryBankId" width="240" editorDataField="value">
                 <mx:itemRenderer>
                     <mx:Component>
                         <mx:HBox>
                             <mx:Script>
                                 <![CDATA[
                                     override public function set data(value:Object) : void
                                     {
                                         super.data = value;
                                         //为了便于查看，进行了4位分组，实际存储仍然是连续的
                                         p1.text =   value.salaryBankId.toString().substr(0, 4)
                                             + " " + value.salaryBankId.toString().substr(4, 4)
                                             + " " + value.salaryBankId.toString().substr(8, 4)
                                             + " " + value.salaryBankId.toString().substr(12, 4);
                                     }
                                 ]]>
                             </mx:Script>
                             <mx:Label id="p1"/>
                         </mx:HBox>
                     </mx:Component>
                 </mx:itemRenderer>
                 <mx:itemEditor>
                     <mx:Component>
                         <mx:HBox tabChildren="true">
                             <mx:Script>
                                 <![CDATA[
                                     import mx.managers.FocusManager;
                                     //从编辑组件获取输入值时被执行，这个函数的名称和editorDataField是对应的
                                     public function get value(): Object
                                     {
                                         return p1.text + p2.text + p3.text + p4.text;
                                     }
                                     
                                     //listitem把数据赋值给编辑组件时，被执行
                                     override public function set data(value:Object) : void
                                     {
                                         super.data = value;
                                         p1.text = value.salaryBankId.toString().substr(0, 4);
                                         p2.text = value.salaryBankId.toString().substr(4, 4);
                                         p3.text = value.salaryBankId.toString().substr(8, 4);
                                         p4.text = value.salaryBankId.toString().substr(12, 4);
                                     }
                                     
                                     // todo: 在多个输入框之间切换焦点，现在的情况是按tab键，焦点移动到了下一个单元格
                                     // 这里tab好像是被DataGrid强行占用，不起作用，始终是按系统默认执行
                                     // 采取的方法:
                                     //        在一个文本框上输入完成后，自动跳到下一个输入框
                                     //        按左右箭进行各输入框之间进行切换
                                     protected function internal_keyDownHandler(event:KeyboardEvent, previousText: TextInput, nextText: TextInput):void
                                     {
                                         if (event.target.selectionBeginIndex == 4 && event.target.selectionEndIndex == 4 && event.keyCode != Keyboard.LEFT)
                                         {
                                             if (nextText != null)
                                             {
                                                 nextText.setFocus();
                                                 nextText.selectionBeginIndex = 0;
                                                 nextText.selectionEndIndex = 4;
                                                 
                                             }
                                         }
                                         else if (event.target.selectionBeginIndex == 0 && event.target.selectionEndIndex == 0 && event.keyCode == Keyboard.LEFT)
                                         {
                                             if (previousText != null)
                                             {
                                                 previousText.setFocus();
                                                 previousText.selectionBeginIndex = 0;
                                                 previousText.selectionEndIndex = 4;
                                             }
                                         }
                                     }
 
                                 ]]>
                             </mx:Script>
                             <mx:TextInput id="p1" width="45" maxChars="4" restrict="0-9" keyDown="internal_keyDownHandler(event, null, p2)"/>
                             <mx:TextInput id="p2" width="45" maxChars="4" restrict="0-9" keyDown="internal_keyDownHandler(event, p1, p3)"/>
                             <mx:TextInput id="p3" width="45" maxChars="4" restrict="0-9" keyDown="internal_keyDownHandler(event, p2, p4)"/>
                             <mx:TextInput id="p4" width="45" maxChars="4" restrict="0-9" keyDown="internal_keyDownHandler(event, p3, null)"/>
                         </mx:HBox>
                     </mx:Component>
                 </mx:itemEditor>
             </mx:DataGridColumn>
         </mx:columns>
     </mx:DataGrid>
     
     <mx:Button label="显示XML数据">
         <mx:click>
             <![CDATA[
                 employeesAsStr.text = employeeCollection.toXMLString();
             ]]>
         </mx:click>
     </mx:Button>
     
     <!--直接将employeeCollection与text绑定，并不起作用，目前还没有分析出来是什么原因-->
     <mx:TextArea id="employeesAsStr" text="{employeeCollection}" width="{dg.width}" height="250"/>
     
 </mx:Application>