一个关于jquery easyui crud demo 的一个例子
注：这个程序jsp的源代码在这个http://www.jeasyui.com/demo/main/index.php网址的basic crud里面下载它用的是html + php 我们今天要把他改成 Java后台 struts + hibernate + ibatis
这里是jsp代码easyui.jsp
这个是接收那个Action当然还有很多类和方法都没有贴出来
要注意这里面最重要的是json数据的处理最好用到 Jackson这个框架这个框架里面有个ObjectMapper这个类能把各种形式的例如 javabean，list，map还有字符串等等封装成json数据，还有就是要看网站上面标准的代码的数据是怎样接收的。最好用浏览器或者是像httpwatch这样的工具来看一下到底发送的是怎样格式的json数据发送了几次然后再来做。
这里是jsp代码easyui.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
<link rel="stylesheet" type="text/css"
href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript"
src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<h2>
Basic CRUD Application
</h2>
<div class="demo-info" style="margin-bottom: 10px">
<div class="demo-tip icon-tip">
</div>
<div>
Click the buttons on datagrid toolbar to do crud actions.
</div>
</div>
<table id="dg" title="My Users" class="easyui-datagrid"
style="width: 700px; height: 250px"
url="personOption!queryPersons.action" toolbar="#toolbar"
pagination="true" rownumbers="true" fitColumns="true"
singleSelect="true">
<thead>
<tr>
<th field="id" width="50">
id
</th>
<th field="xm" width="50">
xm
</th>
<th field="sfzh" width="50">
sfzh
</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton"
onclick=newUser();>New User</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
onclick=editUser();>Edit User</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
onclick=destroyUser();>Remove User</a>
</div>
<div id="dlg" class="easyui-dialog"
style="width: 400px; height: 280px; padding: 10px 20px" closed="true"
buttons="#dlg-buttons">
<div class="ftitle">
User Information
</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>
id:
</label>
<input name="id" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>
xm:
</label>
<input name="xm" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>
sfzh:
</label>
<input name="sfzh">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-ok" onclick=saveUser();>Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-cancel" onclick=javascript:$('#dlg').dialog('close');
>Cancel</a>
</div>
<script type="text/javascript">
var url;
function newUser() {
$('#dlg').dialog('open').dialog('setTitle', 'New User');
$('#fm').form('clear');
url = 'personOption!savePerson.action';
}
function editUser() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$('#dlg').dialog('open').dialog('setTitle', 'Edit User');
$('#fm').form('load', row);
url = 'personOption!updatePerson.action';
}
}
function saveUser() {
$('#fm').form('submit', {
url : url,
onSubmit : function() {
return $(this).form('validate');
},
success : function(result) {
var result = eval('(' + result + ')');
if (result.errorMsg) {
$.messager.show( {
title : 'Error',
msg : result.errorMsg
});
} else {
//alert("aaa");
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
}
});
}
function destroyUser() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$.messager.confirm('Confirm',
'Are you sure you want to destroy this user?', function(r) {
if (r) {
$.post('personOption!deletePerson.action', {
id : row.id
}, function(result) {
if (result.success) {
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show( { // show error message
title : 'Error',
msg : result.errorMsg
});
}
}, 'json');
}
});
}
}
</script>
<style type="text/css">
#fm {
margin: 0;
padding: 10px 30px;
}
.ftitle {
font-size: 14px;
font-weight: bold;
padding: 5px 0;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.fitem {
margin-bottom: 5px;
}
.fitem label {
display: inline-block;
width: 80px;
}
</style>
</body>
</html>
这个是接收那个Action当然还有很多类和方法都没有贴出来
import java.io.IOException;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import net.sf.json.JSONArray;
import org.codehaus.jackson.JsonGenerationException;
import org.codehaus.jackson.JsonGenerator;
import org.codehaus.jackson.map.JsonMappingException;
import org.codehaus.jackson.map.ObjectMapper;
import org.springframework.stereotype.Component;
import com.opensymphony.xwork2.ActionContext;
@Component("personOption")
@SuppressWarnings("serial")
public class PersonOptionAction extends BaseAction {
public IPersonLogic personLogic;
private String id;
private String xm;
private String sfzh;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getXm() {
return xm;
}
public void setXm(String xm) {
this.xm = xm;
}
public String getSfzh() {
return sfzh;
}
public void setSfzh(String sfzh) {
this.sfzh = sfzh;
}
public int queryPersonsCount(){
return personLogic.queryPerson().size();
}
/**
* 查询所有人员信息
* @return
*/
public String queryPersons() throws IOException{
ActionContext.getContext().getActionInvocation().getProxy().setExecuteResult(false);
List<Person> list = personLogic.queryPerson();
this.getRequest().setAttribute("list", list);
JSONArray jsonArray = JSONArray.fromObject(list);
int count = this.queryPersonsCount();
String str = "{\"total\":"+count+",\"rows\":"+jsonArray+"}";
List list2 = new ArrayList();
list2.add(jsonArray);
Map<String,Object> map = new HashMap();
map.put("total", count);
map.put("rows", jsonArray);
ObjectMapper objectMapper = new ObjectMapper();
objectMapper.writeValue(this.getResponse().getOutputStream(), map );
return "queryPersons";
}
/**
* 删除指定人员信息
* @return
*/
public String deletePerson() throws Exception {
ObjectMapper objectMapper = new ObjectMapper();
Map<String ,Object> map = new HashMap<String,Object>();
boolean b = personLogic.deletePerson(id);
if(b == true){
map.put("success", true);
objectMapper.writeValue(this.getResponse().getOutputStream(), map);
}else{
map.put("success", false);
}
return "deletePerson";
}
/**
* 保存人员信息
* @param person
* @return
*/
public String savePerson() throws Exception{
//System.out.println(id + xm + sfzh);
Person person = new Person();
person.setId(id);
Date rksj = new Date();
person.setRksj(rksj);
person.setSfzh(sfzh);
person.setXm(xm);
personLogic.savePerson(person);
ObjectMapper objectMapper = new ObjectMapper();
objectMapper.writeValue(this.getResponse().getOutputStream(), person);
return "savePerson";
}
/**
* 更新人员信息
* @param person
* @return
*/
public String updatePerson() throws Exception {
System.out.println("id=" + id + "xm="+xm + "sfzh="+sfzh);
Person person = new Person();
person.setId(id);
Date rksj = new Date();
person.setRksj(rksj);
person.setSfzh(sfzh);
person.setXm(xm);
List<Person> list = personLogic.queryPerson();
for(Person person2 : list){
if(person2.getId().equals(person.getId())){
personLogic.updatePerson(person);
ObjectMapper objectMapper = new ObjectMapper();
objectMapper.writeValue(this.getResponse().getOutputStream(), person);
}
}
personLogic.queryPerson();
return "updatePerson";
}
public String updatePersonjsp(){
System.out.println(id);
List<Person> list = personLogic.queryPerson();
for(Person person : list){
if(person.getId().equals(id)){
this.getRequest().setAttribute("person", person);
}
}
return "updatePersonjsp";
}
public IPersonLogic getPersonLogic() {
return personLogic;
}
@Resource(name="personLogic")
public void setPersonLogic(IPersonLogic personLogic) {
this.personLogic = personLogic;
}
}
要注意这里面最重要的是json数据的处理最好用到 Jackson这个框架这个框架里面有个ObjectMapper这个类能把各种形式的例如 javabean，list，map还有字符串等等封装成json数据，还有就是要看网站上面标准的代码的数据是怎样接收的。最好用浏览器或者是像httpwatch这样的工具来看一下到底发送的是怎样格式的json数据发送了几次然后再来做。