Flex4 DataGrid根据按指定列修改,并同步到数据库中
发布时间:2020-12-15 01:06:08 所属栏目:百科 来源:网络整理
导读:有时候我们希望只修改DataGrid某一列中的某一行值,修改的时候异步到数据库中。这个过程中无刷新页面的情况。 下面我们通过设置DataGrid属性即可完成,首先设置哪些列可编辑,哪些不可编辑。 通过onEditBeginning事件进行设置,如下所示: private function
有时候我们希望只修改DataGrid某一列中的某一行值,修改的时候异步到数据库中。这个过程中无刷新页面的情况。 下面我们通过设置DataGrid属性即可完成,首先设置哪些列可编辑,哪些不可编辑。 通过onEditBeginning事件进行设置,如下所示: private function onEditBeginning(event:DataGridEvent):void { var dataField:String = event.dataField; var relationship:String = dg_list.selectedItem.relationship; var country:String = dg_list.selectedItem.country; //We only want to allow editing of friends. If it's any other relationship,stop right now. //Check if this is a column we want to allow editing //Ya,you could do <mx:DataGridColumn editable="false" etc.../> //But this gives you an idea if you needed to do it conditionally based on the situation. if(dataField!='type') { //Alert.show('对不起,你只能编辑日期类型.'); event.preventDefault(); } } 这样的话,只有类型为type的列具有修改的权限,其他的列都不可以进行编辑。 然后编辑完成后,我们希望同步到数据库中,这时我们要用到?onEditEnd事件,如下所示: public function onEditEnd(event:DataGridEvent):void { /*** * 修改操作 * http://192.168.17.66:8080/Smarter/calendarSetting!setDateType?dateToSet=2011-11-07&typeToSet=2 * */ var cols:DataGridColumn=dg_list.columns[event.columnIndex]; //在这里获取日期 var selectDate:String=event.itemRenderer.data.date; if(selectDate!=null) trace("before:t"+selectDate); if(cols.editorDataField!=null){ //编辑后新的值 var selectDateType:String=dg_list.itemEditorInstance[cols.editorDataField].toString(); //var newValue:String=textInputValue.text; if(selectDateType!=null) trace("affter:t"+selectDateType); if(selectDateType=="工作日"){ mark=1; } else if(selectDateType=="工休日"){ mark=2; } else if(selectDateType=="节假日"){ mark=3; } } //使用httpService方式进行更新操作 var changeDataTypeService:HTTPService=new HTTPService(); changeDataTypeService.method="post"; //post方式更安全 changeDataTypeService.addEventListener(ResultEvent.RESULT,changeDataTypeResultFunc); changeDataTypeService.addEventListener(FaultEvent.FAULT,changeDataTypeFaultFunc); //传输并返回成功时候的值 changeDataTypeService.url = " http://192.168.17.66:8080/Smarter/calendarSetting!setDateType?dateToSet="+selectDate+"&typeToSet="+mark; changeDataTypeService.resultFormat="e4x"; //数据传输方式 changeDataTypeService.useProxy=false; changeDataTypeService.send(); //发送出去 //displayFlagTxt.text="选中的单元可格的数据为 "+(event.target as DataGrid).selectedItem[(event.target as DataGrid).columns[event.columnIndex].dataField]+" n"; } //两个响应函数 public function changeDataTypeResultFunc(event:ResultEvent):void{ var resultMark:String=new String(event.result); var flag:Number=new Number(resultMark); if(flag==1){ Alert.show("修改成功,已更新至数据库中"); } } public function changeDataTypeFaultFunc(event:FaultEvent):void{ var faultMark:String=new String(event.fault); var flag:Number=new Number(faultMark); if(flag==-1){ Alert.show("修改失败,因为日期格式不正确,请重试!!!!"); } else if(flag==0){ Alert.show("修改失败,后台服务器出现异常!"); } } 这样就可以实现按指定列修改,并同步到数据库的效果了 最后还要在DataGrid标签中进行申明之,如下所示: <mx:VBox width="579" height="486" horizontalAlign="center" verticalAlign="middle"> <mx:DataGrid id="dg_list" x="11" y="-1" width="557" height="429" click="dg_list_clickHandler(event)" dataProvider="{acPageData}" editable="true" itemEditBeginning="onEditBeginning(event)" itemEditEnd="onEditEnd(event)" rowCount="{pageSize}"> <mx:columns> <mx:DataGridColumn dataField="id" headerText="日期行号" labelFunction="lfRowNum"/> <mx:DataGridColumn dataField="date" headerText="具体日期"/> <mx:DataGridColumn dataField="type" headerText="日期类型"> <mx:itemEditor> <fx:Component> <mx:ComboBox width="130" change="combobox2_changeHandler(event)" dataProvider="{outerDocument.dayTypeArr}" labelField="label" selectedIndex="{data.flag}"> </mx:ComboBox> </fx:Component> </mx:itemEditor> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> 展示效果在之前的例子中显示过,这里略之。 (待续) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |