<script type="text/javascript">

     $(function() {

         var $dg = $("#dg");

         $dg.datagrid({

             url : "servlet/list",

             width : 700,

             height : 250,

             columns : [ [ {

                 field : 'code',

                 title : 'Code',

                 width : 100,

                 editor : "validatebox"

             }, {

                 field : 'name',

                 title : 'Name',

                 width : 200,

                 editor : "validatebox"

             }, {

                 field : 'price',

                 title : 'Price',

                 width : 200,

                 align : 'right',

                 editor : "numberbox"

             } ] ],

             toolbar : [ {

                 text : "添加",

                 iconCls : "icon-add",

                 handler : function() {

                     $dg.datagrid('appendRow', {});

                     var rows = $dg.datagrid('getRows');

                     $dg.datagrid('beginEdit', rows.length - 1);

                 }

             }, {

                 text : "编辑",

                 iconCls : "icon-edit",

                 handler : function() {

                     var row = $dg.datagrid('getSelected');

                     if (row) {

                         var rowIndex = $dg.datagrid('getRowIndex', row);

                         $dg.datagrid('beginEdit', rowIndex);

                     }

                 }

             }, {

                 text : "删除",

                 iconCls : "icon-remove",

                 handler : function() {

                     var row = $dg.datagrid('getSelected');

                     if (row) {

                         var rowIndex = $dg.datagrid('getRowIndex', row);

                         $dg.datagrid('deleteRow', rowIndex);

                     }

                 }

             }, {

                 text : "结束编辑",

                 iconCls : "icon-cancel",

                 handler :endEdit

             }, {

                 text : "保存",

                 iconCls : "icon-save",

                 handler : function() {

                     endEdit();

                     if ($dg.datagrid('getChanges').length) {

                         var inserted = $dg.datagrid('getChanges', "inserted");

                         var deleted = $dg.datagrid('getChanges', "deleted");

                         var updated = $dg.datagrid('getChanges', "updated");

                         var effectRow = new Object();

                         if (inserted.length) {

                             effectRow["inserted"] = JSON.stringify(inserted);

                         }

                         if (deleted.length) {

                             effectRow["deleted"] = JSON.stringify(deleted);

                         }

                         if (updated.length) {

                             effectRow["updated"] = JSON.stringify(updated);

                         }

                         $.post("servlet/commit", effectRow, function(rsp) {

                             if(rsp.status){

                                 $.messager.alert("提示", "提交成功！");

                                 $dg.datagrid('acceptChanges');

                             }

                         }, "JSON").error(function() {

                             $.messager.alert("提示", "提交错误了！");

                         });

                     }

                 }

             } ]

         });

         function endEdit(){

             var rows = $dg.datagrid('getRows');

             for ( var i = 0; i < rows.length; i++) {

                 $dg.datagrid('endEdit', i);

             }

         }

     });

 </script>

 <body>

     <table id="dg" title="批量操作"></table>

 </body>

 </html>

jQuery UI

 ASP.NET MVC3版本

 //获取编辑数据 这里获取到的是json字符串

 string deleted = Request.Form["deleted"];

 string inserted = Request.Form["inserted"];

 string updated = Request.Form["updated"];

 if(deleted != null){

     //把json字符串转换成对象

     List<Bean> listDeleted = JsonDeserialize<List<Bean>>(deleted);

     //TODO 下面就可以根据转换后的对象进行相应的操作了

 }

 if(inserted != null){

     //把json字符串转换成对象

     List<Bean> listInserted = JsonDeserialize<List<Bean>>(inserted);

 }

 if(updated != null){

     //把json字符串转换成对象

     List<Bean> listUpdated = JsonDeserialize<List<Bean>>(updated);

 }

MVC3

JsonDeserialize方法：

private T JsonDeserialize<T>(string jsonString)

{

   DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T));

   MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(jsonString));

   T obj = (T)ser.ReadObject(ms);

   return obj;

}

里面用到的JSON.stringify，主要是把对象转换为字符串的作用。原代码在这里

注意下载这个js后，如果运行出错就去掉最后几行代码。如下删除

 if (!Object.prototype.toJSONString) {

        Object.prototype.toJSONString = function (filter) {

            return JSON.stringify(this, filter);

        };

        Object.prototype.parseJSON = function (filter) {

            return JSON.parse(this, filter);

        };

    }

来源 ： http://www.jeasyuicn.com/easyui-datagrid-batch-edit-and-submit.html

Easyui datagrid 批量编辑和提交的更多相关文章

  1. easyui datagrid 批量编辑和提交数据

    easyui datagrid 行编辑和提交方,废话就不多说了,直接上代码 <div style="margin: 5px;"> <table id=" ...

  2. [转]easyui datagrid 批量编辑和提交

    web前台主要代码: <script type="text/javascript"> $(function() { var $dg = $("#dg" ...

  3. EASYUI datagrid批量修改与提交

    http://www.cnblogs.com/szytwo/archive/2012/08/29/2662169.html 前台主要代码: <script type="text/jav ...

  4. easyui datagrid可编辑表格使用经验分享

    文章目录 1相关接口方法 2列属性formatter 3编辑器类型 3.1基于my97的编辑器 3.2简单的密码编辑器 3.3动态增加/删除编辑器 4字段的级联操作 4.1combobox的级联操作 ...

  5. 关于EasyUI DataGrid行编辑时嵌入时间控件

    本人做一个名为“安徽中控”项目时,为快速开发基础数据增删改模块,遂采用EasyUIDatagrid将所有增删改查的操作都集中于表格中,并且所有增删改查操作都集中于泛型对象,从而不必为每个表写具体的增删 ...

  6. EasyUI DataGrid能编辑

    创建DataGrid <table id="tt"></table> $('#tt').datagrid({     title:'Editable Dat ...

  7. EasyUI datagrid 行编辑

    一.HTML: <div class="info"> <div class="info_tt"> <span class=&quo ...

  8. easyui datagrid行编辑中数据联动

    easyui的datagrid中行内编辑使用数据联动.即:当编辑产品编号时,该行的产品名称自动根据产品编号显示出来. 在编辑中获取当前行的索引 function getRowIndex(target) ...

  9. EasyUI Datagrid 取编辑修改后的内容

    <script type="text/javascript"> $(function () { $('#tt').datagrid({ iconCls: 'icon-e ...

随机推荐

  1. textwrap——文本包裹和填充模块解析

    textwrap模块提供了两个函数wrap()和fill(),以及TextWrapper类,以及另外一个工具函数dedent().         wrap()以及fill()都可以用来格式化一大段文 ...

  2. jbpmAPI-6

    第六章流程. 6.1. What is BPMN 2.0 业务流程模型和符号(BPMN)2.0规范是OMG规范,不仅定义了一个标准的业务流程的图形化表述(如BPMN 1. x),但现在还包括执行语义定 ...

  3. OpenGL: 环境配置和图元的绘制

    前言 距离上一篇博客已经过去一个半月了,这段时间过得确实充实,虽然一大段时间泡在图书馆复习,但至少也能学到点东西.跨年晚和元旦一整天,全身心投入图形学小课设的编程,终于实现了老师要求的所有功能,回想起 ...

  4. PHP冒泡排序法

    冒泡排序(Bubble Sort),是一种计算机科学领域的较简单的排序算法.法如其名,就是像冒泡一样,每次从数组当中 冒一个最大的数出来. 冒泡排序它重复地走访过要排序的数列,一次比较两个元素,如果他 ...

  5. java源码解析——Stack类

    在java中,Stack类继承了Vector类.Vector类和我们经常使用的ArrayList是类似的,底层也是使用了数组来实现,只不过Vector是线程安全的.因此可以知道Stack也是线程安全的 ...

  6. linq to entity asp.net mvc 多字段排序

    字段1 降序 字段2 降序 var str = db.xxx.OrderByDescending(p=>p.字段1).ThenByDescending(p=>p.字段2) ThenBy - ...

  7. 由世纪互联运营的 Windows Azure 现已在中国正式发布

     我们非常高兴地公开发布由世纪互联运营的 Windows Azure,这标志着我们成为第一家在中国国内正式提供公共云平台技术的跨国公司.这一伟大成就的实现,得益于 Microsoft 与世纪互联的 ...

  8. C++头文件的包含顺序研究

    一．<Google C++ 编程风格指南>里的观点 公司在推行编码规范,领导提议基本上使用<Google C++ 编程风格指南>.其中<Google C++ 编程风格指南 ...

  9. TableLayoutPanel 的使用

    VS自带控件TableLayoutPanel的功能应用网上都有资料.下面是使用中的一些问题. 1.动态加载控件时使用SetRowSpan.SetColumnSpan方法会使得界面响应缓慢 解决方案: ...

  10. [置顶] Asp.Net底层原理(二、写自己的Asp.Net框架)

    我们介绍过了浏览器和服务器之间的交互过程,接下来介绍Asp.net处理动态请求. 写自己的Asp.Net框架,我们不会引用System.Web这个程序集,我们只需要创建要给自己的类库,所以在接下来的程 ...