这篇博客是分享给大家使用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给对了,那么一切就顺利成章了。