Flex表单自动填充与表单数据自动收集
?如题,以下代码展示如何讲界面的表单域的值自动归集到指定对象,以及如何用指定对象自动填充表单域,思路很简单,但用起来挺方便的,代码结构不算好,但挺稳定的,所以也懒得去重构了。
简单的说下原理:
1 收集表单数据,通过指定容器对象,对容器进行递归遍历,当发现是表单域时,判断对象是否有表单域名称相同的属性,如果有则将表单域的值设置到对象中。
2 同理重置表单和自动填充表单对1做反向操作就行,只是对下拉、radio等会自动定位判断。
问题:
1 当界面的表单值对应到多个对象时要自动封装怎么办,很简单,调用多次wrapperFormData(container:Object,bo:Object)就行。
2 当界面的表单值对应到多个对象时要自动填充怎么办,同样,调用多次fillForm(rec:Object,container:Object)就行。
支持flex3和flex4版本。
?
package xxx.service{import mx.controls.CheckBox;import mx.controls.ComboBox;import mx.controls.DateField;import mx.controls.RadioButton;import mx.controls.RadioButtonGroup;import mx.controls.TextArea;import mx.controls.TextInput;import mx.core.Container;import mx.core.IVisualElementContainer;import spark.components.BorderContainer;import spark.components.CheckBox;import spark.components.ComboBox;import spark.components.DropDownList;import spark.components.RadioButton;import spark.components.RadioButtonGroup;import spark.components.TextArea;import spark.components.TextInput;/** * 表单数据收集和填充服务 * 收集过程:通过遍历容器,提取容器种的表单控件,将表单控件的id与值作为对象的属性与值写入对象 * 赋值过程:通过遍历容器,提取容器种的表单控件,如果数据源中包含表单控件的id,则对该控件赋值 */public class FormParser{private static var _instance:FormParser=new FormParser();public function FormParser(){}public static function getInstance():FormParser{return _instance;}public function wrapperFormData(container:Object,bo:Object):void { if(bo==null) { throw new Error("收集表单数据的对象不能为空!"); }var count:Number=container.numChildren; for(var i:Number=0;i<count;i++) {var obj:Object=container.getChildAt(i);if(isTextField(obj)) { appendProperty(bo,obj,obj.text); } else if(isCheckBox(obj)) { appendProperty(bo,obj,obj.selected?"1":"0"); } else if(isRadioButton(obj)) { if(obj.groupName!=null) { bo[obj.groupName]=obj.group.selectedValue; continue; } if(obj.selected) { appendProperty(bo,obj,obj.value); } } else if(isComboBox(obj)) { var result:Object=(obj.selectedItem==null||obj.selectedItem is String||!obj.selectedItem.hasOwnProperty("data"))?null:obj.selectedItem.data; appendProperty(bo,obj,result); }else if(isDropDownList(obj)){var dr:DropDownList=obj as DropDownList;appendProperty(bo,obj,dr.selectedItem.data);} else if(isRadioButtonGroup(obj)) { //取不到 } else if(obj is Container||obj is IVisualElementContainer) { wrapperFormData(obj,bo); } } } /*** * 为对象增加指定属性和属性值 */ private function appendProperty(bo:Object,obj:Object,propertyValue:Object):void { if(!obj.hasOwnProperty("id")) { return; } bo[obj["id"]]=propertyValue; } /*** * 重置form中的项 */public function resetForm(container:Object):void {var count:Number=container.numChildren;for(var i:Number=0;i<count;i++){var obj:Object=container.getChildAt(i);if(isTextField(obj)) { obj.text=""; } else if(isCheckBox(obj)) { obj.selected=false; } else if(isRadioButton(obj)) { if(obj.groupName!=null) {obj.group.selectedValue=null; continue; } if(obj.groupName==undefined||obj.groupName=="") { obj.selected=false; } } else if(isComboBox(obj)) { obj.selectedIndex=0; } else if(isRadioButtonGroup(obj)) { obj.selectedValue=obj.getRadioButtonAt(1).value; }else if(isDropDownList(obj)){obj.selectedIndex=0;} else if(obj is Container|| obj is IVisualElementContainer) { resetForm(obj); } } } /*** * 根据对象填充表单 */ public function fillForm(rec:Object,container:Object):void { if(rec==null) { throw new Error("指定的数据源为空!"); }var count:Number=container.numChildren;for(var i:Number=0;i<count;i++){var obj:Object=container.getChildAt(i); var name:String=getObjectName(rec,obj); if(isFormControl(obj)) { if(name==null) { continue; } } var value:String=getValue(rec,name);if(isTextField(obj)){ obj.text=value; } else if(isCheckBox(obj)) { if(value=="1") { obj.selected=true; } } else if(isRadioButton(obj)) { if(obj.groupName!=null) {obj.group.selectedValue=value; } else { if(obj.data==value) { obj.selected=true; } } } else if(isComboBox(obj)||isDropDownList(obj)) { var source:Object=obj.dataProvider; var sel:Object=getItemByData(source,value); if(sel==null) {obj.selectedIndex=0; } else {obj.selectedItem=sel; } } else if(obj is Container||obj is IVisualElementContainer) { fillForm(rec,obj); } } } private function getValue(rec:Object,name:String):String{ return name==null?"":rec[name];}private function getObjectName(rec:Object,obj:Object):String{var name:String=obj.hasOwnProperty("id")?obj.id:null;if(isRadioButton(obj)&&obj&&obj.groupName!=null){name=obj.groupName;}if(rec.hasOwnProperty(name)){return name;}return null;}private function isFormControl(obj:Object):Boolean{if(isTextField(obj)){return true;}if(isCheckBox(obj)||isRadioButton(obj)||isComboBox(obj)){return true;}return false;}/** * source Combox下拉列表数据源 * itemData 下拉数据源中某项的data属性值 * return itemData对应的item */public function getItemByData(source:Object,itemData:Object):Object{if(source==null||itemData==null){return null;}for each(var obj:Object in source){if(obj.data==itemData){return obj;}}return null;}private function isDropDownList(obj:Object):Boolean{return obj is DropDownList;}private function isRadioButtonGroup(obj:Object):Boolean{return obj is mx.controls.RadioButtonGroup||obj is spark.components.RadioButtonGroup;}private function isRadioButton(obj:Object):Boolean{return obj is mx.controls.RadioButton||obj is spark.components.RadioButton;}private function isComboBox(obj:Object):Boolean{return obj is mx.controls.ComboBox||obj is spark.components.ComboBox;}private function isCheckBox(obj:Object):Boolean{return obj is mx.controls.CheckBox||obj is spark.components.CheckBox;}private function isTextField(obj:Object):Boolean{if(obj is mx.controls.TextInput||obj is mx.controls.TextArea||obj is mx.controls.DateField||obj is spark.components.TextInput||obj is spark.components.TextArea){return true;}return false;}}}
?
?
?
?