最近项目需要用到在页面进行批量操作，做了一些这方面的学习，参照网上的资料写了个小例子，记录一下：
- 准备
- 引入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;
}
}- 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
蜗牛一步两步三步四步往上爬。