目录
前言:
这次的功能是基于上一次的项目做的,如果有不懂的可以看上一节使用EasyUI实现增加功能
一:前台开发
二:后台开发
三:效果图
距离使用EasyUI完成整个后台、书本管理项目只剩这最后一次讲解了,话不多说,直接上代码
一.前台开发
同样,修改和删除在原来的基础上有所延伸,找到原来的页面继续写就行了
bookList.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@include file="../../common/head.jsp" %>
<script>
$(function(){
$('#dg').datagrid({
url:ctx+'/BookServlet',
toolbar: '#tb',
pagination:true, //显示底部分页工具栏
singleSelect:true,//只能选择一行
columns:[[
//表格的结构,需要与实体类保持一致
{field:'id',title:'ID',width:100,align:'center'},
{field:'bookname',title:'书本名称',width:100,align:'center'},
{field:'price',title:'价格',width:100,align:'center'},
{field:'booktype',title:'类型',width:100,align:'center'}
]]
});
//给查询添加点击事件
$("#qrybtn").click(function(){
qry();
});
function qry(){
//重载行
$('#dg').datagrid("reload",{
//拿到以前的值给文本框赋值
bookName:$("#bookName").val()
});
};
//增加书本
$("#addBook").click(function() {
openDialog();
});
//修改书本
$("#updateBook").click(function(){
let row = $('#dg').datagrid("getSelected");
openDialog(row);
});
//删除书本
$("#deleteBook").click(function(){
let row = $('#dg').datagrid("getSelected");
if(!row){
$.messager.alert('提示', '请先选择你要删除的书籍');
return;
}
let id=row.id;
$.messager.confirm('确认','您确认想要删除记录吗?',function(r){
if (r){
$.ajax({
url:ctx + "/bookDeleteServlet",
type:'post',
data: {
id:id
},
dataType:'json',
success:function(resp){
if(resp.success){
$.messager.alert('提示', '操作成功');
qry();
}else{
$.messager.alert('警告', '操作失败');
}
}
});
}
});
})
function openDialog(row){
let title="增加书本信息";
let action = "/bookAddServlet";
if(row){
title = "修改书本信息";
action = "/bookUpdateServlet";
}
$("#editDlalog").dialog({
title:title,
width: 300,
height: 250,
closed: false,
cache: false,
href: 'editBook.jsp',
modal: true,
buttons:[{
text:'保存',
iconCls:'icon-save',
handler:function(){
$.ajax({
url:ctx + action,
type:'post',
data: $("#bookForm").serialize(),
dataType:'json',
success:function(resp){
if(resp.success){
$.messager.alert('提示', '操作成功');
$("#editDlalog").dialog("close");
qry();
}else{
$.messager.alert('警告', '操作失败');
}
}
});
}
},{
text:'关闭',
iconCls:'icon-cancel',
handler:function(){
$("#editDlalog").dialog("close");
}
}],
onLoad: function() {
if(row) {
$("#bookForm").form("reset");//重置
$("#bookForm").form("load", row);//加载数据
}
}
});
}
});
</script>
</head>
<body>
<form style="margin-top:20px;">
<label for="name">书籍名称:</label>
<input id="bookName" class="easyui-textbox" data-options="" style="width:300px;">
<a id="qrybtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
</form>
<div style="margin-top:10px;">
<table id="dg"></table>
</div>
<!-- 列表上方的工具条 -->
<div id="tb" style="text-align:right;">
<a href="#" id="addBook" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"></a>
<a href="#" id="updateBook" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a>
<a href="#" id="deleteBook" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"></a>
</div>
<!-- 给弹出窗口定义一个容器,并默认为隐藏,在点击后再显示 -->
<div id="editDlalog" style="display:none;"></div>
</body>
</html>
editBook.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<form id="bookForm">
<input type="hidden" name="id" id="id"/>
<div style="margin-top: 10px;margin-left:10px;">
<label for="name">书本名称:</label>
<input class="easyui-textbox" type="text" name="bookname" id="bookname" data-options="required:true" />
</div>
<div style="margin-top: 10px;margin-left:10px;">
<label for="price">书本价格:</label>
<input class="easyui-textbox" type="text" name="price" id="price" data-options="required:true" />
</div>
<div style="margin-top: 10px;margin-left:10px;">
<label for="booktype">书本类型:</label>
<input class="easyui-textbox" type="text" name="booktype" id="booktype" data-options="required:true" />
</div>
</form>
二:后台开发
IBookDao 实现一个接口
/**
* 修改书本
* @param book 书本对象
*/
void updateBook(Book book);
/**
* 删除书本
* @param id 书本id
*/
void delBook(Integer id);
BookDao
@Override
public void updateBook(Book book) {
Connection con = null;
PreparedStatement ps = null;
String sql = "update t_book set bookname=?,price=?, booktype=? where id=?";
try {
con = DBHelper.getCon();
ps = con.prepareStatement(sql);
ps.setString(1, book.getBookname());
ps.setBigDecimal(2, book.getPrice());
ps.setString(3, book.getBooktype());
ps.setInt(4, book.getId());
ps.executeUpdate();
} catch (Exception e) {
e.printStackTrace();
} finally {
DBHelper.myClose(con, ps, null);
}
}
@Override
public void delBook(Integer id) {
Connection con = null;
PreparedStatement ps = null;
String sql = "delete from t_book where id=?";
try {
con = DBHelper.getCon();
ps = con.prepareStatement(sql);
ps.setInt(1, id);
ps.executeUpdate();
} catch (Exception e) {
e.printStackTrace();
} finally {
DBHelper.myClose(con, ps, null);
}
}
IBookService
/**
* 修改书本
* @param book 书本对象
*/
void updateBook(Book book);
/**
* 删除书本
* @param id 书本id
*/
void delBook(Integer id);
BookService
@Override
public void updateBook(Book book) {
// TODO Auto-generated method stub
bd.updateBook(book);
}
@Override
public void delBook(Integer id) {
// TODO Auto-generated method stub
bd.delBook(id);
}
BookUpdateServlet
package com.zking.euidemo.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.math.BigDecimal;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
import com.zking.euidemo.entity.Book;
import com.zking.euidemo.service.BookService;
import com.zking.euidemo.service.IBookService;
@WebServlet("/bookUpdateServlet")
public class BookUpdateServlet extends HttpServlet{
private IBookService service= new BookService();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置字符编码方式
req.setCharacterEncoding("utf-8");
resp.setContentType("application/json; charset=utf-8");
Map<String, Object> rv = new HashMap<>();
try {
String id =req.getParameter("id");
String bookname = req.getParameter("bookname");
String price = req.getParameter("price");
String booktype = req.getParameter("booktype");
Book book = new Book();
book.setId(Integer.parseInt(id));
book.setBookname(bookname);
book.setPrice(new BigDecimal(price));
book.setBooktype(booktype);
service.updateBook(book);
rv.put("success", true);
} catch (Exception e) {
e.printStackTrace();
rv.put("success", false);
}
PrintWriter out = resp.getWriter();
String json=JSON.toJSONString(rv);
out.write(json);
out.flush();
out.close();
}
}
BookDeleteServlet
package com.zking.euidemo.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
import com.zking.euidemo.service.BookService;
import com.zking.euidemo.service.IBookService;
@WebServlet("/bookDeleteServlet")
public class BookDeleteServlet extends HttpServlet{
private IBookService service = new BookService();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置字符编码方式
req.setCharacterEncoding("utf-8");
resp.setContentType("application/json; charset=utf-8");
Map<String, Object> rv = new HashMap<>();
try {
String id = req.getParameter("id");
service.delBook(Integer.parseInt(id));
rv.put("success", true);
} catch (Exception e) {
e.printStackTrace();
rv.put("success", false);
}
PrintWriter out = resp.getWriter();
String json = JSON.toJSONString(rv);
out.write(json);
out.flush();
out.close();
}
}
三:效果图
注: 当没有选中你要修改的记录去点击修改按钮时默认弹出增加界面,当选中了你要修改的行时点击修改按钮是会传入一个id弹出修改界面,界面上绑定了该书本的信息,修改成功时会弹出操作成功的提示窗口。
注:当用户没有选中要删除的记录时点击删除按钮,会弹出提示窗口提示“请先选择你要删除的书籍”;当用户选中要删除的记录时点击删除按钮则传入一个书籍id并提示用户是否要删除,如果用户选择“确定”则提示删除成功,如果用户选择“取消”则返回书籍展示界面。
好了,整个使用EasyUI完成整个后台、书本管理的项目完成了,希望能对大家有所帮助!!!