easyui-editing datagrid 批量保存数据一

最新推荐文章于 2019-08-07 08:59:54 发布

原创

最新推荐文章于 2019-08-07 08:59:54 发布 · 9.9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#easyui

本文探讨了使用easyUI框架在前端批量编辑数据并一次性保存到后台的两种方法。首先介绍了getChanges()方法，用于获取已更改的行，并展示了如何在后台处理这些变更。然而，当结合使用updateRow方法时，getChanges无法捕获updateRow更新的数据，为解决这个问题，文章预告下篇博客将继续讨论。

这篇博客是分享给大家使用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