准备数据表 模拟?
create table tb_book
(
bid number primary key,--书籍id
bname varchar2(100),--书籍名称
bprice number(5,2),--书籍价格
btype varchar2(100)--书籍类型
)
select * from tb_book;1.1 DataGrid基本属性
? ?1.1.1 基本属性
? ? ? url : '', ?? ??? ?// 初始化请求路径
? ? ? fitcolumns : false, ?? ?// 列宽自适应
? ? ? singleSelect : true, ?? ?// 是否选中单行
? ? ? checkOnSelect : true, ?? ?// 点击行选中时该checkbox选中或取消选中
? ? ? rownumbers:true,?? ? ? ? ? ?// 行号
? ? ? fit : true, ?? ??? ?// 高宽自适应
? ? ? border : false, ?? ? ? ? ? ?// 是否显示边框
? ? ? title : '书本列表', ?? ?// datagrid标题
? ? ? striped : true, ?? ? ? ? ? ?// 显示斑马线效果
?表格布局
?需要引入共享架包页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- Base标签：当引入外部文件时，被Base标签标明的路径会自动引入到src中 -->
<base href = "${pageContext.request.servletContext.contextPath }/static/">
<!-- easyui css -->
<link rel = "stylesheet" type = "text/css" href = "js/jquery-easyui-1.5.5.2/themes/default/easyui.css">
<!-- icon css -->
<link rel = "stylesheet" type = "text/css" href = "js/jquery-easyui-1.5.5.2/themes/icon.css">
<!-- jQuery -->
<script type = "text/javascript" src = "js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<!-- easyui.js -->
<script type = "text/javascript" src = "js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<!-- 汉化 -->
<script type = "text/javascript" src = "js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
<!-- 通过js标签保存了一个绝对路径 -->
<script type = "text/javascript">
let xPath = "${pageContext.request.servletContext.contextPath }";
</script>
<!-- 脚本的方式借助域对象保存一个 -->
<%
String xPath = request.getServletContext().getContextPath();
session.setAttribute("xPath", xPath);
%>
对话窗口 引入添加修改界面?
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <div> <form id="bookForm"> <input type="hidden" name="bid" id="bid" /> <div style="margin: 15px;"> <label for="name">书名:</label> <input id="bookname" class="easyui-textbox" name="bname" style="width: 300px" data-options="required:true"> </div> <div style="margin: 15px;"> <label for="price">价格:</label> <input class="easyui-textbox" name="bprice" style="width: 300px" data-options="required:true"> </div> <div style="margin: 15px;"> <label for="booktype">类型:</label> <input class="easyui-textbox" name="btype" style="width: 300px" data-options="required:true"> </div> </form> </div>
主界面数据表格?
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <%@include file="static/common/eayUI_llink.jsp" %> </head> <body> <div id="p" class="easyui-panel" data-options="fit:true"> <div style="margin: 10px auto; text-align:center;" > <input id="strName" class="easyui-textbox" style="width:300px"> <a id="btn" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a> </div> <div id="tb" style = "text-align: right"> <a id = "addBookId" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"></a> <a id = "editBookId" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a> <a id = "delBookId" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"></a> </div> <table id="dg"></table> <div id="dd" style="display: display;" ></div> </div> <script type="text/javascript"> $("#delBookId").click(function () { let row = $("#dg").datagrid('getSelected');//获取选中行 if(row==null){ $.messager.alert('我的消息','请你选中后在进行操作！'); return; } $.messager.confirm('确认','您确认想要删除记录吗？',function(r){ if (r){ $.post(path+"/DelBooksevrlet.do",{"bid":row.bid},function(data){ if(data){ $.messager.alert('我的消息','删除成功'); getDate(); }else{ $.messager.alert('我的消息','删除失败'); } }); } }); }) $('#dg').datagrid({ url:path+'/BookListServlet.do', //分页下拉框 pageList:[5,10,20,30,50,90], columns:[[ {field:'bid',title:'编号',width:'25%'}, {field:'bname',title:'名称',width:'25%'}, {field:'bprice',title:'价格',width:'25%'}, {field:'btype',title:'类型',width:'25%'}, ]], pagination:true, //携带参数 queryParams: { searchName: $("#strName").val() }, toolbar:$("#tb"), singleSelect:true//设置只能选一行 }); getDate(); $("#btn").click(function () { getDate(); }) function getDate() { $('#dg').datagrid('load', { strName:$("#strName").val() }); } $("#editBookId").click(function (){ let row = $("#dg").datagrid('getSelected');//获取选中行 if(row==null){ $.messager.alert('我的消息','请你选中后在进行操作！'); return; } edetBook("修改图书",row); }); $("#addBookId").click(function () { edetBook("新增图书"); }) function edetBook(title,row) { let str="新增"; if(title.includes('修改')){ str="修改" } $('#dd').dialog({ title:title, width: 400, height: 300, closed: false, cache: false, href: 'addBook.jsp',//引入窗口类容 modal: true, buttons:[{ text:'保存', handler:function(){//$("#bookForm").serialize()jQuery总序列化 直接获取form中所有值 $.post(path+"/EdetBookServlet.do", $("#bookForm").serialize(), function (data) { if(data.Zt){ $.messager.alert('我的消息',""+str+"成功！",'info'); getDate(); $('#dd').dialog("close")//关闭窗口 }else{ $.messager.alert('我的消息',""+str+"失败！",'info'); } },"json") } },{ text:'关闭', handler:function(){ $('#dd').dialog("close") } }], //在加载远程数据时触发。 onLoad onLoad:function(){ if(row){ $("#bookForm").form("reset"); //重置表单 $("#bookForm").form('load',row);//加载远程数据 } } }); } </script> </body> </html>加载数据servlet界面
package com.zking.easyui.book.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.fasterxml.jackson.databind.ObjectMapper; import com.zking.easyui.book.biz.IBookBiz; import com.zking.easyui.book.biz.impl.BookBizImpl; import com.zking.easyui.book.entity.Book; /** * 显示所有图书的控制器servlet */ @WebServlet("/BookListServlet") public class BookListServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //编码 request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); response.setContentType("application/json;charset=utf-8"); //获取请求参数（pageIndex,searchName） int pageIndex = 1; String pIndex = request.getParameter("page");//page值是已经固定好 if(pIndex!=null) { pageIndex = Integer.valueOf(pIndex); } int pageSize = 10; String pSize = request.getParameter("rows"); if(pSize!=null) { pageSize = Integer.valueOf(pSize); } //获取searchName String searchName = request.getParameter("searchName"); if(searchName == null) { searchName = ""; } System.out.println("searchName = "+searchName); //调用biz IBookBiz ibb = new BookBizImpl(); //获取总记录数 Integer tableCount = ibb.getTableCount(searchName); // 总数据 List<Book> booksAll = ibb.getBooksAll(pageIndex, pageSize, searchName); //实例化Map集合 Map<String,Object> maps = new HashMap<String,Object>(); maps.put("total", tableCount); maps.put("rows", booksAll); //创建JSON工具 ObjectMapper mapper = new ObjectMapper(); String writeValueAsString = mapper.writeValueAsString(maps); // 获取out PrintWriter out = response.getWriter(); out.write(writeValueAsString); out.flush(); out.close(); } }删除servlet界面
package com.zking.easyui.book.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.fasterxml.jackson.databind.ObjectMapper; import com.zking.easyui.book.biz.IBookBiz; import com.zking.easyui.book.biz.impl.BookBizImpl; import com.zking.easyui.book.entity.Book; /** * 删除图书的servlet控制器 */ @WebServlet("/DelBookServlet") public class DelBookServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //编码 request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); response.setContentType("application/json;charset=utf-8"); //获取请求参数（pageIndex,searchName） Integer bid = request.getParameter("bid")!=null?Integer.valueOf(request.getParameter("bid")):0; //封装 IBookBiz ibb = new BookBizImpl(); Map<String,Object> maps = new HashMap<>(); try { ibb.delBook(bid); maps.put("message", true); } catch (Exception e) { maps.put("message", false); } //获取out PrintWriter out = response.getWriter(); ObjectMapper mapper = new ObjectMapper(); String writeValueAsString = mapper.writeValueAsString(maps); out.write(writeValueAsString); out.flush(); out.close(); } }修改新增和界面
package com.zking.book.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.fasterxml.jackson.databind.ObjectMapper; import com.zking.book.biz.BookBiz; import com.zking.book.biz.impl.BookBizImpl; import com.zking.book.entity.Book; /** * Servlet implementation class BookListServlet */ @WebServlet("/EdetBookServlet.do") public class EdetBookServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); response.setContentType("application/json;charset=utf-8"); Map<String, Object> map=new HashMap<>(); Integer bid=0; String parameter = request.getParameter("bid"); if(parameter!=null&¶meter!="") { bid=Integer.valueOf(parameter); } //request.getParameter("bid")==null?0:Integer.valueOf(request.getParameter("bid")); String bname = request.getParameter("bname"); Float bprice = request.getParameter("bprice")!=null?Float.valueOf(request.getParameter("bprice")):0; String btype = request.getParameter("btype"); try { if(bid==0) { new BookBizImpl().addBook(new Book(bname, bprice, btype)); }else { new BookBizImpl().updBook(new Book(bid, bname, bprice, btype)); } map.put("Zt", true); } catch (Exception e) { map.put("Zt", false); } ObjectMapper mapper = new ObjectMapper(); String writeValueAsString = mapper.writeValueAsString(map); //获取out 输出对象 PrintWriter out = response.getWriter(); out.write(writeValueAsString); out.flush(); out.close(); } }演示效果
?
