批量保存EasyUI-datagrid中的数据

最近做的一个项目中需要实现一个功能：先对EasuUI-datagrid中的数据进行编辑，编辑过后点击保存按钮会将之前编辑的datagrid中的所有数据保存到数据库中。示意图如下：

如图中所示，系数这一列是可以编辑的，当编辑之后，点击保存按钮即可将该datagrid表中的数据保存到数据库中。我实现该功能的过程如下：

1. 获取datagrid中的所有数据，将其拼接成json格式字符串数组

2. 通过JQuery的Ajax将这个json格式字符串数组传递到后台

下面描述这两个步骤的具体实现方法：

第一步：获取datagrid中的所有数据，将其拼接成json格式字符串数组

var addrows = $("#additem").datagrid('getRows'); //获取加项列表中的所有行，上面截图中datagrid的"id=additem"var str = [];        //声明一个数组，是一个数组对象for(var i=0; i<addrows.length; i++) {    var arr = {};           //声明一个对象    arr.sumID = addrows[i].sumID;  //未在datagrid中显示该字段,但数据库中存在，并且后面后台的保存操作也是根据该字段来进行    arr.itemname = addrows[i].itemname;  //名称    arr.coefficient = addrows[i].coefficient;   //系数    str[i] = arr;   //}console.log(str);   //打印str这个json字符串

在Chrome浏览器中调用Developer Tools可以观察到上述代码中 str 的值，格式为：[{…}, {…}, {…}]，截图如下：

第二步：通过JQuery的Ajax将这个json格式字符串数组传递到后台

$.ajax({    url: '<%=path%>/equaConfig!saveEquations',    type: 'post',    dataType: 'json',    data: {        equations: JSON.stringify(str),  //JSON.stringify() 方法用于将JavaScript值转换为 JSON 字符串，缺少此句传到后台的则为空值        sumID: sumID  //datagrid未显示出来的那个字段，表中的三行的这个字段相同，都为1L，传递到后台供保存到数据库时使用    },    success: function(response) {  //后台返回的要显示的消息        $.messager.show({            title:'提示',            msg: response.msg        });    }});

这部分代码中要注意：调用JSON.stringify()方法把步骤一中的 str（要保存的datagrid中的数据） 转换成Json字符串，否则，传递到后台的是空值。后台使用Hibernate批量保存前台传递过去的数据的方法将在下一篇说明。

如果我写的内容对你有一些帮助，还请点个赞或者手动评论一下哦，给点正反馈嘛(＾＿＾)☆当然了，我也是才开始学习这些知识，肯定会有很多错误的地方，希望大家能帮我指出来，谢谢大家，一起进步~