Flex4 DataGrid根据按指定列修改，并同步到数据库中

有时候我们希望只修改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>

展示效果在之前的例子中显示过，这里略之。

（待续）