基于JQuery easyui，gson的批量新增/修改和删除-servlet版

最近项目需要用到在页面进行批量操作，做了一些这方面的学习，参照网上的资料写了个小例子，记录一下：

准备
- 引入gson-2.6.2.jar，这里使用gson而不使用json-lib，原因是json-lib很老了，依赖的jar在后续与struts2整合时，会出现不兼容的警告。而gson很清爽。
- 引入jQuery EasyUI 1.4.4
文件结构：

package com.tjd.study.easyui.entity;

public class Bean {
    private String code;
    private String name;
    private int price = 0;

    public Bean() {
    }

    public Bean(String code, String name, int price) {
        this.code = code;
        this.name = name;
        this.price = price;
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getPrice() {
        return price;
    }

    public void setPrice(int price) {
        this.price = price;
    }

    @Override
    public String toString() {
        return "code=" + code + ",name=" + name + ",price=" + price;
    }
}

View Code - Bean.java

 1 package com.tjd.study.easyui.servlet;
 2 
 3 import java.io.IOException;
 4 import java.lang.reflect.Type;
 5 import java.util.List;
 6 
 7 import javax.servlet.ServletException;
 8 import javax.servlet.http.HttpServlet;
 9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 
12 import com.google.gson.Gson;
13 import com.google.gson.reflect.TypeToken;
14 import com.tjd.study.easyui.entity.Bean;
15 
16 public class BeanServlet extends HttpServlet {
17     private static final long serialVersionUID = 1L;
18 
19     public BeanServlet() {
20     }
21 
22     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
23         doPost(request, response);
24     }
25 
26     @SuppressWarnings("unchecked")
27     protected void doPost(HttpServletRequest req, HttpServletResponse response) throws ServletException, IOException {
28         req.setCharacterEncoding("UTF-8");
29         // 获取编辑数据 这里获取到的是json字符串
30         String deleted = req.getParameter("deleted");
31         String inserted = req.getParameter("inserted");
32         String updated = req.getParameter("updated");
33         System.out.println("--------------------------");
34         System.out.println("deleted:" + deleted);
35         System.out.println("inserted:" + inserted);
36         System.out.println("updated:" + updated + "\n");
37         Gson gson = new Gson();
38         Type listType = new TypeToken<List<Bean>>() {
39         }.getType();
40         if (deleted != null) {
41             // 把json字符串转换成对象
42             System.out.println("deleted:");
43             list((List<Bean>) gson.fromJson(deleted, listType));
44         }
45 
46         if (inserted != null) {
47             // 把json字符串转换成对象
48             System.out.println("inserted:");
49             list((List<Bean>) gson.fromJson(inserted, listType));
50         }
51 
52         if (updated != null) {
53             // 把json字符串转换成对象
54             System.out.println("updated:");
55             list((List<Bean>) gson.fromJson(updated, listType));
56         }
57         System.out.println("--------------------------\n");
58     }
59 
60     private void list(List<Bean> list) {
61         for (Bean b : list) {
62             System.out.println(b);
63         }
64     }
65 
66 }

View Code - BeanServlet

 1 package com.tjd.study.easyui.servlet;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 import java.util.ArrayList;
 6 import java.util.List;
 7 
 8 import javax.servlet.ServletException;
 9 import javax.servlet.http.HttpServlet;
10 import javax.servlet.http.HttpServletRequest;
11 import javax.servlet.http.HttpServletResponse;
12 
13 import com.google.gson.Gson;
14 import com.tjd.study.easyui.entity.Bean;
15 
16 public class ListBeanServlet extends HttpServlet {
17     private static final long serialVersionUID = 1L;
18 
19     public ListBeanServlet() {
20         super();
21     }
22 
23     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
24         doPost(request, response);
25     }
26 
27     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
28         List<Bean> beans = new ArrayList<Bean>();
29         beans.add(new Bean("Code001", "Code001", 10));
30         beans.add(new Bean("Code002", "Code002", 20));
31         beans.add(new Bean("Code003", "Code003", 30));
32         beans.add(new Bean("Code004", "Code004", 40));
33         Gson gson = new Gson();
34         PrintWriter out = response.getWriter();
35         out.write(gson.toJson(beans));
36         // 清空缓存
37         out.flush();
38         // 关闭
39         out.close();
40     }
41 
42 }

View Code - ListBeanServlet

  1 /**
  2  * 
  3  */
  4 // 将表单数据转为json
  5 function form2Json(id) {
  6     var arr = $("#" + id).serializeArray();
  7     var jsonStr = "";
  8 
  9     jsonStr += '{';
 10     for ( var i = 0; i < arr.length; i++) {
 11         jsonStr += '"' + arr[i].name + '":"' + arr[i].value + '",';
 12     }
 13     jsonStr = jsonStr.substring(0, (jsonStr.length - 1));
 14     jsonStr += '}';
 15 
 16     var json = JSON.parse(jsonStr);
 17     return json;
 18 }
 19 
 20 var dataGrid = (function() {
 21     var editIndex = undefined;
 22     var listActionUrl, commitActionUrl, formId;
 23     var endEditing = function() {
 24         if (editIndex == undefined) {
 25             return true;
 26         }
 27         if ($('#dg').datagrid('validateRow', editIndex)) {
 28             $('#dg').datagrid('endEdit', editIndex);
 29             editIndex = undefined;
 30             return true;
 31         }
 32         return false;
 33     };
 34     return {
 35         setListActionUrl : function(url) {
 36             listActionUrl = url;
 37         },
 38         setCommitActionUrl : function(url) {
 39             commitActionUrl = url;
 40         },
 41         setFormId : function(fid) {
 42             formId = fid;
 43         },
 44         onClickRow : function(index, row) {
 45             if (editIndex != index) {
 46                 if (!endEditing()) {
 47                     $('#dg').datagrid('cancelEdit', editIndex);
 48                 }
 49             }
 50             $('#dg').datagrid('selectRow', index);
 51             editIndex = index;
 52         },
 53         onDblClickRow : function(index) {
 54             if (endEditing()) {
 55                 $('#dg').datagrid('selectRow', index).datagrid('beginEdit',
 56                         index);
 57                 editIndex = index;
 58             } else {
 59                 $('#dg').datagrid('selectRow', editIndex);
 60             }
 61         },
 62         append : function() {
 63             if (endEditing()) {
 64                 $('#dg').datagrid('appendRow', {});
 65                 editIndex = $('#dg').datagrid('getRows').length - 1;
 66                 $('#dg').datagrid('selectRow', editIndex).datagrid('beginEdit',
 67                         editIndex);
 68             }
 69         },
 70         remove : function() {
 71             if (editIndex == undefined) {
 72                 return;
 73             }
 74             $('#dg').datagrid('cancelEdit', editIndex).datagrid('deleteRow',
 75                     editIndex);
 76             editIndex = undefined;
 77         },
 78         reject : function() {
 79             $('#dg').datagrid('rejectChanges');
 80             editIndex = undefined;
 81         },
 82         save : function() {
 83             if (endEditing()) {
 84                 var $dg = $('#dg');
 85                 var rows = $dg.datagrid('getChanges');
 86                 if (rows.length) {
 87                     var inserted = $dg.datagrid('getChanges', "inserted");
 88                     var deleted = $dg.datagrid('getChanges', "deleted");
 89                     var updated = $dg.datagrid('getChanges', "updated");
 90                     var effectRow = new Object();
 91                     if (inserted.length) {
 92                         effectRow["inserted"] = JSON.stringify(inserted);
 93                     }
 94                     if (deleted.length) {
 95                         effectRow["deleted"] = JSON.stringify(deleted);
 96                     }
 97 
 98                     if (updated.length) {
 99                         effectRow["updated"] = JSON.stringify(updated);
100                     }
101 
102                     $.post(commitActionUrl, effectRow, function() {
103                         $.messager.alert("提示", "提交成功！");
104                         $dg.datagrid('acceptChanges');
105                     }).error(function() {
106                         $.messager.alert("提示", "提交错误了！");
107                     });
108                 } else {
109                     $.messager.alert("提醒", "未找到任何修改,不能提交!");
110                     return;
111                 }
112             }
113         }
114     };
115 }());

View Code - Default.js

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 3     xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
 4     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
 5     id="WebApp_ID" version="2.5">
 6     <display-name>easyui</display-name>
 7     <welcome-file-list>
 8         <welcome-file>index.jsp</welcome-file>
 9     </welcome-file-list>
10     <servlet>
11         <description></description>
12         <display-name>BeanServlet</display-name>
13         <servlet-name>BeanServlet</servlet-name>
14         <servlet-class>com.tjd.study.easyui.servlet.BeanServlet</servlet-class>
15     </servlet>
16     <servlet-mapping>
17         <servlet-name>BeanServlet</servlet-name>
18         <url-pattern>/servlet/commit</url-pattern>
19     </servlet-mapping>
20     <servlet>
21         <description></description>
22         <display-name>ListBeanServlet</display-name>
23         <servlet-name>ListBeanServlet</servlet-name>
24         <servlet-class>com.tjd.study.easyui.servlet.ListBeanServlet</servlet-class>
25     </servlet>
26     <servlet-mapping>
27         <servlet-name>ListBeanServlet</servlet-name>
28         <url-pattern>/servlet/list</url-pattern>
29     </servlet-mapping>
30 </web-app>

View Code - web.xml

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html>
 4 <html lang="en">
 5 <head>
 6 <meta charset="UTF-8">
 7 <title>JQuery EasyUI datagrid 批量编辑和提交</title>
 8 <link type="text/css" rel="stylesheet" href="resources/themes/default/easyui.css">
 9 <link type="text/css" rel="stylesheet" href="resources/themes/icon.css">
10 
11 <script type="text/javascript" src="resources/js/jquery.min.js"></script>
12 <script type="text/javascript" src="resources/js/jquery.easyui.min.js"></script>
13 <script type="text/javascript" src="resources/local/easyui-lang-zh_CN.js"></script>
14 <script type="text/javascript" src="resources/js/Default.js"></script>
15 </head>
16 <script type="text/javascript">
17     $(function() {
18         dataGrid.setCommitActionUrl("servlet/commit");
19         $("#dg").datagrid({
20             onClickRow:    dataGrid.onClickRow,
21             onDblClickRow: dataGrid.onDblClickRow
22         });
23         
24         $("#add").click(dataGrid.append);
25         $("#remove").click(dataGrid.remove);
26         $("#save").click(dataGrid.save);
27         
28         $("#submit_search").click(function () {
29             $('#dg').datagrid({url : "servlet/list", queryParams: form2Json("searchform") });   //点击搜索
30         });
31     });
32 </script>
33 <body>
34     <form name="searchform" method="post" action="" id ="searchform">
35     <table style="font-size: 12px;">
36         <tr>
37             <td height="30">
38                 <a id="submit_search" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls: 'icon-search'">搜索</a>
39             </td>
40         </tr>
41     </table>
42   </form>
43     <table id="dg" class="easyui-datagrid" title="批量操作" data-options="url:'',singleSelect:true,fit:true,fitColumns:true,width:700,height:250,toolbar:'#toolBar'">
44         <thead>
45             <tr>
46                 <th data-options="field:'code',width:100,editor:'validatebox'">Code</th>
47                 <th data-options="field:'name',width:100,editor:'validatebox'">Name</th>
48                 <th data-options="field:'price',width:100,editor:'numberbox'">Price</th>
49             </tr>
50         </thead>
51     </table>
52     <div id="toolBar">
53         <a id="add" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain=true >添加</a>
54         <a id="remove" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain=true >删除</a>
55         <a id="save" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain=true >保存</a>
56     </div>
57 </body>
58 </html>

View Code - index.jsp

蜗牛一步两步三步四步往上爬。

posted on 2016-06-09 13:24 阿Code 阅读(1161) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

icoding.t

基于JQuery easyui，gson的批量新增/修改和删除-servlet版

导航

公告