這篇博客是分享給大家使用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)
@ResponseBodypublic 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給對了，那么一切就順利成章了。