SSM框架(十四)SSM+EasyUI分页+数据增删查改

于 2019-08-08 17:21:59 发布
阅读量402 收藏 3
点赞数
分类专栏： SSM框架 Java 文章标签： SSM JAVA
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen_hao_181/article/details/98875719
版权

目录

1. 分页实现

2. 数据删除

3. 增加数据

4. 修改数据

1. 分页实现

请参考：https://blog.csdn.net/chen_hao_181/article/details/98763382

2. 数据删除

由于上节类容只实现了分页，对于页面还没有进行美化，这一节类容会将页面稍微美化一下，实现数据的增加删除修改功能。

美化过后的页面：

 代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分页显示数据</title>
<link rel="stylesheet" type="text/css" href="/SSM/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="/SSM/easyui/themes/icon.css">
	<script type="text/javascript" src="/SSM/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="/SSM/easyui/jquery.easyui.min.js"></script>
	<title>分页显示数据</title>
</head>
<body>
<div align="center" style="margin: auto;">
	<table id="dg" title="学生信息" style="width:90%;"
			data-options="rownumbers:false,singleSelect:true,pagination:true,url:'/SSM/stu/fenye',method:'get',toolbar:'#tb'">
		<thead>
			<tr>
				<th style="width:21%;" data-options="field:'sid',align:'center'">学 号</th>
				<th style="width:30%;" data-options="field:'sname',align:'center'">姓 名</th>
				<th style="width:30%;" data-options="field:'password',align:'center'">密 码</th>
				<th style="width:20%;" data-options="field:'score',align:'center'">成 绩</th>
			</tr>
		</thead>
	</table>
	
	<script type="text/javascript">
		$(function(){
			var pager = $('#dg').datagrid().datagrid('getPager');	// get the pager of datagrid
			pager.pagination({
				buttons:[{
					iconCls:'icon-remove',
					handler:function(){
						
				},{
					iconCls:'icon-add',
					handler:function(){
						$('#w').window('open')
					}
				},{
					iconCls:'icon-edit',
					handler:function(){
						
						
					}
				}]
			});			
		})
	</script>
</body>
</html>

修改一下字体大小：找到esayui.css文件

除此之外，为了少写代码，还需要利用到逆向工程生成的代码，在https://blog.csdn.net/chen_hao_181/article/details/98749806已经生成了代码，由于我们只需要student相关的，所有将那三个文件分别复制到项目中就可以了。

下面进行删除操作的功能添加，依然使用easyui的一些提示框来做。以下是修改过后的前端页面代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分页显示数据</title>
<link rel="stylesheet" type="text/css" href="/SSM/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="/SSM/easyui/themes/icon.css">
	<script type="text/javascript" src="/SSM/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="/SSM/easyui/jquery.easyui.min.js"></script>
	<title>分页显示数据</title>
</head>
<body>
<div align="center" style="margin: auto;">
	<table id="dg" title="学生信息" style="width:90%;"
			data-options="rownumbers:false,singleSelect:true,pagination:true,url:'/SSM/stu/fenye',method:'get',toolbar:'#tb'">
		<thead>
			<tr>
				<th style="width:21%;" data-options="field:'sid',align:'center'">学 号</th>
				<th style="width:30%;" data-options="field:'sname',align:'center'">姓 名</th>
				<th style="width:30%;" data-options="field:'password',align:'center'">密 码</th>
				<th style="width:20%;" data-options="field:'score',align:'center'">成 绩</th>
			</tr>
		</thead>
	</table>
	<div id="w" class="easyui-window" title="添加数据" data-options="iconCls:'icon-save'" style="width:500px;height:200px;padding:5px">
		<div class="easyui-layout" data-options="fit:true">
			<!-- <div data-options="region:'east',split:true" style="width:100px"></div> -->
			<div id="message" data-options="region:'center'" style="padding:10px;font-size: 16px;">
			<form id="add">
				姓 名 : <input name="sname" class="easyui-textbox" data-options="prompt:'Enter name'" style="width:30%;height:32px">
				密 码 : <input name="password" class="easyui-textbox" data-options="prompt:'Enter password'" style="width:30%;height:32px"><br>
				<div style="margin-top: 10px;"></div>
				成 绩 : <input name="score" class="easyui-textbox" data-options="prompt:'Enter score'" style="width:30%;height:32px">
			</form>
			</div>
			<div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
				<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="add()" style="width:80px">添 加</a>
				<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="$('#w').window('close')" style="width:80px">取 消</a>
			</div>
		</div>
	</div>
	
	<div id="w1" class="easyui-window" title="修改数据" data-options="iconCls:'icon-save'" style="width:500px;height:200px;padding:5px">
		<div class="easyui-layout" data-options="fit:true">
			<!-- <div data-options="region:'east',split:true" style="width:100px"></div> -->
			<div data-options="region:'center'" style="padding:10px;font-size: 16px;">
			<form id="edit">
				学 号 : <input id="eid" name="sid" class="easyui-textbox" style="width:30%;height:32px" readonly="readonly">
				姓 名 : <input id="esname" name="sname" class="easyui-textbox" style="width:30%;height:32px"><br>
				<div style="margin-top: 10px;"></div>
				密 码 : <input id="epassword" name="password" class="easyui-textbox" style="width:30%;height:32px">
				成 绩 : <input id="escore" name="score" class="easyui-textbox" data-options="prompt:'Enter score'" style="width:30%;height:32px">
			</form>
			</div>
			<div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
				<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="edit()" style="width:80px">修 改</a>
				<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="$('#w1').window('close')" style="width:80px">取 消</a>
			</div>
		</div>
	</div>
</div>
	<script type="text/javascript">
	function add(){
		var row = $('#add').serialize()
		$.post("/SSM/stu/add",row,function(data){
			console.log(data)
			if(data.code==1){
				alert("添加成功！");
			}
			location.href="/SSM/jsp/show.html" 
		});
	}
	function edit(){
		var row = $('#edit').serialize()
		$.post("/SSM/stu/edit",row,function(data){
			console.log(data)
			if(data.code==1){
				alert("修改成功！");
			}
			location.href="/SSM/jsp/show.html" 
		});
	}
		$(function(){
			$('#w').window('close');
			$('#w1').window('close');
			var pager = $('#dg').datagrid().datagrid('getPager');	// get the pager of datagrid
			pager.pagination({
				buttons:[{
					iconCls:'icon-remove',
					handler:function(){
						var row = $('#dg').datagrid('getSelected');
						if(row!=null){
							$.messager.confirm("操作提示", "您确定要删除该学生信息吗？", function (data) {
								if (data) {
									var sid = row.sid;
									console.log(sid)
									$.post("/SSM/stu/dele",row,function(data){
										console.log(data)
										if(data.code==1){
											alert("删除成功！");
										}
										location.href="/SSM/jsp/show.html" 
									});
								}
					    	});
						}else{
							$.messager.alert("操作提示", "操作失败！请至少选择一条！","error");
						}
						
					}
				},{
					iconCls:'icon-add',
					handler:function(){
						$('#w').window('open')
					}
				},{
					iconCls:'icon-edit',
					handler:function(){
						var row = $('#dg').datagrid('getSelected');
						if(row!=null){
							$.post("/SSM/stu/goedit",row,function(data){
								if(data.code==1){
									var stu = data.stu;
									$('#w1').window('open')
									$('#eid').textbox('setValue',stu.sid);
									$("#esname").textbox('setValue',stu.sname);
									$("#epassword").textbox('setValue',stu.password)
									$("#escore").textbox('setValue',stu.score)
								}
							});
						}else{
							$.messager.alert("操作提示", "操作失败！请至少选择一条！","error");
						}
						
					}
				}]
			});			
		})
	</script>
</body>
</html>

从代码中可以看出，删除的时候我们走的后端路径是/SSM/stu/dele

controller层

	/**
	 * 删除数据
	 * @param stu
	 * @return
	 */
	@RequestMapping("/dele")
	@ResponseBody
	public Map<String,Integer> dele(Student stu) {
		int i = stuService.dele(stu.getSid());
		Map<String,Integer> maps = new HashMap<String, Integer>();
		maps.put("code", i);
		return maps;
	}

service层

	@Autowired
	private StudentMapper studentMapper;
    /**
	 * 删除数据
	 * @param sid
	 * @return
	 */
	public int dele(int sid) {
		return studentMapper.deleteByPrimaryKey(sid);
	}

3. 增加数据

增加数据需要一个弹框。可以参考：http://www.jeasyui.net/demo/564.html 里面的流式窗口来做，我这里面已经做好了，也可以直接下载我的代码，最后面会给下载链接。

增加的时候走的后端路径：/SSM/stu/add

controller层

	/**
	 * 增加
	 * @param stu
	 * @return
	 */
	@RequestMapping("/add")
	@ResponseBody
	public Map<String,Integer> add(Student stu) {
		System.out.println(stu.getSname()+"-"+stu.getPassword()+"-"+stu.getScore());
		int i = stuService.add(stu);
		Map<String,Integer> maps = new HashMap<String, Integer>();
		maps.put("code", i);
		return maps;
	}

service层

	/**
	 * 增加
	 * @param stu
	 * @return
	 */
	public int add(Student stu) {
		return studentMapper.insertSelective(stu);
	}

4. 修改数据

修改数据稍微麻烦一点点，他需要用到jQuery去给文本框赋值。需要走两次后台，第一次根据用户选择修改的学生去查询，将结果显示出来，第二次才是根据用户提交的修改数据进行修改。

下面这张图是第一次走后台，查询并显示结果

controller层

	/**
	 * 查询需要修改的学生信息
	 * @param stu
	 * @return
	 */
	@RequestMapping("/goedit")
	@ResponseBody
	public Map<String,Object> goedit(Student stu){
		Student student = stuService.sele(stu.getSid());
		Map<String,Object> maps = new HashMap<String, Object>();
		maps.put("code", 1);
		maps.put("stu", student);
		return maps;
	}

service层

	/**
	 * 查询需要哦修改的学生信息
	 * @param sid
	 * @return
	 */
	public Student sele(int sid) {
		return studentMapper.selectByPrimaryKey(sid);
	}

以下是进行真正修改的操作

controller层

	/**
	 * 修改学生信息
	 * @param stu
	 * @return
	 */
	@RequestMapping("/edit")
	@ResponseBody
	public Map<String,Object> edit(Student stu){
		int i = stuService.edit(stu);
		Map<String,Object> maps = new HashMap<String, Object>();
		maps.put("code", i);
		return maps;
	}

service层

	/**
	 * 修改
	 * @param stu
	 * @return
	 */
	public int edit(Student stu) {
		return studentMapper.updateByPrimaryKeySelective(stu);
	}

这样删除修改增加功能都做完了。

controller层完整代码

package com.chtw.controller;

import java.util.HashMap;
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.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.chtw.pojo.Student;
import com.chtw.service.StuService;
import com.github.pagehelper.PageInfo;

@Controller
@RequestMapping("/stu")
public class StuController {
	
	//自动注入StuService
	@Autowired
	private StuService stuService;
	
	@RequestMapping("/getAll")
	public String getAll(Model model) {
		List<Student> sList = stuService.getAll();
		model.addAttribute("sList", sList);
		return "index";
	}

	/**
	 * 分页查询
	 * @param page
	 * @param rows
	 * @return
	 */
	@RequestMapping("/fenye")
	@ResponseBody
	public Map<String,Object> getFenye(@RequestParam(defaultValue="1",required=false) int page, int rows){
		PageInfo<Student> info = stuService.getFenye(page, rows);
		if(info!=null) {
			Map<String,Object> maps = new HashMap<String, Object>();
			maps.put("total", info.getTotal());
			maps.put("rows", info.getList());
			return maps;
		}
		return null;
	}
	
	/**
	 * 删除数据
	 * @param stu
	 * @return
	 */
	@RequestMapping("/dele")
	@ResponseBody
	public Map<String,Integer> dele(Student stu) {
		int i = stuService.dele(stu.getSid());
		Map<String,Integer> maps = new HashMap<String, Integer>();
		maps.put("code", i);
		return maps;
	}
	
	/**
	 * 增加
	 * @param stu
	 * @return
	 */
	@RequestMapping("/add")
	@ResponseBody
	public Map<String,Integer> add(Student stu) {
		System.out.println(stu.getSname()+"-"+stu.getPassword()+"-"+stu.getScore());
		int i = stuService.add(stu);
		Map<String,Integer> maps = new HashMap<String, Integer>();
		maps.put("code", i);
		return maps;
	}
	
	/**
	 * 查询需要修改的学生信息
	 * @param stu
	 * @return
	 */
	@RequestMapping("/goedit")
	@ResponseBody
	public Map<String,Object> goedit(Student stu){
		Student student = stuService.sele(stu.getSid());
		Map<String,Object> maps = new HashMap<String, Object>();
		maps.put("code", 1);
		maps.put("stu", student);
		return maps;
	}
	
	/**
	 * 修改学生信息
	 * @param stu
	 * @return
	 */
	@RequestMapping("/edit")
	@ResponseBody
	public Map<String,Object> edit(Student stu){
		System.out.println(stu.getSid()+"-"+stu.getSname()+"-"+stu.getPassword()+"-"+stu.getScore());
		int i = stuService.edit(stu);
		Map<String,Object> maps = new HashMap<String, Object>();
		maps.put("code", i);
		return maps;
	}
}

service层完整代码

package com.chtw.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.chtw.dao.StuDAO;
import com.chtw.dao.StudentMapper;
import com.chtw.pojo.Student;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;

@Service
public class StuService {
	
	//自动注入StuDAO
	@Autowired
	private StuDAO stuDAO;
	
	@Autowired
	private StudentMapper studentMapper;
	
	public List<Student> getAll(){
		return stuDAO.getAll();
	}

	/**
	 * 分页查询
	 * @param nowpage
	 * @param size
	 * @return
	 */
	public PageInfo<Student> getFenye(int page, int size) {
		PageHelper.startPage(page, size);
		List<Student> sList = stuDAO.getAll();
		PageInfo<Student> info = new PageInfo<Student>(sList);
		return info;
	}

	/**
	 * 删除数据
	 * @param sid
	 * @return
	 */
	public int dele(int sid) {
		return studentMapper.deleteByPrimaryKey(sid);
	}

	/**
	 * 增加
	 * @param stu
	 * @return
	 */
	public int add(Student stu) {
		/*StudentExample example = new StudentExample();
		StudentExample.Criteria cre = example.createCriteria();
		cre.andSidEqualTo(sid);*/
		return studentMapper.insertSelective(stu);
	}

	/**
	 * 查询需要哦修改的学生信息
	 * @param sid
	 * @return
	 */
	public Student sele(int sid) {
		return studentMapper.selectByPrimaryKey(sid);
	}

	/**
	 * 修改
	 * @param stu
	 * @return
	 */
	public int edit(Student stu) {
		return studentMapper.updateByPrimaryKeySelective(stu);
	}
}

本节类容的源码下载地址：https://github.com/twwch/SSM-EasyUI-Test.git

本人联系方式2329095893,欢迎各位进行学习讨论

欢迎关注熊熊出没ING公众号，不定时跟新Java、python、信息安全等相关知识哦。

IT一氪
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值