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

最新推荐文章于 2018-08-01 23:04:17 发布

转载最新推荐文章于 2018-08-01 23:04:17 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/iihe602/articles/1561203.html

本文详细介绍如何在Flex中利用DataGrid组件结合RadioButtonGroup、CheckBox、ComboBox等多种UI元素实现复杂的数据展示与编辑功能，包括自定义编辑器和渲染器、日期格式转换及分组输入技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能描述
在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              
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                                  <![CDATA[
116                                     public function get value(): Object
117                                     {
118                                         /*注意：月份是从0开始的，所以必须加1*/
119                                         return df.selectedDate.fullYear.toString() + "/" + (df.selectedDate.month+1).toString() + "/" + df.selectedDate.date.toString();
120                                     }
121
122                                     override public function set data(value:Object) : void
123                                     {
124                                         super.data = value;
125                                         var datestr: String = value.birthday.toString();
126                                         var tempDate:Date = null;
127                                         var re:RegExp = null;
128
129                                         /*yyyy-mm-dd*/
130                                         re = /(\d{4})[-\/](\d{1,2})[-\/](\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              
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(): Object
169                                     {
170                                         //由于HBox不能够直接返回value，需要写一个value的getter函数
171                                         return citiesComboBox.selectedItem;
172                                     }
173
174                                     override public function set data(value:Object) : void
175                                     {
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              
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(): Object
197                                     {
198                                         return cbMarried.selected ? "已婚" : "未婚";
199                                     }
200
201                                     override public function set data(value:Object) : void
202                                     {
203                                         super.data = value;
204                                         cbMarried.selected = value.married == "已婚";
205                                     }
206                                  ]]>
207                              </ mx:Script >
208                              < mx:CheckBox id ="cbMarried" />
209                          </ mx:Box >
210                      </ mx:Component >
211                  </ mx:itemRenderer >
212              </ mx:DataGridColumn >
213
214              
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) : void
222                                     {
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(): Object
244                                     {
245                                         return p1.text + p2.text + p3.text + p4.text;
246                                     }
247
248                                     //listitem把数据赋值给编辑组件时，被执行
249                                     override public function set data(value:Object) : void
250                                     {
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):void
264                                     {
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      
308      < mx:TextArea id ="employeesAsStr" text ="{employeeCollection}" width ="{dg.width}" height ="250" />
309
310 </ mx:Application >
311

转载于:https://www.cnblogs.com/iihe602/articles/1561203.html