加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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>

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

(待续)

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读