功能描述 在DataGrid中，综合使用一些组件，包括RadioButtonGroup、checkbox、ComboBox等技术点说明 itemRender和itemEditor的用法 renderIsEditor = true，可以始终显示Editor 将多种不同格式的日期字符串使用正则表达式转换成日期类型，默认不能直接将yyyy-mm-dd格式直接转换成日期 工资账号分组编辑 复选框(CheckBox)、单选框(RadioButtonGroup)、下拉列表框(ComboBox)的用法 日期选择(DateField)，出生日期使用 renderIsEditor 更多的细节可以直接看代码中的注释预览代码下载baseUsing.mxmlhttp://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 =& amp;nbsp;("北京,天津,河北,内蒙古,山西,上海,安徽,江苏,浙江,山东,福建,江西,广东,广西,海 南," + 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 ==& amp;nbsp;"已婚" ? "已婚" : "未婚"; 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 =& amp;nbsp;"日期输入错误。"; 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 } 100 ]]>101 </mx:Script>102 <mx:RadioButtonGroup id="sexGroup"/>103 <mx:RadioButton groupName="sexGroup" label="男" value="男"/>104 <mx:RadioButton groupName="sexGroup" label="女" value="女"/>105 </mx:HBox>106 </mx:Component>107 </mx:itemRenderer>108 </mx:DataGridColumn>109 110 <mx:DataGridColumn headerText="出生日期" dataField="birthday" editorDataField="value" rendererIsEditor="true">111 <mx:itemRenderer>112 <mx:Component>113 <mx:Box>114 <mx:Script>115 <[-\/](\d{1,2})/;131 if (tempDate == null && re.test(datestr))132 { 133 datestr = datestr..replace(re, "$1/$2/$3");134 tempDate = new Date(datestr);135 }136 137 /* mm-dd-yyyy */138 re = /(\d{1,2})[-\/](\d{1,2})[-\/](\d{4})/;139 if (tempDate == null && re.test(datestr))140 {141 datestr = datestr..replace(re, "$3/$1/$2");142 tempDate = new Date(datestr);143 }144 145 if (tempDate != null)146 df.selectedDate = tempDate;147 }148 ]]>149 </mx:Script>150 <mx:DateField id="df" width="100%" formatString="YYYY-MM-DD"/>151 </mx:Box>152 </mx:Component>153 </mx:itemRenderer>154 </mx:DataGridColumn>155 156 <!--注意不同日期格式转换成日期类型的算法，由于as默认并不支持将yyyy-mm-dd中国常用的日期格式直接转换成日期类 型，157 因此这里使用正则表达式进行匹配并转换-->158 <mx:DataGridColumn headerText="年龄（计算）" dataField="age" editable="false" labelFunction="age_labelFunction" color="gray"/>159 160 <mx:DataGridColumn headerText="籍贯" dataField="city" editorDataField="value">161 <mx:itemEditor>162 <mx:Component>163 <mx:HBox>164 <mx:Script>165 <![CDATA[166 import mx.utils.ArrayUtil;167 168 public function get value(): Object169 {170 // 由于HBox不能够直接返回value，需要写一个value的getter函数171 return citiesComboBox.selectedItem;172 }173 174 override public function set data(value:Object) : void175 {176 // 必须要给data复制，否则会导致程序崩溃177 super.data = value;178 // 给combobox赋初始值179 citiesComboBox.selectedItem = value.city;180 } 181 ]]>182 </mx:Script>183 <mx:ComboBox id="citiesComboBox" dataProvider="{ArrayUtil.toArray(outerDocument.cities)}" width="100%"/>184 </mx:HBox>185 </mx:Component>186 </mx:itemEditor>187 </mx:DataGridColumn>188 189 <!--在表格中使用checkbox，注意是如何将实际数据和显示数据进行转换的-->190 <mx:DataGridColumn headerText="婚否" dataField="married" editorDataField="value" rendererIsEditor="true">191 <mx:itemRenderer>192 <mx:Component>193 <mx:Box horizontalAlign="center">194 <mx:Script>195 <![CDATA[196 public function get value(): Object197 {198 return cbMarried.selected ? " 已婚" : "未 婚"; 199 }200 201 override public function set data(value:Object) : void202 {203 super.data = value;204 cbMarried.selected =& amp;nbsp;value.married == "已婚"; & amp;nbsp; 205 }206 ]]>207 </mx:Script>208 <mx:CheckBox id="cbMarried"/>209 </mx:Box> 210 </mx:Component>211 </mx:itemRenderer>212 </mx:DataGridColumn>213 214 <!--将工资账号进行4位一组，便于输入；显示时也是4位一组，便于阅读；但实际存储是连续 的-->215 <mx:DataGridColumn headerText="工资账号" dataField="salaryBankId" width="240" editorDataField="value">216 <mx:itemRenderer>217 <mx:Component>218 <mx:HBox>219 <mx:Script>220 <![CDATA[221 override public function set data(value:Object) : void222 {223 super.data = value;224 // 为了便于查看，进行了4位分组，实际存储仍然是连续的225 p1.text = value.salaryBankId.toString().substr(0, 4)226 + " " + value.salaryBankId.toString().substr(4, 4)227 + " " + value.salaryBankId.toString().substr(8, 4)228 + " " + value.salaryBankId.toString().substr(12, 4);229 }230 ]]>231 </mx:Script>232 <mx:Label id="p1"/>233 </mx:HBox>234 </mx:Component>235 </mx:itemRenderer>236 <mx:itemEditor>237 <mx:Component>238 <mx:HBox tabChildren="true">239 <mx:Script>240 <![CDATA[241 import mx.managers.FocusManager;242 // 从编辑组件获取输入值时被执行，这个函数的名称和editorDataField是对应的243 public function get value(): Object244 {245 return p1.text + p2.text + p3.text + p4.text;246 }247 248 //listitem 把数据赋值给编辑组件时，被执行249 override public function set data(value:Object) : void250 {251 super.data = value;252 p1.text = value.salaryBankId.toString().substr(0, 4);253 p2.text = value.salaryBankId.toString().substr(4, 4);254 p3.text = value.salaryBankId.toString().substr(8, 4);255 p4.text = value.salaryBankId.toString().substr(12, 4);256 }257 258 // todo: 在多个输入框之间切换焦点，现在的情况是按tab键，焦点移动到了下一个单元格259 // 这里tab好像是被DataGrid强行占用，不起作用，始终是按系统默认执行260 // 采取的方法:261 // 在一个文本框上输入完成后，自动跳到下一个输入框262 // 按左右箭进行各输入框之间进行切换263 protected function internal_keyDownHandler(event:KeyboardEvent, previousText: TextInput, nextText: TextInput):void264 {265 if (event.target.selectionBeginIndex == 4 && event.target.selectionEndIndex == 4 && event.keyCode != Keyboard.LEFT)266 {267 if (nextText != null)268 {269 nextText.setFocus();270 nextText.selectionBeginIndex = 0;271 nextText.selectionEndIndex = 4;272 273 }274 }275 else if (event.target.selectionBeginIndex == 0 && event.target.selectionEndIndex == 0 && event.keyCode == Keyboard.LEFT)276 {277 if (previousText != null)278 {279 previousText.setFocus();280 previousText.selectionBeginIndex = 0;281 previousText.selectionEndIndex = 4;282 }283 }284 }285 286 ]]>287 </mx:Script>288 <mx:TextInput id="p1" width="45" maxChars="4" restrict="0-9" keyDown="internal_keyDownHandler(event, null, p2)"/>289 <mx:TextInput id="p2" width="45" maxChars="4" restrict="0-9" keyDown="internal_keyDownHandler(event, p1, p3)"/>290 <mx:TextInput id="p3" width="45" maxChars="4" restrict="0-9" keyDown="internal_keyDownHandler(event, p2, p4)"/>291 <mx:TextInput id="p4" width="45" maxChars="4" restrict="0-9" keyDown="internal_keyDownHandler(event, p3, null)"/>292 </mx:HBox>293 </mx:Component>294 </mx:itemEditor>295 </mx:DataGridColumn>296 </mx:columns>297 </mx:DataGrid>298 299 <mx:Button label="显示XML数据">300 <mx:click>301 <![CDATA[302 employeesAsStr.text = employeeCollection.toXMLString();303 ]]>304 </mx:click>305 </mx:Button>306 307 <!--直接将employeeCollection与text绑定，并不起作用，目前还没有分析出来是什么原 因-->308 <mx:TextArea id="employeesAsStr" text="{employeeCollection}" width="{dg.width}" height="250"/>309 310 </mx:Application>311 相关文章： 2021-04-07 2021-12-29 2021-09-08 2022-01-15 2021-06-20 2021-08-21 2021-09-12