前言
因为前面博客系统性的写了相关的代码和注意实现这里就不重复了，照样还是用自己写的mvc框架来配合easyui实现增删改查。
思路
其实主要注意两点：
- 缓存的问题，如果修改完js文件后不清空浏览器的缓存或者eclipse的缓存的话，你运行时候它还是会停留在你修改前的状态中的，解决方案
Shift+Ctrl+Delete清除浏览器的历史记录，eclipse中找到project--->clean - 一定要细心细心细心，不要一下少个逗号或者单词写错里面没有快捷键的。
好了还是基于官方文档，首先我们需要了解，修改和增加是不需要进行跳转界面的，模态框即可解决，模态框是包含表单在内的，表单的name值需要和实体类对应，不能错一个单词，不然效果出不来，利用jquery把需要用到的标签进行事件绑定，在事件里面利用文档提供的方法、事件、属性配合mvc框架与后台交互进行数据渲染。
流程
代码实现
这是我准备的依赖和工具类
这是项目的依赖
1.前端代码
1.1addBook.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">
<!-- 全局样式 -->
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<!-- 定义图标 -->
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<script type="text/javascript"
src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<!-- 主键库源码的JS文件 -->
<script type="text/javascript"
src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/bg/addBook.js"></script>
<title>新增界面</title>
</head>
<body>
<input type="hidden" id="ctx"
value="${pageContext.request.contextPath }">
<div id="tb">
名字： <input class="easyui-textbox" id="name" name="name"
style="width: 20%; padding-left: 10px" data-option=""> <a
id="btn-serch" href="#" class="easyui-linkbutton"
data-options="iconCls:'icon-edit',plain:true">搜索</a> <a id="btn-add"
class="easyui-linkbutton"
data-options="iconCls:'icon-help',plain:true">新增</a>
</div>
<div id="dd" class="easyui-dialog" title="新型编辑窗体"
style="width: 600px; height: 600px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#fbtns'">
<form id="ff" method="post">
<input type="text" name="id" />
<div>
<label for="name">书籍名称:</label> <input class="easyui-validatebox"
type="text" name="name" data-options="required:true" />
</div>
<div>
<label for="author">书籍类别:</label> <input class="easyui-validatebox"
type="text" name="author" data-options="required:true" />
</div>
<div>
<label for="price">价格:</label> <input class="easyui-validatebox"
type="text" name="price" data-options="required:true" />
</div>
<div>
<label for="image">图片地址:</label> <input class="easyui-validatebox"
type="text" name="image" data-options="required:true" />
</div>
<div>
<label for="publishing">出版社:</label> <input
class="easyui-validatebox" type="text" name="publishing"
data-options="required:true" />
</div>
<div>
<label for="description">描述:</label> <input
class="easyui-validatebox" type="text" name="description"
data-options="required:true" />
</div>
<div>
<label for="state">物流状态:</label> <input class="easyui-validatebox"
type="text" name="state" data-options="required:true" />
</div>
<div>
<label for="deployTime">发布时间:</label> <input
class="easyui-validatebox" type="text" name="deployTime"
data-options="required:true" />
</div>
<div>
<label for="sales">数量:</label> <input class="easyui-validatebox"
type="text" name="sales" data-options="required:true" />
</div>
</form>
</div>
<div id="fbtns">
<a id="btn-save" href="#" class="easyui-linkbutton"
data-options="iconCls:'icon-edit',plain:true">保存</a> <a
id="btn-cancel" class="easyui-linkbutton"
data-options="iconCls:'icon-help',plain:true">取消</a>
</div>
<table id="dg"></table>
</body>
</html>
1.2addBook.js
这是前端和后台交互的核心逻辑，为了方便大家理解我注释写的比较多。
$(function(){
var src = $("#ctx").val();
$('#dg').datagrid({
url:src+'/book.action?methodName=datagrid',
// 要进行分页
pagination:true,
// 每次只能选中一行
singleSelect:true,
toolbar:'#tb',
// 加载想要的列
columns:[[
{field:'id',title:'id',width:100},
{field:'name',title:'名称',width:100},
{field:'pinyin',title:'拼音',width:100},
{field:'cid',title:'副id',width:100},
{field:'author',title:'作者',width:100},
{field:'price',title:'价格',width:100},
{field:'image',title:'路径',width:100},
{field:'publishing',title:'出版社',width:100},
{field:'description',title:'描述',width:100},
{field:'state',title:'更新',width:100},
{field:'deployTime',title:'时间',width:100},
{field:'sales',title:'数量',width:100},
// 绑定操作事件
{field:'xxxx',title:'操作',width:100,formatter: function(value,row,index){
return '<a href="javascript:void(0)" οnclick="edit()">修改</a> <a href="javascript:void(0)" οnclick="del()">删除</a>'
}
}
]]
});
// 点击搜索按钮完成按名字进行书籍查询
$("#btn-serch").click(function(){
$('#dg').datagrid('load', {
name: $("#name").val()
});
})
//给新增按钮绑定点击事件
$("#btn-add").click(function(){
//需要打开dialog窗体，可以去查看改组件的方法api
$('#dd').dialog('open');
});
//增加修改合二为
$("#btn-save").click(function(){
// 加载表单中的提交
$('#ff').form('submit',{
url:src+'/book.action?methodName=save',
// 成功函数返回的值
success:function(data){
// 将括号内的表达式('data')转化为对象
data=eval('('+data+')');
// 判断结果码是否正常
if(data.code == 200){
// 提示操作成功
alert(data.msg)
// 清空态框
$('#ff').form('clear');
// 关闭模态框
$('#dd').dialog('close');
// 刷新数据
$('#dg').datagrid('reload');
}
}
});
})
//关闭
$("#btn-cancel").click(function(){
// 关闭模态框
$('#dd').dialog('close');
})
})
//修改
function edit(){
// alert(1);
// 做数据回显就是将选中的datagrid行值进行回填到from表单、
// 获取到数据表格中选中的行对象
var row =$('#dg').datagrid('getSelected');
// 如果行对象存在就加载到模态框中显示
if(row){
$('#ff').form('load',row);
}
// 显示模态框
$('#dd').dialog('open');
}
//删除
function del(){
// 从获取到行对象开始
var row =$('#dg').datagrid('getSelected');
// 不为空的话就进行下一步处理
if(row){
// 加载ajax进行局部刷新
$.ajax({
// 加载资源
url:ctx+'/book.action?methodName=del&&id='+row.id,
// 得到成功函数返回的值
success:function(data){
// 将括号内的表达式('data')转化为对象
data=eval('('+data+')');
if(data.code == 200){
alert(data.msg)
// 刷新数据
$('#dg').datagrid('reload');
}
}
});
}
}
2.后台代码
2.1.BookDao
package com.liyingdong.dao;
import java.sql.SQLException;
import java.util.List;
import com.liyingdong.entity.Book;
import com.liyingdong.util.BaseDao;
import com.liyingdong.util.PageBean;
import com.liyingdong.util.PinYinUtil;
import com.liyingdong.util.StringUtils;
public class BookDao extends BaseDao<Book> {
// 通用分页
public List<Book> list(Book book, PageBean pageBean) throws Exception {
String name = book.getName();
String sql = "select * from t_easyui_book where true ";
if (StringUtils.isNotBlank(name)) {
sql += " and name like '%" + name + "%' ";
}
return super.executeQuery(sql, Book.class, pageBean);
}
// 增加
public int add(Book book) throws NoSuchFieldException, SecurityException, IllegalArgumentException,
IllegalAccessException, SQLException {
book.setPinyin(PinYinUtil.getAllPingYin(book.getName()));
String sql = "insert into t_easyui_book values(null,?,?,?,?,?,?,?,?,?,?,?)";
return super.executeUpdate(sql, book, new String[] { "name", "pinyin", "cid", "author", "price", "image",
"publishing", "description", "state", "deployTime", "sales", });
}
// 删除
public int del(Book book) throws NoSuchFieldException, SecurityException, IllegalArgumentException,
IllegalAccessException, SQLException {
String sql = "delete from t_easyui_book where id=?";
return super.executeUpdate(sql, book, new String[] { "id" });
}
// 修改
public int edit(Book book) throws NoSuchFieldException, SecurityException, IllegalArgumentException,
IllegalAccessException, SQLException {
book.setPinyin(PinYinUtil.getAllPingYin(book.getName()));
String sql = "update t_easyui_book set name=?,pinyin=?,cid=?,author=?,price=?,image=?,publishing=?,description=?,state=?,deployTime=?,sales=? where id=?";
return super.executeUpdate(sql, book, new String[] { "name", "pinyin", "cid", "author", "price", "image",
"publishing", "description", "state", "deployTime", "sales", "id" });
}
}
2.2.BookAction
package com.liyingdong.web;
import java.sql.SQLException;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.liyingdong.dao.BookDao;
import com.liyingdong.entity.Book;
import com.liyingdong.framework.ActionSupport;
import com.liyingdong.framework.ModelDriver;
import com.liyingdong.util.DataGridResult;
import com.liyingdong.util.PageBean;
import com.liyingdong.util.ResponseUtil;
import com.liyingdong.util.Result;
public class BookAction extends ActionSupport implements ModelDriver<Book> {
private Book book = new Book();
private BookDao bookDao = new BookDao();
@Override
public Book getModel() {
return book;
}
// 查询
public String datagrid(HttpServletRequest req, HttpServletResponse resp) throws Exception {
PageBean pageBean = new PageBean();
pageBean.setRequest(req);
List<Book> list = bookDao.list(book, pageBean);
try {
ResponseUtil.writeJson(resp, DataGridResult.ok(pageBean.getTotal() + "", list));
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
// 新增修改合起来
public String save(HttpServletRequest req, HttpServletResponse resp) throws Exception {
try {
if (book.getId() != 0) {
this.bookDao.edit(book);
} else {
this.bookDao.add(book);
}
ResponseUtil.writeJson(resp, Result.success);
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (SecurityException e) {
e.printStackTrace();
} catch (IllegalArgumentException e) {
e.printStackTrace();
}
return null;
}
// 删除
public String del(HttpServletRequest req, HttpServletResponse resp)
throws InstantiationException, IllegalAccessException, SQLException {
try {
this.bookDao.del(book);
ResponseUtil.writeJson(resp, Result.success);
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (SecurityException e) {
e.printStackTrace();
} catch (IllegalArgumentException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
2.3.Result
package com.liyingdong.util;
public class Result<T> {
private int code;
private String msg;
private T data;
public static Result success=new Result<>(200,"操作成功");
public static <T> Result ok(T data) {
return new Result<T>(data);
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Result(int code, String msg) {
super();
this.code = code;
this.msg = msg;
}
public T getData() {
return data;
}
public void setData(T data) {
this.data = data;
}
private Result() {
super();
}
private Result(T data) {
this.data = data;
}
}
运行结果
增加书籍界面。
修改界面
删除界面
操作后效果：
712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
