首先看cotroller中对应的响应方法：
@RequestMapping("addPayments.do")
@ResponseBody
public Object addPayments(Payments model)
{
this.service.addPayments(model);
Map<String,String> map = new HashMap<String,String>();
map.put("success", "true");
map.put("msg", "添加成功！");
return map;
}
@RequestMapping("deletePayments.do")
@ResponseBody
public Object deletePayments(@RequestParam String id)
{
this.service.delPayments(id);
Map<String,String> map = new HashMap<String,String>();
map.put("success", "true");
map.put("msg", "删除成功！");
return map;
}
@RequestMapping("/preUpdatePayments.do")
public Object preUpdatePayments(@RequestParam String id,Model model)
{
Payments data = this.service.getPaymentsById(id);
model.addAttribute("entity", data);
return "/preupdatepayments";
}
@RequestMapping("/updatePayments.do")
@ResponseBody
public Object updatePayments(Payments model)
{
this.service.updatePayments(model);
Map<String,String> map = new HashMap<String,String>();
map.put("success", "true");
map.put("msg", "修改成功！");
return map;
}简单起见，每个操作都直接返回成功。返回的map对象将被转成json，前台进行操作结果显示。
addPayments方法接收Payments对象进行保存，deletePayments对象接收主键id并进行删除，而编辑一天记录则要分两步：preUpdatePayments方法接收要编辑的记录的id并获取编辑前的信息，转向到preupdatepayments.jsp界面显示，在此界面进行编辑提交，提交到updatePayments进行保存。
service层和dao层的代码都非常简单，前面几篇都写过了，这里就不再重复。
下面贴上mapper.xml对应的内容：
<insert id="addPayments" parameterType="Payments">
insert into payments(value,name,paymenttype,unit,descript,day,crttime,type)
values (#{value},#{name},#{paymenttype},#{unit},#{descript},#{day},#{crttime},#{type})
</insert>
<delete id="delPayments" parameterType="String" >
delete from payments where id = #{id}
</delete>
<select id="getPaymentsById" parameterType="String" resultType="Payments">
select * from payments where id = #{id}
</select>
<update id="updatePayments" parameterType="Payments">
update payments set name = #{name},value = #{value},unit = #{unit},type = #{type},descript = #{descript}
where id = #{id}
</update>接下来将jsp内容贴上，首先是在datagrid增加工具按钮：
toolbar: [{
text:'添加',
iconCls: 'icon-add',
handler: function(){
$('#window').window({
title:'添加',
closed:false
});
$('#window').window('refresh', '<%=basePath%>/jsp/addpayments.jsp');//添加，直接转到jsp
}
},'-',{
text:'编辑',
iconCls: 'icon-edit',
handler: function(){
var select = $('#datagrid_payout').datagrid('getSelected');
if (select == null){
$.messager.alert("Info","请选择记录！","Info");
}
else{
$.ajax({
type: 'POST',
url: '<%=basePath%>/paymentsController/preUpdatePayments.do',//编辑，先准备数据，在转到jsp
data: 'id='+select.id,
dataType:'text',
success: function(msg){
$('#window').window({
title:'编辑',
closed:false,
content:msg //这里的msg就是preUpdatePayents.do返回的jsp内容
});
}
});
}
}
},'-',{
text:'删除',
iconCls: 'icon-remove',
handler: function(){
var select = $('#datagrid_payout').datagrid('getSelected');
if (select == null){
$.messager.alert("Info","请选择记录！","Info");
return ;
}
else{
$.messager.confirm('提示信息', '确认删除吗?', function(r){
if (r){
$.ajax({
type: 'POST',
url: '<%=basePath%>/paymentsController/deletePayments.do',//删除
data: 'id='+select.id,
dataType:'text',
success: function(msg){
var temp = $.parseJSON(msg);
if (temp.success) {
$.messager.alert('删除成功！',temp.msg,'Info');
}
else{
$.messager.alert('删除失败',temp.msg,'Info');
}
$('#datagrid_payout').datagrid('load');
}
});
}
});
}
}
}]首先看添加页面addpayments.jsp：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path ;
%>
<script>
$(function(){
});
function submit(){
$('#myform').form('submit', {
url : '<%=basePath%>/paymentsController/addPayments.do?paymenttype=2',//添加对应的url，paymenttype参数代表支出
onSubmit : function() {
if ($(this).form("validate")) {
return true;
} else {
return false;
}
},
success : function(data) {
var temp = $.parseJSON(data);
if (temp.success) {
$.messager.alert('增加成功',temp.msg,'Info');
}
else{
$.messager.alert('添加失败',temp.msg,'Info');
}
$('#window').window('close');
$('#datagrid_payout').datagrid('load');//添加成功后重新加载datagrid数据
}
});
}
function cancel() {
$('#myform').form('clear');
$('#window').window('close');
}
</script>
<div>
<form id="myform" method="post">
<table align="center">
<tr>
<td>
<label>支出名称:</label>
</td>
<td>
<input class="easyui-validatebox" id = "name" name="name"
style="width: 290px;" data-options="required:true" />
</td>
</tr>
<tr>
<td>
<label>支出金额:</label>
</td>
<td>
<input class="easyui-validatebox" type="text" id="value" name="value"
style="width: 290px;" data-options="required:true">
<input class="easyui-combobox" id = "unit" name="unit"
data-options="required:true,
valueField:'code',
textField:'codename',
width:80,
url:'<%=basePath%>/commonController/listDatadictCata.do?catalog=currency' <!--用来获取下拉框数据-->
" />
</td>
</tr>
<tr>
<td>
<label>支出类别:</label>
</td>
<td>
<input class="easyui-combobox" id = "type" name="type"
data-options="required:true,
valueField:'code',
textField:'codename',
url:'<%=basePath%>/commonController/listDatadictCata.do?catalog=payout' <!--同上-->
" />
</td>
</tr>
<tr>
<td>
<label>支出日期:</label>
</td>
<td>
<input class="easyui-datebox" id = "day" name="day" />
</td>
</tr>
<tr>
<td>
<label>描述:</label>
</td>
<td>
<textarea id="descript" name="descript" style="height: 70px; width: 290px" ></textarea>
</td>
</tr>
</table>
</form>
</div>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="submit()">提交</a>
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="cancel()">取消</a>
</div>
编辑界面preupdatepayments.jsp:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path ;
%>
<script>
$(function(){
});
function submit(){
$('#myform').form('submit', {
url : '<%=basePath%>/paymentsController/updatePayments.do',//保存编辑后的数据的url
onSubmit : function() {
if ($(this).form("validate")) {
return true;
} else {
return false;
}
},
success : function(data) {
var temp = $.parseJSON(data);
if (temp.success) {
$.messager.alert('修改成功',temp.msg,'Info');
}
else{
$.messager.alert('修改失败',temp.msg,'Info');
}
$('#window').window('close');
$('#datagrid_payout').datagrid('load');//编辑成功后重新加载datagrid数据
}
});
}
function cancel() {
$('#myform').form('clear');
$('#window').window('close');
}
</script>
<div>
<form id="myform" method="post">
<input type="hidden" value="${entity.id}" name="id" id="id"/>
<table align="center">
<tr>
<td>
<label>支出名称:</label>
</td>
<td>
<input class="easyui-validatebox" id = "name" name="name" value="${entity.name}"
style="width: 290px;" data-options="required:true" />
</td>
</tr>
<tr>
<td>
<label>支出金额:</label>
</td>
<td>
<input class="easyui-validatebox" type="text" id="value" name="value" value="${entity.value}"
style="width: 290px;" data-options="required:true">
<input class="easyui-combobox" id = "unit" name="unit"
data-options="required:true,
valueField:'code',
textField:'codename',
value:'${entity.unit}',
width:80,
url:'<%=basePath%>/commonController/listDatadictCata.do?catalog=currency'
" />
</td>
</tr>
<tr>
<td>
<label>支出类别:</label>
</td>
<td>
<input class="easyui-combobox" id="type" name="type"
data-options="required:true,
valueField:'code',
textField:'codename',
value:'${entity.type}',
url:'<%=basePath%>/commonController/listDatadictCata.do?catalog=payout'
" />
</td>
</tr>
<tr>
<td>
<label>描述:</label>
</td>
<td>
<textarea id="descript" name="descript" style="height: 70px; width: 290px" >${entity.descript}</textarea>
</td>
</tr>
</table>
</form>
</div>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="submit()">提交</a>
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="cancel()">取消</a>
</div>
以上是主要代码，下面看一下效果图：
