会员
周边
新闻
博问
AI培训
云市场
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
静候良机
记录iOS和Mac的学习历程。
博客园
首页
新随笔
联系
订阅
管理
在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 =& 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
<![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
<!--
注意不同日期格式转换成日期类型的算法,由于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(): 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
<!--
在表格中使用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(): 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 =& 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) : 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
<!--
直接将employeeCollection与text绑定,并不起作用,目前还没有分析出来是什么原 因
-->
308
<
mx:TextArea
id
="employeesAsStr"
text
="{employeeCollection}"
width
="{dg.width}"
height
="250"
/>
309
310
</
mx:Application
>
311
posted @
2009-09-24 21:51
静候良机
阅读(
1856
) 评论(
1
)
编辑
收藏
举报
会员力量,点亮园子希望
刷新页面
返回顶部
公告