easyui datagrid如批量提交更改數據到後臺

這篇博客是分享給你們使用easyUI 框架從界面向後臺傳值的兩種方法。使用easyui 已經有一段時間，沒有很深刻的學習過，只是停留在能夠簡單使用的層面上，此次因爲項目須要，前臺界面的需求比較多，因此對easyui的使用，在這段時間，從量上，使用的深度上有了一個大的跨越，特別是datagrid 。而後回顧之前使用的一些經驗，整理了這篇博客。

先看效果圖：我須要將表格中數據如紅色框中的數據，統一編輯修改以後，一塊兒保存。

這裏有兩種方法，我們先來看第一種：

1、——使用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) {
		//一、 get the detail data
		String ens = request.getParameter(entities);
		
		// 二、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();
	}

 

3、使用心得

一邊編輯，一邊保存也好；先編輯，後批量保存也好，他們的解決方案都是同樣的，由於easyui的datagrid （固然還有combobox)的接收數據類型是json ，因此，咱們只要能夠拿到前臺顯示的json數據，全部的東西就好解決了，從前臺向後臺傳遞，只要URL給對了，那麼一切就順利成章了。