EasyUi(完整版)

一.项目结构

二.前台页面搭建

三.后台开发

四.运行效果

1.项目结构

二.前台页面搭建

index.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">
<%@ include file="/common/head.jsp" %>
<title>Insert title here</title>
<script>
$(function(){$('#bookTable').datagrid({    url: ctx+'/bookServlet', //映射的servlet名pagination:true,//如果为true，则在底部显示工具栏singleSelect:true,queryParams: {"bookName": $("#bookName").val()},columns:[[    {field:'id',title:'书本ID',width:100},  /*            {field:'id',title:'书本ID',width:100}, id 名与实体类属性名 一致    */  {field:'bookname',title:'名称',width:100},    {field:'price',title:'价格',width:100,align:'right'},{field:'booktype',title:'类型',width:100,align:'right'}]],toolbar: '#bookTableToolbar'});$("#bookQry").click(function() {qryBook();});qryBook();function qryBook() {$('#bookTable').datagrid("load", {//重载行 将他保持在当前页"bookName": $("#bookName").val()/* 获取文本框的值 */})};});
</script>
</head>
<body><!-- 查询条件 --><div style="margin-top: 15px; margin-left:10px;"><input class="easyui-textbox" id="bookName" style="width:300px"><!--文本框  --><a id="bookQry" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>  <!-- 按钮 --></div> <div id="p" class="easyui-panel" style="padding:10px" data-options="fit:true, border:false"><table id="bookTable" class="easyui-datagrid" style="width:100%;height:90%;"> </table></div><!-- 列表上方的工具条 --><div id="bookTableToolbar" style="text-align: right;"><a href="#" id="addBookBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"/a><a href="#" id="editBootBtn" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a><a href="#" id="delBootBtn" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"/a></div></body>
</html>

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">
<%@ include file="/common/head.jsp" %>
<title>Insert title here</title>
<script>
$(function() {$("#bookTable").datagrid({url: ctx+'/bookListServlet',columns:[[{field:'id',title:'书本ID',width:100},    {field:'bookname',title:'名称',width:100},    {field:'price',title:'价格',width:100,align:'right'},{field:'booktype',title:'类型',width:100,align:'right'}]],queryParams: {bookName: $("#bookName").val()},pagination: true,singleSelect:true,toolbar: '#bookTableToolbar'});$("#bookQry").click(function() {qryBook();});qryBook();function qryBook() {$('#bookTable').datagrid("load", {"bookName": $("#bookName").val()})}$("#addBookBtn").click(function() {openDialog();});$("#editBootBtn").click(function() {let row = $("#bookTable").datagrid("getSelected");openDialog(row);})$("#delBootBtn").click(function() {let row = $("#bookTable").datagrid("getSelected");if(!row) {$.messager.alert('消息','请选择要删除的记录');return;}$.ajax({url: ctx + '/bookDelServlet',type: 'post',data:{id: row.id},dataType: 'json',success: function(resp) {if(resp.success) {$.messager.alert('消息','操作成功');qryBook();}else{$.messager.alert('消息','操作不成功');}}})})function openDialog(row) {let title = "增加书本信息";let action = "/bookAddServlet"if(row) {title = "修改书本信息";action = "/bookUpdateServlet"}$('#bookDiglog').dialog({    title: title,    width: 400,    height: 250,    closed: false,    cache: false,    href: 'editBook.jsp',    modal: true,buttons:[{text:'保存',handler:function(){$.ajax({url:ctx + action,data: $("#bookForm").serialize(),type: 'post',dataType: 'JSON',success: function(resp) {if(resp.success) {$.messager.alert('消息','操作成功');$('#bookDiglog').dialog('close');qryBook();} else {$.messager.alert('警告','操作失败');    }}});}},{text:'关闭',handler:function(){$('#bookDiglog').dialog('close');}}],onLoad: function() {if(row) {$("#bookForm").form("reset");$("#bookForm").form("load", row);}}});}
});
</script>
</head>
<body><!-- 查询条件 --><div style="margin-top: 15px; margin-left:10px;"><input class="easyui-textbox" id="bookName" style="width:300px"><a id="bookQry" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>  </div> <div id="p" class="easyui-panel" style="padding:10px" data-options="fit:true, border:false"><table id="bookTable" class="easyui-datagrid" style="width:100%;height:90%;"> </table></div><!-- 列表上方的工具条 --><div id="bookTableToolbar" style="text-align: right;"><a href="#" id="addBookBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"/a><a href="#" id="editBootBtn" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a><a href="#" id="delBootBtn" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"/a></div><!-- 弹出窗口的容器 --><div id="bookDiglog" style="display:none;"></div></body>
</html>

editBook.jsp 代码

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<div><form id="bookForm">   <input type="hidden" name="id" id="id"/><div style="margin: 15px;">   <label for="name">书名:</label>   <input class="easyui-textbox" name="bookname"  style="width:300px" data-options="required:true"> </div>   <div style="margin: 15px;">   <label for="price">价格:</label>   <input class="easyui-textbox" name="price"  style="width:300px" data-options="required:true"> </div><div style="margin: 15px;">   <label for="booktype">类型:</label>   <input class="easyui-textbox" name="booktype" style="width:300px" data-options="required:true"> </div>  </form>
</div>

三：后台开发

Dao 方法

package com.zking.easyuitest.dao;import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;import com.zking.easyuitest.model.Book;
import com.zking.easyuitest.util.DBHelper;public class BookDao implements IBookDao {@Overridepublic List<Book> getBooks(String name, int page, int pageSize) {List<Book> list = new ArrayList<>();Connection con = null;PreparedStatement ps = null;ResultSet rs = null;String sql = "select id,bookname,price,booktype,rownum rid from t_book ";try {if(null != name && !"".equals(name)) {sql += "where bookname like ? ";}sql = "select * from (" + sql + ") b where b.rid between ? and ?";//通过传入的参数来计算开始和结束的行号int start = (page - 1) * pageSize + 1;int end = page*pageSize;con = DBHelper.getsCon();ps = con.prepareStatement(sql);if(null != name && !"".equals(name)) { ps.setString(1, name+"%");ps.setInt(2, start);ps.setInt(3, end);} else {ps.setInt(1, start);ps.setInt(2, end);}rs = ps.executeQuery();while(rs.next()) {Book book = new Book();book.setId(rs.getInt("id"));book.setBookname(rs.getString("bookname"));book.setPrice(rs.getString("price"));book.setBooktype(rs.getString("booktype"));list.add(book);}} catch (Exception e) {e.printStackTrace();} finally {DBHelper.Close(con, ps, rs);}return list;}@Overridepublic int getTotalRow(String name) {Connection con = null;PreparedStatement ps = null;ResultSet rs = null;int totalRow = 0;String sql = "select count(*) from t_book ";try {if(null != name || !"".equals(name)) {sql += "where bookname like ? ";}con = DBHelper.getsCon();ps = con.prepareStatement(sql);if(null != name || !"".equals(name)) {ps.setString(1, name+"%");}rs = ps.executeQuery();if(rs.next()) {totalRow = rs.getInt(1);}} catch (Exception e) {e.printStackTrace();} finally {DBHelper.Close(con, ps, rs);}return totalRow;}@Overridepublic void addBook(Book book) {Connection con = null;PreparedStatement ps = null;String sql = "insert into t_book (id,bookname, price,booktype) " + "select max(id)+1,?, ?, ?  from t_book";try {con = DBHelper.getsCon();ps = con.prepareStatement(sql);ps.setString(1, book.getBookname());ps.setFloat(2, Float.parseFloat(book.getPrice()));ps.setString(3, book.getBooktype());ps.executeUpdate();} catch (SQLException e) {e.printStackTrace();} finally {DBHelper.Close(con, ps);}}@Overridepublic void updateBook(Book book) {Connection con = null;PreparedStatement ps = null;String sql = "update t_book set bookname=?, price=?,booktype=? where id=?" ;try {con = DBHelper.getsCon();ps = con.prepareStatement(sql);ps.setString(1, book.getBookname());ps.setFloat(2, Float.parseFloat(book.getPrice()));ps.setString(3, book.getBooktype());ps.setInt(4, book.getId());ps.executeUpdate();} catch (SQLException e) {e.printStackTrace();} finally {DBHelper.Close(con, ps);}}@Overridepublic void delBook(int id) {Connection con = null;PreparedStatement ps = null;String sql = "delete t_book where id=?" ;try {con = DBHelper.getsCon();ps = con.prepareStatement(sql);ps.setInt(1, id);ps.executeUpdate();} catch (SQLException e) {e.printStackTrace();} finally {DBHelper.Close(con, ps);}}}

servlet 代码

修改 servlet

package com.zking.euidemo.servlet; import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;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.model.Book;
import com.zking.euidemo.servler.BookService;
import com.zking.euidemo.servler.IBookService;@WebServlet("/bookUpdateServlet")
public class BookUpdateServlet extends HttpServlet {private IBookService service = new BookService();public void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {doPost(req, resp);}public void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {req.setCharacterEncoding("utf-8");resp.setContentType("application/json; charset=utf-8");String id = req.getParameter("id");String name = req.getParameter("bookname");String price = req.getParameter("price");String booktype = req.getParameter("booktype");Map<String, Object>map = new HashMap<>();try {Book book = new Book();book.setId(Integer.parseInt(id));book.setBookname(name);book.setBooktype(booktype);book.setPrice(price);service.updateBook(book);map.put("success", true);} catch (Exception e) {e.printStackTrace();map.put("success", false);// TODO: handle exception}PrintWriter out = resp.getWriter();out.write(JSON.toJSONString(map));out.flush();out.close();}
}

增加 servlet

package com.zking.euidemo.servlet; import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;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.model.Book;
import com.zking.euidemo.servler.BookService;
import com.zking.euidemo.servler.IBookService;@WebServlet("/bookAddServlet")
public class BookAddServlet extends HttpServlet {private IBookService service = new BookService();public void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {doPost(req, resp);}public void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {req.setCharacterEncoding("utf-8");resp.setContentType("application/json; charset=utf-8");String name = req.getParameter("bookname");String price = req.getParameter("price");String booktype = req.getParameter("booktype");Book book = new Book();book.setBookname(name);book.setBooktype(booktype);book.setPrice(price);PrintWriter out = resp.getWriter();Map<String,Object> data = new HashMap<>();try {service.addBook(book);data.put("success", true);} catch (Exception e) {data.put("success", false);}out.write(JSON.toJSONString(data));out.flush();out.close();}
}

删除 servlet

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.dao.BookDao;
import com.zking.euidemo.dao.IBookDao;
import com.zking.euidemo.servler.BookService;
import com.zking.euidemo.servler.IBookService;
@WebServlet("/bookDelServlet")
public class BookDelServlet extends HttpServlet{//private IBookDao idb = new BookDao();private IBookService ibs = new BookService();@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// TODO Auto-generated method stubdoPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setContentType("application/json; charset=utf-8");    Map<String, Object> map = new HashMap<>();try {int id = Integer.parseInt(req.getParameter("id"));ibs.delBook(id);map.put("success", true);} catch (Exception e) {e.printStackTrace();map.put("success", false);// TODO: handle exception}PrintWriter out = resp.getWriter();out.print(JSON.toJSONString(map));out.flush();out.close();}
}

绑定数据 servlet

package com.zking.euidemo.servlet;import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
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.model.Book;
import com.zking.euidemo.servler.BookService;
import com.zking.euidemo.servler.IBookService;
@WebServlet("/bookListServlet")
public class BookListServlet extends HttpServlet{private IBookService service = new BookService();@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// TODO Auto-generated method stubdoPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setContentType("application/json; charset=utf-8");String name = req.getParameter("bookName");String pageindex = req.getParameter("page");int pid = pageindex == null||"".equals(pageindex)? 1:Integer.parseInt(pageindex);//如果 pageindex=null ||"" 为一     否则pageindex 赋值给pidint pagesize = 10;List<Book> list = service.getBooks(name, pid, pagesize);int totalpage = service.gettotalpage();Map<String, Object> data =  new HashMap<>();data.put("total", totalpage);data.put("rows", list);String json = JSON.toJSONString(data);PrintWriter out = resp.getWriter();out.write(json);out.flush();out.close();}
}

四：效果图

修改

增加

删除

EasyUi(完整版)相关推荐

java web学习项目20套源码完整版
java web学习项目20套源码完整版自己收集的各行各业的都有,这一套源码吃遍所有作业项目! 1.BBS论坛系统(jsp+sql) 2.ERP管理系统(jsp+servlet) 3.OA办公自动化 ...
Anaconda中安装Orange3脚本-完整版
2019独角兽企业重金招聘Python工程师标准>>> #Anaconda中安装Orange3脚本,完整版.包括插件的安装,在脚本中一次完成. sudo apt-get update ...
图解GPT-2（完整版）！
↑↑↑关注后"星标"Datawhale 每日干货 & 每月组队学习,不错过 Datawhale干货译者:张贤, 哈尔滨工程大学,Datawhale原创作者干货长文,建议 ...
PyTorch核心贡献者开源书：《使用PyTorch进行深度学习》完整版现已发布！
来源|新智元 [导读]<使用PyTorch进行深度学习>一书的完整版现已发布!教你如何使用PyTorch创建神经网络和深度学习系统,内含图解与代码,操作易上手. 由Luca Antiga. ...
甘肃省计算机二级考试题库,2011甘肃省计算机等级考试二级最新考试试题库(完整版)...
2011甘肃省计算机等级考试二级最新考试试题库(完整版) 1.在软件生命周期中,能准确地确定软件系统必须做什么和必须具备哪些功能的阶段是(D) A. 概要设计 B. 详细设计 C. 可行性分析 D. ...
php留言板源码免mysql_PHPMYSQL留言板源码(终极完整版).doc
PHPMYSQL留言板源码(终极完整版).doc 数据库结构?:(库名:lyb) 表一: admin? 字段: id(int11?) name(varch?vr) passw?ord(varch?vr ...
c语言s开头的函数以及作用,C语言函数大全-s开头-完整版.doc
C语言函数大全-s开头-完整版 C语言函数大全(s开头) 函数名: sbrk 功能: 改变数据段空间位置用法: char *sbrk(int incr); 程序例: #include#include ...
计算机图形学画圆vc代码,计算机图形学实验--完整版-带结果--vc++实现.doc
计算机图形学实验--完整版-带结果--vc实现计算机图形学实验报告信息学院计算机专业 20081060183 周建明综括: 利用计算机编程语言绘制图形,主要实现以下内容: (1).中点算法生成任 ...
那些珍贵的「视觉SLAM」课程资料总结（补充版/完整版）
文章目录一前言二干货原文链接: 那些珍贵的「视觉SLAM」课程资料总结(补充版/完整版) 在公众号「3D视觉工坊」后台,回复「SLAM」,获得以下资源的完整下载链接. 一前言之前曾经总结 ...

EasyUi(完整版)

EasyUi(完整版)相关推荐

最新文章

热门文章