注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

EasyUI学习之easyui datagrid 批量编辑和提交  

2013-01-15 10:50:03|  分类: JQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

前台主要代码:

 
001 <script type="text/javascript">
002     $(function() {
003         var $dg = $("#dg");
004         $dg.datagrid({
005             url : "servlet/list",
006             width : 700,
007             height : 250,
008             columns : [ [ {
009                 field : 'code',
010                 title : 'Code',
011                 width : 100,
012                 editor : "validatebox"
013             }, {
014                 field : 'name',
015                 title : 'Name',
016                 width : 200,
017                 editor : "validatebox"
018             }, {
019                 field : 'price',
020                 title : 'Price',
021                 width : 200,
022                 align : 'right',
023                 editor : "numberbox"
024             } ] ],
025             toolbar : [ {
026                 text : "添加",
027                 iconCls : "icon-add",
028                 handler : function() {
029                     $dg.datagrid('appendRow', {});
030                     var rows = $dg.datagrid('getRows');
031                     $dg.datagrid('beginEdit', rows.length - 1);
032                 }
033             }, {
034                 text : "编辑",
035                 iconCls : "icon-edit",
036                 handler : function() {
037                     var row = $dg.datagrid('getSelected');
038                     if (row) {
039                         var rowIndex = $dg.datagrid('getRowIndex', row);
040                         $dg.datagrid('beginEdit', rowIndex);
041                     }
042                 }
043             }, {
044                 text : "删除",
045                 iconCls : "icon-remove",
046                 handler : function() {
047                     var row = $dg.datagrid('getSelected');
048                     if (row) {
049                         var rowIndex = $dg.datagrid('getRowIndex', row);
050                         $dg.datagrid('deleteRow', rowIndex);
051                     }
052                 }
053             }, {
054                 text : "结束编辑",
055                 iconCls : "icon-cancel",
056                 handler :endEdit
057             }, {
058                 text : "保存",
059                 iconCls : "icon-save",
060                 handler : function() {
061                     endEdit();
062                     if ($dg.datagrid('getChanges').length) {
063                         var inserted = $dg.datagrid('getChanges', "inserted");
064                         var deleted = $dg.datagrid('getChanges', "deleted");
065                         var updated = $dg.datagrid('getChanges', "updated");
066                           
067                         var effectRow = new Object();
068                         if (inserted.length) {
069                             effectRow["inserted"] = JSON.stringify(inserted);
070                         }
071                         if (deleted.length) {
072                             effectRow["deleted"] = JSON.stringify(deleted);
073                         }
074                         if (updated.length) {
075                             effectRow["updated"] = JSON.stringify(updated);
076                         }
077   
078                         $.post("servlet/commit", effectRow, function(rsp) {
079                             if(rsp.status){
080                                 $.messager.alert("提示", "提交成功!");
081                                 $dg.datagrid('acceptChanges');
082                             }
083                         }, "JSON").error(function() {
084                             $.messager.alert("提示", "提交错误了!");
085                         });
086                     }
087                 }
088             } ]
089         });
090           
091         function endEdit(){
092             var rows = $dg.datagrid('getRows');
093             for ( var i = 0; i < rows.length; i++) {
094                 $dg.datagrid('endEdit', i);
095             }
096         }
097     });
098 </script>
099 <body>
100     <table id="dg" title="批量操作"></table>
101 </body>
102 </html>

 

后台commit接收类:

 Java版本

01 //设置请求编码
02 req.setCharacterEncoding("UTF-8");
03 //获取编辑数据 这里获取到的是json字符串
04 String deleted = req.getParameter("deleted");
05 String inserted = req.getParameter("inserted");
06 String updated = req.getParameter("updated");
07   
08 if(deleted != null){
09     //把json字符串转换成对象
10     List<Bean> listDeleted = JSON.parseArray(deleted, Bean.class);
11     //TODO 下面就可以根据转换后的对象进行相应的操作了
12 }
13   
14 if(inserted != null){
15     //把json字符串转换成对象
16     List<Bean> listInserted = JSON.parseArray(inserted, Bean.class);
17 }
18   
19 if(updated != null){
20     //把json字符串转换成对象
21     List<Bean> listUpdated = JSON.parseArray(updated, Bean.class);
22 }

 Bean.java

 
01 public class Bean {
02     private String code;
03     private String name;
04     private Double price;
05     public String getCode() {
06         return code;
07     }
08     public void setCode(String code) {
09         this.code = code;
10     }
11     public String getName() {
12         return name;
13     }
14     public void setName(String name) {
15         this.name = name;
16     }
17     public Double getPrice() {
18         return price;
19     }
20     public void setPrice(Double price) {
21         this.price = price;
22     }
23 }

 PHP版本处理:

 

01 <?php
02   
03 if(isset($_POST["deleted"])){
04     $deleted = $_POST["deleted"];//这里获取到的是一个json数组样子字符串,eg:[{code:'1',name:'name',price:323},{..},....]
05     $listDeleted = json_decode($deleted); //把这个json数组转化成array对象
06 }
07   
08 if(isset($_POST["inserted"])){
09     $inserted = $_POST["inserted"];
10     $listInserted = json_decode($inserted);
11 }
12   
13 if(isset($_POST["updated"])){
14     $updated = $_POST["updated"];
15     $listUpdated = json_decode($updated);
16 }

 ASP.NET MVC3版本

 

01 //获取编辑数据 这里获取到的是json字符串
02 string deleted = Request.Form["deleted"];
03 string inserted = Request.Form["inserted"];
04 string updated = Request.Form["updated"];
05   
06 if(deleted != null){
07     //把json字符串转换成对象
08     List<Bean> listDeleted = JsonDeserialize<List<Bean>>(deleted);
09     //TODO 下面就可以根据转换后的对象进行相应的操作了
10 }
11   
12 if(inserted != null){
13     //把json字符串转换成对象
14     List<Bean> listInserted = JsonDeserialize<List<Bean>>(inserted);
15 }
16   
17 if(updated != null){
18     //把json字符串转换成对象
19     List<Bean> listUpdated = JsonDeserialize<List<Bean>>(updated);
20 }

 

JsonDeserialize方法:

 

1 private T JsonDeserialize<T>(string jsonString)
2 {
3    DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T));
4    MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(jsonString));
5    T obj = (T)ser.ReadObject(ms);
6    return obj;
7 }

 

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

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

 

1 if (!Object.prototype.toJSONString) {
2        Object.prototype.toJSONString = function (filter) {
3            return JSON.stringify(this, filter);
4        };
5        Object.prototype.parseJSON = function (filter) {
6            return JSON.parse(this, filter);
7        };
8    }
  评论这张
 
阅读(859)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017