这篇博客是分享给大家使用easyUI 框架从界面向后台传值的两种方法。使用easyui 已经有一段时间，没有很深入的学习过，只是停留在可以简单使用的层面上，这次由于项目需要，前台界面的需求比较多，所以对easyui的使用，在这段时间，从量上，使用的深度上有了一个大的跨越，特别是datagrid 。然后回顾以前使用的一些经验，整理了这篇博客。

先看效果图：我需要将表格中数据如红色框中的数据，统一编辑修改之后，一起保存。

\

这里有两种方法，咱们先来看第一种：

一、——使用getChanges

可以使用easyui 提供的便捷的方法getchanges();

getChanges:从上一次的提交获取改变的所有行。类型参数指明用哪些类型改变的行，可以使用的值有：inserted,deleted,updated等。当类型参数未配置的时候返回所有改变的行。我们来看看具体是如何使用的。

	function save(){
    		if ($('#dg').datagrid('getChanges').length) {
    	        var inserted = $('#dg').datagrid('getChanges', inserted);
    	        var updated = $('#dg').datagrid('getChanges', updated);


html" name="code">
var deleted = $('#dg').datagrid('getChanges', deleted);


// 统一放到一个json中传递 var effectRow = new Object(); if (inserted.length) { effectRow[inserted] = JSON.stringify(inserted); } if (updated.length) { effectRow[updated] = JSON.stringify(updated); }


 






if (deleted.length) { effectRow[deleted] = JSON.stringify(deleted); }


		// $.post jquery中简单的异步提交，如果需要错误处理，需使用$.ajax.


$.post(getRootPath()+/labour/update.do, effectRow, function(data) { if(data.success){ $('#dg').datagrid('acceptChanges');


			$('#dg').datagrid('reload');


} }, JSON).error(function() { alert('error'); }); }; }




 


 


后台的接收： 从后台接收到对应的json ,可以做对应的增，删，改操作。


 




import net.sf.json.JSONArray; import net.sf.json.JSONObject; 


@RequestMapping(/update.do)@ResponseBodypublic Object save(HttpServletRequest request) {//获取编辑数据 这里获取到的是json字符串String inserted = request.getParameter(inserted);String updated = request.getParameter(updated);ListlistUpdated = new ArrayList();List listInserted = new ArrayList();if(inserted != null){//把json字符串转换成对象JSONArray jsonArr = JSONArray.fromObject(inserted); for (int i = 0; i < jsonArr.size(); i++) { listInserted.add((JobContentDetail)JSONObject.toBean(jsonArr.getJSONObject(i), JobContentDetail.class)); } try {labourservice.saveEntities(listInserted);} catch (Exception e) {e.printStackTrace();return createErrorMessage(e.getMessage()).toString();}}if(updated != null){ //把json字符串转换成对象JSONArray jsonArr = JSONArray.fromObject(updated); for (int i = 0; i < jsonArr.size(); i++) { listUpdated.add((JobContentDetail)JSONObject.toBean(jsonArr.getJSONObject(i), JobContentDetail.class)); } try {labourservice.saveEntities(listUpdated);} catch (Exception e) {e.printStackTrace();return createErrorMessage(e.getMessage()).toString();}}return createSuccessMessage(操作成功！).toString();}


 




 


 


第一种方法固然好，但是发现有一个问题就是，假如，我在datagrid中使用了“updaterow”方法，那么，easyui的getchanges方法，是拿不到这些updateRow 改变的数据，如下所示：


 


function rowsave() {
    var drow = snl.datagrid('getSelected');
    var index = snl.datagrid('getRowIndex', drow);
    snl.datagrid('updateRow', {
        index: index,
        row: {
            SeriesNumber: 电话号码,
            SeriesName: 姓名
        }
    });
    });


保存数据的时候能正常保存到表单里面去,但是用：var rows =snl.datagrid('getChanges'); 读取数据，读取到的rows为0


 


那么怎么办，如何拿到表格中既有删除，又有添加，还有被“updateRow”更新的数据呢？


 


 


easyui-editing datagrid 批量保存数据 二 


\


当我们使用了updaterow来更新了datagrid中的数据时，怎么获取到数据，这里我们不能使用便捷的getchanges ，只能绕一个道了，我们选择一个万无一失的方法，就是通过easyui的getRows来拿到datagrid中所有的数据行。


 


二、第二种———getRows


 


解决方案就是拿到datagrid中所有的数据，json的形式传递。


如何取得datagrid的行数:getRows, 转换成json :JSON.stringify(***);


 


//save all the dada from easyuiDatagrid
function updateDatagrid(num)
{
	var rows = $('#dg').datagrid('getRows');
	var entities = ;


// 循环 datagrid 中现有的数据，并且逐行复制给Entities ，并且转换成json格式


// 在后台反序列话成对象的对象集合。
	for(i = 0;i < rows.length;i++)
	{
	   entities = entities  + JSON.stringify(rows[i]);	
	}
	$.ajax({
             url: getRootPath()+'/labour/update.do',
             type: post,
             async: true,
             dataType: 'json',
             data: {'entities': entities}
             success: function (data) {
            	 if(data.message==操作成功！){
						alert(data.message);
					}else{
						alert(data.message);
						return;
					}
                 $('#dg').datagrid('reload');
             }
           });
   
	}




 


后台的接收： 这里使用的解析json的工具是 net.sf.json。主要使用的是jsonarray 和jsonobject ，从字面上就可以看出：一个是负责数据/集合的，一个是负责单个对象的。这里我们要解析的是数组，所以使用的是jonsarray中的tocollection 方法，jsonarray还有很多其他方法,有兴趣的可以看看。


具体的代码如下:


 


	import net.sf.json.JSONArray;
	import net.sf.json.JSONObject;	


@Override

@RequestMapping(update.do)
@ResponseBody











	public String update(HttpServletRequest request) {
		//1、 get the detail data
		String ens = request.getParameter(entities);
		
		// 2、format the string
		ens = ens.replace(}{, },{);
		ens = [ + ens.toString() + ];


		// 3. transform to the object list
		JSONArray array =JSONArray.fromObject(ens.toString());
		@SuppressWarnings(unchecked)
		List listDetail=(List)JSONArray.toCollection(array, JobContentDetail.class);
		try {
			labourservice.saveData(listDetail);
		} catch (Exception e) {
			e.printStackTrace();
			return createErrorMessage(操作失败！).toString();
		}
		return createSuccessMessage(操作成功！).toString();
	}




 


三、使用心得


一边编辑，一边保存也好；先编辑，后批量保存也好，他们的解决方案都是一样的，因为easyui的datagrid （当然还有combobox)的接收数据类型是json ，所以，我们只要可以拿到前台显示的json数据，所有的东西就好解决了，从前台向后台传递，只要URL给对了，那么一切就顺利成章了。