EasyUI datagrid行编辑-选课系统轮次管理

        最近项目中用到了easyUI datagrid行编辑，根据官网的代码以及根据项目需要进行的改进。其中更为突出的问题，如何将前台获取的Object解析为json字符串传递给后台，然后再后台接收Object。今天介绍另外一种方式，直接将字符串传递给后台。     

html 代码
 <table id="dg" class="easyui-datagrid" title="轮次管理"
		style="width: 100%; height: auto"
		data-options="fitColumns:'true',rownumbers:true,pagination:'true',singleSelect: true,toolbar: '#tb',url:'courseRound',
				method: 'get',onClickRow: onClickRow">
		<thead>
			<tr>
			<th data-options="field:'ck',checkbox:true"></th>
				<th data-options="field:'id', width:100 ,hidden:'hidden'">轮次id</th>
				<th
					data-options="field:'roundNo',width:100,align:'center',editor:{type:'numberbox',options:{precision:1}}">轮次编号</th>
				<th
					data-options="field:'beginTime',width:200,align:'center',
						formatter:function(value,row){
							return row.beginTime;
						},
						editor:{
							type:'datetimebox',
							options:{
								valueField:'beginTime',
								textField:'beginTime',
								method:'get',
								url:'products.json',
								required:true
							}
						}">开始时间</th>
				<th
					data-options="field:'endTime',width:200,align:'center',
						formatter:function(value,row){
							return row.endTime;
						},
						editor:{
							type:'datetimebox',
							options:{
								valueField:'endTime',
								textField:'endTime',
								method:'get',
								url:'products.json',
								required:true
							}
						}">结束时间</th>
				<th
					data-options="field:'lastestQuitTime',width:200,align:'center',
						formatter:function(value,row){
							return row.lastestQuitTime;
						},
						editor:{
							type:'datetimebox',
							options:{
								valueField:'lastestQuitTime',
								textField:'lastestQuitTime',
								method:'get',
								url:'products.json',
								required:true
							}
						}">最晚退选时间</th>
				 <th
				 	data-options="field:'isValid',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">是否启动</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" οnclick="append()">添加</a>
		<a href="javascript:void(0)" class="easyui-linkbutton"
			data-options="iconCls:'icon-remove',plain:true" οnclick="removeit()">删除</a>
		<a href="javascript:void(0)" class="easyui-linkbutton"
			data-options="iconCls:'icon-save',plain:true" οnclick="accept()">保存</a>
		<a href="javascript:void(0)" class="easyui-linkbutton"
			data-options="iconCls:'icon-undo',plain:true" οnclick="reject ()">撤销</a>
		
	</div>

   js代码

/**
 * 
 */
var editIndex = undefined;
function endEditing() {
	if (editIndex == undefined) {
		return true
	}
	if ($('#dg').datagrid('validateRow', editIndex)) {
		var ed = $('#dg').datagrid('getEditor', {
			index : editIndex,
			field : 'beginTime'
		});
		var roundNo = $(ed.target).combobox('getText');
		$('#dg').datagrid('getRows')[editIndex]['roundNo'] = roundNo;
		$('#dg').datagrid('endEdit', editIndex);
		editIndex = undefined;
		return true;
	} else {
		return false;
	}
}
function onClickRow(index) {
	if (editIndex != index) {
		if (endEditing()) {
			$('#dg').datagrid('selectRow', index).datagrid('beginEdit', index);
			editIndex = index;
		} else {
			$('#dg').datagrid('selectRow', editIndex);
		}
	}
}
function append() {
	if (endEditing()) {
		$('#dg').datagrid('appendRow' , { status : 'P' } );
		editIndex = $('#dg').datagrid('getRows').length - 1;
		$('#dg').datagrid('selectRow', editIndex).datagrid('beginEdit',
				editIndex);
	}
}
function removeit() {
	/*if (editIndex == undefined) {
		return;

	} else {*/
		var row = $('#dg').datagrid('getSelected');
		var roundid = row.id;
		$.ajax({
			type : "POST",
			url : "deleRound",
			data : {
				"roundId" : roundid

			},
			success : function(result) {

				if (result == "success") {

					$.messager.alert("提示", "删除轮次成功", "info");
					$('#dg').datagrid("reload");
				} else {
					if (result == "error") {
						$.messager.alert("提示", "删除轮次失败", "info");
						$('#dg').datagrid("reload");
					}
				}

			}
		});
	/*}*/
	
}
function accept() {
	if (endEditing()) {
		
		// 利用easyui控件本身的getChange获取新添加，删除，和修改的内容
		if ($("#dg").datagrid('getChanges').length) {
			var inserted = $("#dg").datagrid('getChanges', "inserted");
			var updated = $("#dg").datagrid('getChanges', "updated");
			
			var url = "";
			if (inserted.length > 0) {
				var strid = inserted[0].id;
				var strroundno = inserted[0].roundNo;
				var strbeginTime = inserted[0].beginTime
				var strendTime = inserted[0].endTime;
				var strlastestQuitTime = inserted[0].lastestQuitTime;
				url = "SaveRound";
			} else {
				var strid = updated[0].id;
				var strroundno = updated[0].roundNo;
				var strbeginTime = updated[0].beginTime
				var strendTime = updated[0].endTime;
				var strlastestQuitTime = updated[0].lastestQuitTime;
                            url="updateRound";
			}
			$.ajax({
				type : "POST",
				url : url,
				data : {
					"roundId" : strid,
					"roundno" : strroundno,
					"beginTime" : strbeginTime,
					"endTime" : strendTime,
					"lastestQuitTime" : strlastestQuitTime
				},
				
				success : function(result) {

					if (result == "success") {
						$.messager.alert('提醒', '保存成功！');

						$('#t').datagrid('loadData', {
							total : 0,
							rows : []
						});
						$('#tt').datagrid('loadData', {
							total : 0,
							rows : []
						});
						$("#tt").datagrid('reload');
						$("#t").datagrid('reload');
					}

				}
			});

		}
	}
}



function reject() {

	$('#dg').datagrid('rejectChanges');
	editIndex = undefined;
}
function getChanges() {
	var rows = $('#dg').datagrid('getChanges');
	
}

效果图

 

      easyui官网提供了html以及公用的js，可以参考原版，然后根据需要进行修改。

      另外参考了以一下博客，感谢博主提供解决思路。

     http://blog.csdn.net/liuyanlinglanq/article/details/43988391