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

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

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

3. 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;
       }
   }

   - Bean.java

    package com.tjd.study.easyui.servlet;
   
    import java.io.IOException;
    import java.lang.reflect.Type;
    import java.util.List;
   
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
   
    import com.google.gson.Gson;
    import com.google.gson.reflect.TypeToken;
    import com.tjd.study.easyui.entity.Bean;
   
    public class BeanServlet extends HttpServlet {
        private static final long serialVersionUID = 1L;
   
        public BeanServlet() {
        }
   
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doPost(request, response);
        }
   
        @SuppressWarnings("unchecked")
        protected void doPost(HttpServletRequest req, HttpServletResponse response) throws ServletException, IOException {
            req.setCharacterEncoding("UTF-8");
            // 获取编辑数据 这里获取到的是json字符串
            String deleted = req.getParameter("deleted");
            String inserted = req.getParameter("inserted");
            String updated = req.getParameter("updated");
            System.out.println("--------------------------");
            System.out.println("deleted:" + deleted);
            System.out.println("inserted:" + inserted);
            System.out.println("updated:" + updated + "\n");
            Gson gson = new Gson();
            Type listType = new TypeToken<List<Bean>>() {
            }.getType();
            if (deleted != null) {
                // 把json字符串转换成对象
                System.out.println("deleted:");
                list((List<Bean>) gson.fromJson(deleted, listType));
            }
   
            if (inserted != null) {
                // 把json字符串转换成对象
                System.out.println("inserted:");
                list((List<Bean>) gson.fromJson(inserted, listType));
            }
   
            if (updated != null) {
                // 把json字符串转换成对象
                System.out.println("updated:");
                list((List<Bean>) gson.fromJson(updated, listType));
            }
            System.out.println("--------------------------\n");
        }
   
        private void list(List<Bean> list) {
            for (Bean b : list) {
                System.out.println(b);
            }
        }
   
    }

   - BeanServlet

    package com.tjd.study.easyui.servlet;
   
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.ArrayList;
    import java.util.List;
   
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
   
    import com.google.gson.Gson;
    import com.tjd.study.easyui.entity.Bean;
   
    public class ListBeanServlet extends HttpServlet {
        private static final long serialVersionUID = 1L;
   
        public ListBeanServlet() {
            super();
        }
   
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doPost(request, response);
        }
   
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            List<Bean> beans = new ArrayList<Bean>();
            beans.add(new Bean("Code001", "Code001", 10));
            beans.add(new Bean("Code002", "Code002", 20));
            beans.add(new Bean("Code003", "Code003", 30));
            beans.add(new Bean("Code004", "Code004", 40));
            Gson gson = new Gson();
            PrintWriter out = response.getWriter();
            out.write(gson.toJson(beans));
            // 清空缓存
            out.flush();
            // 关闭
            out.close();
        }
   
    }

   - ListBeanServlet

    /**
     *
     */
    // 将表单数据转为json
    function form2Json(id) {
        var arr = $("#" + id).serializeArray();
        var jsonStr = "";
   
        jsonStr += '{';
        for ( var i = 0; i < arr.length; i++) {
            jsonStr += '"' + arr[i].name + '":"' + arr[i].value + '",';
        }
        jsonStr = jsonStr.substring(0, (jsonStr.length - 1));
        jsonStr += '}';
   
        var json = JSON.parse(jsonStr);
        return json;
    }
   
    var dataGrid = (function() {
        var editIndex = undefined;
        var listActionUrl, commitActionUrl, formId;
        var endEditing = function() {
            if (editIndex == undefined) {
                return true;
            }
            if ($('#dg').datagrid('validateRow', editIndex)) {
                $('#dg').datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            }
            return false;
        };
        return {
            setListActionUrl : function(url) {
                listActionUrl = url;
            },
            setCommitActionUrl : function(url) {
                commitActionUrl = url;
            },
            setFormId : function(fid) {
                formId = fid;
            },
            onClickRow : function(index, row) {
                if (editIndex != index) {
                    if (!endEditing()) {
                        $('#dg').datagrid('cancelEdit', editIndex);
                    }
                }
                $('#dg').datagrid('selectRow', index);
                editIndex = index;
            },
            onDblClickRow : function(index) {
                if (endEditing()) {
                    $('#dg').datagrid('selectRow', index).datagrid('beginEdit',
                            index);
                    editIndex = index;
                } else {
                    $('#dg').datagrid('selectRow', editIndex);
                }
            },
            append : function() {
                if (endEditing()) {
                    $('#dg').datagrid('appendRow', {});
                    editIndex = $('#dg').datagrid('getRows').length - 1;
                    $('#dg').datagrid('selectRow', editIndex).datagrid('beginEdit',
                            editIndex);
                }
            },
            remove : function() {
                if (editIndex == undefined) {
                    return;
                }
                $('#dg').datagrid('cancelEdit', editIndex).datagrid('deleteRow',
                        editIndex);
                editIndex = undefined;
            },
            reject : function() {
                $('#dg').datagrid('rejectChanges');
                editIndex = undefined;
            },
            save : function() {
                if (endEditing()) {
                    var $dg = $('#dg');
                    var rows = $dg.datagrid('getChanges');
                    if (rows.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(commitActionUrl, effectRow, function() {
                            $.messager.alert("提示", "提交成功！");
                            $dg.datagrid('acceptChanges');
                        }).error(function() {
                            $.messager.alert("提示", "提交错误了！");
                        });
                    } else {
                        $.messager.alert("提醒", "未找到任何修改,不能提交!");
                        return;
                    }
                }
            }
        };
    }());

   - Default.js

    <?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
        xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
        id="WebApp_ID" version="2.5">
        <display-name>easyui</display-name>
        <welcome-file-list>
            <welcome-file>index.jsp</welcome-file>
        </welcome-file-list>
        <servlet>
            <description></description>
            <display-name>BeanServlet</display-name>
            <servlet-name>BeanServlet</servlet-name>
            <servlet-class>com.tjd.study.easyui.servlet.BeanServlet</servlet-class>
        </servlet>
        <servlet-mapping>
            <servlet-name>BeanServlet</servlet-name>
            <url-pattern>/servlet/commit</url-pattern>
        </servlet-mapping>
        <servlet>
            <description></description>
            <display-name>ListBeanServlet</display-name>
            <servlet-name>ListBeanServlet</servlet-name>
            <servlet-class>com.tjd.study.easyui.servlet.ListBeanServlet</servlet-class>
        </servlet>
        <servlet-mapping>
            <servlet-name>ListBeanServlet</servlet-name>
            <url-pattern>/servlet/list</url-pattern>
        </servlet-mapping>
    </web-app>

   - web.xml

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>JQuery EasyUI datagrid 批量编辑和提交</title>
    <link type="text/css" rel="stylesheet" href="resources/themes/default/easyui.css">
    <link type="text/css" rel="stylesheet" href="resources/themes/icon.css">
   
    <script type="text/javascript" src="resources/js/jquery.min.js"></script>
    <script type="text/javascript" src="resources/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="resources/local/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="resources/js/Default.js"></script>
    </head>
    <script type="text/javascript">
        $(function() {
            dataGrid.setCommitActionUrl("servlet/commit");
            $("#dg").datagrid({
                onClickRow:    dataGrid.onClickRow,
                onDblClickRow: dataGrid.onDblClickRow
            });
   
            $("#add").click(dataGrid.append);
            $("#remove").click(dataGrid.remove);
            $("#save").click(dataGrid.save);
   
            $("#submit_search").click(function () {
                $('#dg').datagrid({url : "servlet/list", queryParams: form2Json("searchform") });   //点击搜索
            });
        });
    </script>
    <body>
        <form name="searchform" method="post" action="" id ="searchform">
        <table style="font-size: 12px;">
            <tr>
                <td height="30">
                    <a id="submit_search" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls: 'icon-search'">搜索</a>
                </td>
            </tr>
        </table>
      </form>
        <table id="dg" class="easyui-datagrid" title="批量操作" data-options="url:'',singleSelect:true,fit:true,fitColumns:true,width:700,height:250,toolbar:'#toolBar'">
            <thead>
                <tr>
                    <th data-options="field:'code',width:100,editor:'validatebox'">Code</th>
                    <th data-options="field:'name',width:100,editor:'validatebox'">Name</th>
                    <th data-options="field:'price',width:100,editor:'numberbox'">Price</th>
                </tr>
            </thead>
        </table>
        <div id="toolBar">
            <a id="add" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain=true >添加</a>
            <a id="remove" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain=true >删除</a>
            <a id="save" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain=true >保存</a>
        </div>
    </body>
    </html>

   - index.jsp

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