EasyUI使用心得 DataGrid批量行修改提交以及后台参数接收

EasyUI使用心得 DataGrid批量行编辑提交以及后台参数接收

前端页面代码

			<fieldset style = "height:300px;width:555px;border-width:thin;border-color: #EAEAEA;overflow:scroll;display:block;">
				<form id = "saveForm" method="post">
					<table id="testTable" class="easyui-datagrid" title="工作登记" style="width:1100px;height:auto"
							data-options="
								iconCls: 'icon-edit',
								singleSelect: true,
								toolbar: '#tb',
								method: 'get',
								onClickRow: onClickRow
							">
						<thead>
							<tr>
								<th data-options="field:'workDate',width:120,editor:{type:'datebox',options:{required:true,editable:false}}">登记日期</th>
								<th data-options="field:'taskType',width:220,formatter:function(value,row){return row.configName;},
										editor:{
											type:'combobox',
											options:{
												valueField:'id',
												textField:'configName',
												method:'get',
												url:'${pageContext.request.contextPath }/json/getWorkType.do',
												required:true
											}
										}">工作内容</th>
							    <th data-options="field:'taskCounts',width:80,editor:{type:'numberbox',options:{min:1,required:true}}">任务数量</th>
								<th data-options="field:'hours',width:100,editor:{type:'numberbox',options:{max:24}}">工作时数(小时)</th>
								<th data-options="field:'mins',width:100,editor:{type:'numberbox',options:{min:0,max:59}}">工作时数(分钟)</th>
								<th data-options="field:'taskDetail',width:470,editor:{type:'textbox',options:{required:true}}">工作描述</th>
							</tr>
							
						</thead>
					</table>
				 
					<div id="tb" style="height:auto">
						<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">添加</a>
						<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">删除</a>
						<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">提交</a>
					</div>
					<input type="hidden"  id="yearMonH" name="yearMonH"/>
				</form>
			</fieldset>

JS代码以及提交

动态添加删除编辑datagrid行信息
var editIndex = undefined;
	function endEditing(){
		if (editIndex == undefined){return true}
		if ($('#testTable').datagrid('validateRow', editIndex)){
		//下拉框内容回显
			var ed = $('#testTable').datagrid('getEditor', {index:editIndex,field:'taskType'});
			var configName = $(ed.target).combobox('getText');
			$('#testTable').datagrid('getRows')[editIndex]['configName'] = configName; 
			$('#testTable').datagrid('endEdit', editIndex);
			editIndex = undefined;
			return true;
		} else {
			return false;
		}
	}
	function onClickRow(index){
		if (editIndex != index){
			if (endEditing()){
				$('#testTable').datagrid('selectRow', index).datagrid('beginEdit', index);
				editIndex = index;
			} else {
				$('#testTable').datagrid('selectRow', editIndex);
			}
		}
	}
	function append(){
		if (endEditing()){
			 var date = new Date();
			 var year = date.getFullYear();
			 var mon = date.getMonth()+1; 
			 var day = date.getDate();
			 var yearMon = year+"-"+(mon+1);
			 var yearMDay =  year+"-"+mon+"-"+day;	
			$('#testTable').datagrid('appendRow',{taskCounts:'1',workDate:'yearMDay'});
			editIndex = $('#testTable').datagrid('getRows').length-1;
			$('#testTable').datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);
		}
	}
	function removeit(){
		if (editIndex == undefined){return}
		$('#testTable').datagrid('cancelEdit', editIndex).datagrid('deleteRow', editIndex);
		editIndex = undefined;
	}
	function accept(){
		if (endEditing()){
			$('#testTable').datagrid('acceptChanges');
		}
		checkForm();	
	}
	//提交ajax代码，提交成功后清空内容
		function checkForm(){
		if(!$("#saveForm").form("validate")){
			$.messager.alert("提示","请完成表单填写！","warning");
			return;
		}
		var rows=$('#testTable').datagrid('getChanges');//获取所有被修改的数据
		if(rows.length<1){
			$.messager.alert("提示","请至少添加一条数据！","warning");
			return;
		}
		var workLog=JSON.stringify(rows);//转为json格式的字符串
		$.ajax({
			url:'${pageContext.request.contextPath}/workLog/save.do',
			type:'POST',
			data:{workLog:workLog},
			dataType:'json',
			success:function(data){
				if(data.code != 0){
					$.messager.alert("提示",data.message,"warning");
					clear();
					return;
				} else {
					$.messager.alert("提示",data.message,"info",function(){
						clear();
						$('#testTable').datagrid('loadData',{total:0,rows:[]});
					});
				}
			},
			error:function(){
				$.messager.alert("提示","保存失败","warning");
				clear();
			}
		});
	}

后台代码接受

@RequestMapping("/save")
	public @ResponseBody ResultInfo save(HttpServletRequest request) throws Exception {
		ResultInfo ri=new ResultInfo(PlatformReminder.SERVER_ERROR);
		try {
			String workLogs = request.getParameter("workLog");
			JSONArray jsonArray = JSONArray.parseArray(workLogs);//直接解析成数组
		   List<WorkLog> list = JSONObject.parseArray(jsonArray.toJSONString(), WorkLog.class);
			//得到list进行后续处理
			。。。。。。
		}catch (Exception e) {
			LogUtil.ERROR.error("异常", e);
		}
		return ri;
	}

效果图如下：