github详细代码存放位置：https://github.com/liujiaxin1314/ssm_demo
要想使用easyui，需要先初始化导入一些基本js文件，如下：
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/easyui/themes/icon.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath }/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/dialog/dialog.js"></script>注意：导入jquery的js文件一定要放在easyuijs文件的前面，否则会出错
主要代码如下
dialog.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>EasyUi>>>>datagrid</title>
<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">
<script type="text/javascript"
src="${pageContext.request.contextPath }/jquery/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/easyui/themes/icon.css" />
<script type="text/javascript"
src="${pageContext.request.contextPath }/easyui/jquery.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/dialog/dialog.js"></script>
</head>
<body>
<!-- 用户列表界面 -->
<table id="dg" title="用户列表" class="easyui-datagrid"
style="width:550px;height:250px"
url="${pageContext.request.contextPath }/queryUserList.action"
toolbar="#toolbar" rownumbers="true" fitColumns="true"
singleSelect="true">
<thead>
<tr>
<th field="username">用户名字</th>
<th field="birthday">生日</th>
<th field="sex">性别</th>
<th field="address">地址</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a class="easyui-linkbutton" iconCls="icon-add" plain="true"
οnclick="newUser()">添加</a> <a class="easyui-linkbutton"
iconCls="icon-edit" plain="true" οnclick="editUser()">修改</a> <a
class="easyui-linkbutton" iconCls="icon-remove" plain="true"
οnclick="destroyUser()">删除</a>
</div>
<!-- 用户新增界面 -->
<div id="dlg-add" class="easyui-dialog"
style="width:400px;height:280px;padding:10px 20px" closed="true"
buttons="#dlg-buttons">
<div class="ftitle">用户信息页面</div>
<form id="fm-add" method="post">
<div class="fitem">
<label>用户名称:</label> <input name="username"
class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>出生日期:</label> <input name="birthday"
class="easyui-validatebox">
</div>
<div class="fitem">
<label>用户性别:</label> <input name="sex">
</div>
<div class="fitem">
<label>居住地址:</label> <input name="address"
class="easyui-validatebox">
</div>
</form>
</div>
<div id="dlg-buttons">
<a class="easyui-linkbutton" iconCls="icon-ok" οnclick="saveUser()">保存</a>
<a class="easyui-linkbutton" iconCls="icon-cancel"
οnclick="javascript:$('#dlg-add').dialog('close')">取消</a>
</div>
<!-- 用户编辑界面 -->
<div id="dlg-edit" class="easyui-dialog"
style="width:400px;height:280px;padding:10px 20px" closed="true"
buttons="#dlg-buttons">
<div class="ftitle">用户信息页面</div>
<form id="fm-edit" method="post">
<div class="fitem">
<input name="id" type="hidden">
</div>
<div class="fitem">
<label>用户名称:</label> <input name="username"
class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>出生日期:</label> <input name="birthday"
class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>用户性别:</label> <input name="sex">
</div>
<div class="fitem">
<label>居住地址:</label> <input name="address"
class="easyui-validatebox">
</div>
</form>
</div>
<div id="dlg-buttons">
<a class="easyui-linkbutton" iconCls="icon-ok" οnclick="updateUser()">修改</a>
<a class="easyui-linkbutton" iconCls="icon-cancel"
οnclick="javascript:$('#dlg-edit').dialog('close')">取消</a>
</div>
</body>
</html>
dialog.js页面
var curPath=window.document.location.href;
var pathName=window.document.location.pathname;
var pos=curPath.indexOf(pathName);
//获取主机地址，如： http://localhost:8080
var localhostPaht=window.document.location.href.substring(0,pos);
//获取带"/"的项目名，如：/ssm_demo
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
//新增用户
function newUser(){
$('#dlg-add').dialog('open').dialog('setTitle','新增用户');
$('#fm-add').form('clear');
}
//编辑用户
function editUser(){
var row = $('#dg').datagrid('getSelected');
// alert(row.id);
if (row){
$('#dlg-edit').dialog('open').dialog('setTitle','编辑用户');
$('#fm-edit').form('load',row);
}
}
//保存用户
function saveUser(){
var url = localhostPaht + projectName + "/saveUser.action";
$('#fm-add').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.errorMsg){
$.messager.show({
title: 'success',
msg: result.errorMsg
});
} else {
$('#dlg-add').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
}
});
}
//修改用户
function updateUser(){
var url = localhostPaht + projectName + "/updateUser.action";
$('#fm-edit').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.errorMsg){
$.messager.show({
title: 'success',
msg: result.errorMsg
});
} else {
$('#dlg-edit').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
}
});
}
//删除用户
function destroyUser(){
var row = $('#dg').datagrid('getSelected');
// var url = localhostPaht + projectName + "/deleteUser.action";
if (row){
$.messager.confirm('Confirm','你确定要删除这条信息吗',function(r){
if (r){
$.post("deleteUser.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');
}
});
}
}
UserController代码：
package com.jxliu.ssm.controller;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.jxliu.ssm.pojo.User;
import com.jxliu.ssm.service.UserService;
import com.jxliu.ssm.util.EasyuiResult;
import com.jxliu.ssm.util.JsonResult;
import com.jxliu.ssm.util.JsonUtil;
@Controller
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("/queryUserList")
@ResponseBody
public String queryUserList(){
EasyuiResult er = new EasyuiResult();
List<User> userList = userService.queryUserList();
int total = userService.queryUserListCount();
er.setRows(userList);
er.setTotal(total);
return JsonUtil.objToJson(er);
}
@RequestMapping("/saveUser")
@ResponseBody
public JsonResult saveUser(User user){
JsonResult result = new JsonResult();
userService.saveUser(user);
return result;
}
@RequestMapping("/updateUser.action")
@ResponseBody
public JsonResult updateUser(User user){
JsonResult result = new JsonResult();
userService.updateUser(user);
return result;
}
@RequestMapping("/deleteUser.action")
@ResponseBody
public JsonResult deleteUser(Integer id){
JsonResult result = new JsonResult();
userService.deleteUser(id);
result.setSuccess(true);
return result;
}
}前端后台变量参数解析：
用户展示功能：
th标签中的field对应后台pojo中对象的属性（不包含主键id的值，至于如何在增删改的时候还可以使用id，后面会写）
对应页面如下：（前台页面中各属性与页面自行对应）
RequestMapping对应url中路径，因为数据展示需要total数据列表的总数，和rows数据列表，所以做了封装EasyuiResult，里面只封装了目前用到的total和rows，因为是展示所有数据，并无任何参数。（注意：在返回前端数据时，easyui框架需要的是json数据，所以通过ResponseBody将后台转换成字符串的数据返回）
用户添加功能：
点击添加后弹出界面
required="true"代表必填
（注意：因为这里没有对日期做出特殊处理，数据库中出生日期是date类型，所以此时填写数据时，应按照规定规格填写，否则会导致异常产生，但是会发现数据库又添加成功，这里涉及到对spring事务控制的理解，spring事务控制的是RunTimeException异常，如果由于数据库中要求的参数规格不达标，这样的异常并不属于java代码中抛出的运行时异常，是属于sql异常，所以此时，事务并不会生效，谨记！！！如果想测试搭好的框架中是否事务生效，在代码中添加 int x = 1/0测试即可）
因为保存的是添加页面中的数据，由于springmvc的映射，直接使用User对象接受即可，但是，这是需要注意的是，表单中并没有主键id的列，在后台接收的时候，User对象中也并没有id主键的值，执行添加操作的时候，主键又不能为null，这里就需要具体问题具体分析，如果主键是uuid形式，在后台手动赋uuid即可，如果主键自增，就需要涉及到mybatis中的标签设置，如下：
useGeneratedKeys="true"代表使用的是主键自增，keyProperty="id"中id就是主键的属性名字，在一个普通的insert标签中添加这两个属性值，就代表在添加这个对象时，自动生成主键id。
用户编辑功能：
点击一条记录，编辑进行修改，表单页面应该与添加表单一样，但是这里涉及到一个问题就是，如果与添加一样，添加操作中，表单中没有id的属性，而修改操作一般都是根据主键id确认修改的对象，所以此时在表单中添加隐藏域hidden属性，隐藏id的值，可是，按照正常的逻辑思维走，点击一条记录，将这条记录的所有信息加载进表单中，再传到后台，这并没有问题，问题是在展示的过程中，业务规定了并不需要展示用户的主键id，在展示用户页面中都没有id主键，那么怎么获取主键id呢？
var row = $('#dg').datagrid('getSelected');获取选中的这条数据记录，而easyui框架内部也进行了封装，通过row.id就可以拿到这条选中数据的主键id
用户删除功能：
用户删除并没有页面，easyui有一个消息弹出框confirm，确认消息的操作
拿到了row.id即主键id的值，直接传递给后台处理即可，并不复杂。
扫一扫
1164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
