家庭财务管理系统实战3- 实现列表数据的增删改查功能

声明：本系列文章为练手之作，编码前并未做详细的需求分析、设计等，作者纯粹是想起什么来写什么，功能也是想起什么来实现什么，读者就舍其糟粕，取其精华吧（谈不上精华，各种常用功能还是有的）。

今天实现数据的增删改查功能。

系统会用到各种各样的基础数据，因此建立数据字典表，存放各种基础数据，

CREATE TABLE `datadict` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
`catalog` varchar(50) DEFAULT NULL COMMENT '数据类型',
`code` varchar(50) DEFAULT NULL COMMENT '数据代码',
`codename` varchar(200) DEFAULT NULL COMMENT '数据含义',
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=40 DEFAULT CHARSET=utf8

id  catalog   code      codename
------  --------  --------  --------------
1  root      payout    支出
2  root      income    收入
3  root      currency  币种
4  root      card      卡类别

先贴个效果图：



关于列表的显示，详见http://blog.csdn.net/blogtime/article/details/15812419

列表页面jsp代码如下，datadict.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(){
$('#dg').datagrid({
url:'<%=basePath%>/commonController/listDatadict.do',//显示数据列表的action
singleSelect:true,
columns:[[
{field:'id',title:'id',hidden:true,width:300},
{field:'catalog',title:'类别',width:300},
{field:'code',title:'代码',width:300},
{field:'codename',title:'代码名称',width:300}
]],
toolbar: [{
text:'添加',
iconCls: 'icon-add',
handler: function(){
$('#window').window({   //easyui控件，用来显示添加，编辑等页面，默认是隐藏的，点击添加或编辑的时候会弹出
title:'添加',
closed:false
});
$('#window').window('refresh', '<%=basePath%>/jsp/adddatadict.jsp');//点击添加按钮，弹出添加页面框
}
},'-',{
text:'编辑',
iconCls: 'icon-edit',
handler: function(){
var select = $('#dg').datagrid('getSelected');
if (select == null){
$.messager.alert("Info","请选择记录！","Info");
}
else{
$.ajax({
type: 'POST',
url: '<%=basePath%>/commonController/preUpdateDatadictData.do',//编辑分两步，首先读取原始数据，显示到页面，然后修改提交
data: 'id='+select.id,
dataType:'text',
success: function(msg){
$('#window').window({
title:'编辑',
closed:false,
content:msg
});
}
});
}
}
},'-',{
text:'删除',
iconCls: 'icon-remove',
handler: function(){
var select = $('#dg').datagrid('getSelected');
if (select == null){
$.messager.alert("Info","请选择记录！","Info");
}
else{
$.ajax({
type: 'POST',
url: '<%=basePath%>/commonController/deleteDatadictData.do',//删除操作的action
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');
}
$('#dg').datagrid('load');
}
});
}
}
}],
onLoadSuccess:function(data){
}
});
});

</script>
<div>
<table id="dg"></table>
</div>

下面是adddatadict.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%>/commonController/addDatadictData.do',//添加数据的action
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');//添加成功后关闭添加页面框
$('#dg').datagrid('load');//重新加载列表
}
});
}
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-combobox" id = "catalog" name="catalog"
data-options="required:true,
valueField:'code',
textField:'codename',
url:'<%=basePath%>/commonController/listDatadictCata.do'  //页面上的combobox下拉框数据加载action
" />
</td>
</tr>
<tr>
<td>
<label>代码:</label>
</td>
<td>
<input class="easyui-validatebox" type="text" id="code" name="code"
style="width: 290px;" data-options="required:true">
</td>
</tr>
<tr>
<td>
<label>中文名称:</label>
</td>
<td>
<input class="easyui-validatebox" type="text" id="codename" name="codename"
style="width: 290px;" data-options="required:true">
</td>
</tr>
</table>
</form>
</div>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submit()">提交</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancel()">取消</a>
</div>

下面是修改记录的jsp页面，preupdatedatadictdata.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%>/commonController/updateDatadictData.do',
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');
$('#dg').datagrid('load');
}
});
}
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-combobox" id = "catalog" name="catalog"
data-options="required:true,
valueField:'code',
textField:'codename',
editable:false,
readonly:true,
url:'<%=basePath%>/commonController/listDatadictCata.do',
onLoadSuccess:function(){
$('#catalog').combobox('setValue','${entity.catalog}');
}
" />
</td>
</tr>
<tr>
<td>
<label>代码:</label>
</td>
<td>
<input class="easyui-validatebox" type="text" id="code" name="code" value="${entity.code}"
style="width: 290px;" data-options="required:true">
</td>
</tr>
<tr>
<td>
<label>中文名称:</label>
</td>
<td>
<input class="easyui-validatebox" type="text" id="codename" name="codename" value="${entity.codename}"
style="width: 290px;" data-options="required:true">
</td>
</tr>
</table>
</form>
</div>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submit()">提交</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancel()">取消</a>
</div>

下面是datadict表对应的实体类，以及在mapper.xml中的定义：  

package system.homebank.entity;

import java.io.Serializable;

public class DataDict implements Serializable
{
private static final long serialVersionUID = -2692788275202369407L;

private Integer id;
private String catalog;
private String code;
private String codename;
public Integer getId()
{
return id;
}
public void setId(Integer id)
{
this.id = id;
}
public String getCatalog()
{
return catalog;
}
public void setCatalog(String catalog)
{
this.catalog = catalog;
}
public String getCode()
{
return code;
}
public void setCode(String code)
{
this.code = code;
}
public String getCodename()
{
return codename;
}
public void setCodename(String codename)
{
this.codename = codename;
}

}

<resultMap id="datadictResultMap" type="system.homebank.entity.DataDict">
<id property="id" column="id"/>
<result property="catalog" column="catalog"/>
<result property="code" column="code"/>
<result property="codename" column="codename"/>
</resultMap>
<insert id="addDatadictData" parameterType="DataDict" useGeneratedKeys="true">
insert into datadict(catalog,code,codename) values (#{catalog},#{code},#{codename})
</insert>
<delete id="delDatadictData" parameterType="String" >
delete from  datadict where id = #{id}
</delete>
<select id="getDatadictDataById" parameterType="String" resultType="DataDict">
select * from datadict where id = #{id}
</select>
<insert id="updateDatadictData" parameterType="DataDict">
update datadict set catalog = #{catalog},code = #{code},codename = #{codename}
where id = #{id}
</insert>

下面是增删改的controller，代码简单写，直接返回添加成功了： 

@RequestMapping("/addDatadictData.do")
@ResponseBody
public Object addDatadictData(DataDict model)
{
this.service.addDatadictData(model);
Map<String,String> map = new HashMap<String,String>();
map.put("success", "true");
map.put("msg", "添加成功！");
return map;
}
@RequestMapping("/deleteDatadictData.do")
@ResponseBody
public Object delDatadictData(@RequestParam String id)
{
this.service.delDatadictData(id);
Map<String,String> map = new HashMap<String,String>();
map.put("success", "true");
map.put("msg", "删除成功！");
return map;
}
@RequestMapping("/preUpdateDatadictData.do")
public Object preUpdateDatadictData(@RequestParam String id,Model model)
{
DataDict data = this.service.getDatadictDataById(id);
model.addAttribute("entity", data);
return "/preupdatedatadictdata";
}
@RequestMapping("/updateDatadictData.do")
@ResponseBody
public Object updateDatadictData(DataDict model)
{
this.service.updateDatadictData(model);
Map<String,String> map = new HashMap<String,String>();
map.put("success", "true");
map.put("msg", "修改成功！");
return map;
}

下面贴几张效果图：