easyui-editing datagrid 批量保存数据 一
来源：互联网 发布：尔雅网络课程手机登录 编辑：程序博客网 时间：2024/04/29 18:56
这篇博客是分享给大家使用easyUI 框架从界面向后台传值的两种方法。使用easyui 已经有一段时间，没有很深入的学习过，只是停留在可以简单使用的层面上，这次由于项目需要，前台界面的需求比较多，所以对easyui的使用，在这段时间，从量上，使用的深度上有了一个大的跨越，特别是datagrid 。然后回顾以前使用的一些经验，整理了这篇博客。
先看效果图：我需要将表格中数据如红色框中的数据，统一编辑修改之后，一起保存。
这里有两种方法，咱们先来看第一种：
一、——使用getChanges
可以使用easyui 提供的便捷的方法getchanges();
getChanges:从上一次的提交获取改变的所有行。类型参数指明用哪些类型改变的行，可以使用的值有：inserted,deleted,updated等。当类型参数未配置的时候返回所有改变的行。我们来看看具体是如何使用的。
- <span style="font-family:KaiTi_GB2312;font-size:18px;">function save(){
- if ($('#dg').datagrid('getChanges').length) {
- var inserted = $('#dg').datagrid('getChanges', "inserted");
- var updated = $('#dg').datagrid('getChanges', "updated");</span>
- <span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="white-space:pre"> </span>var deleted = $('#dg').datagrid('getChanges', "deleted");<span style="background-color: rgb(255, 255, 255);"> </span><span style="background-color: rgb(255, 255, 255);"> </span></span>
- <span style="white-space:pre"> </span>// 统一放到一个json中传递
- <span style="white-space:pre"> </span>var effectRow = new Object();
- <span style="white-space:pre"> </span>if (inserted.length)
- <span style="white-space:pre"> </span>{
- <span style="white-space:pre"> </span>effectRow["inserted"] = JSON.stringify(inserted);
- <span style="white-space:pre"> </span> }
- <span style="white-space:pre"> </span>if (updated.length) {
- <span style="white-space:pre"> </span>effectRow["updated"] = JSON.stringify(updated);
- <span style="white-space:pre"> </span> }
if (deleted.length) {
- <span style="font-family:KaiTi_GB2312;font-size:18px;"> effectRow["deleted"] = JSON.stringify(deleted);
- }</span>
- <span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="white-space:pre"> </span>// $.post jquery中简单的异步提交，如果需要错误处理，需使用$.ajax.</span>
- $.post(getRootPath()+"/labour/update.do", effectRow, function(data)
- {
- if(data.success){
- $('#dg').datagrid('acceptChanges');
- $('#dg').datagrid('reload');
- } }, "JSON").error(function() { alert('error'); }); }; }
后台的接收： 从后台接收到对应的json ,可以做对应的增，删，改操作。
- <span style="font-family:KaiTi_GB2312;font-size:18px;">import net.sf.json.JSONArray;
- import net.sf.json.JSONObject;</span>
- <span style="font-family:KaiTi_GB2312;font-size:18px;">@RequestMapping("/update.do")
- @ResponseBody
- public Object save(HttpServletRequest request) {
-
- String inserted = request.getParameter("inserted");
- String updated = request.getParameter("updated");
- List<JobContentDetail> listUpdated = new ArrayList<JobContentDetail>();
- List<JobContentDetail> listInserted = new ArrayList<JobContentDetail>();
- if(inserted != null){
-
- 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){
-
- 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();
- }</span>
第一种方法固然好，但是发现有一个问题就是，假如，我在datagrid中使用了“updaterow”方法，那么，easyui的getchanges方法，是拿不到这些updateRow 改变的数据，如下所示：
- <span style="font-family:KaiTi_GB2312;font-size:18px;">function rowsave() {
- var drow = snl.datagrid('getSelected');
- var index = snl.datagrid('getRowIndex', drow);
- snl.datagrid('updateRow', {
- index: index,
- row: {
- SeriesNumber: "电话号码",
- SeriesName: "姓名"
- }
- });
- });</span>
var rows =snl.datagrid('getChanges'); 读取数据，读取到的rows为0
那么怎么办，如何拿到表格中既有删除，又有添加，还有被“updateRow”更新的数据呢？
下篇博客继续。
版权声明：本文为博主原创文章，未经博主允许不得转载。
0 0
