easyui05

目录

项目功能完善

        一、实现删除功能

        二、实现修改功能

---

项目功能完善

        主要实现的功能：书本展示 页面的 删除书本、修改书本 功能。

 首先，给工具条增加删除书本和修改书本功能。

<!-- 工具条 -->
      <div id="tableToolbar" style="text-align: right;">
          <!-- 增加 -->
          <a id="addBook" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" /a>
          <!-- 删除 -->
        <a id="removeBook" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" /a>
        <!-- 修改 -->
        <a id="editBook" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" /a>
    </div>

工具栏效果：

一、实现删除功能

 1.编写一个删除书本的方法（写在 BookDao类 里面，同样使用三层架构的原理）；

/**
	 * 删除书本的方法
	 * @param bookId
	 * @throws SQLException
	 */
	public void delete(String bookId) throws SQLException{
		con = DBAccess.getConnection();
		sql = "delete from t_book where bookId = ?";
		ps = con.prepareStatement(sql);
		ps.setString(1, bookId);
		n = ps.executeUpdate();
		DBAccess.close(con, ps, rs);
	}

 2.给id为 removeBook 的删除按钮添加点击事件；

  写在 $(function(){} 里面

$("#removeBook").click(function(){
		// 获取用户所选择的行
		let row = $("#myTable").datagrid("getSelected");
		if(row == null){
			$.messager.alert("警告！","请选择你要删除的行！");
			return;
		}
		
		$.messager.confirm("消息！","你确定要删除吗？",function(f){// f是询问框返回的值
			if(f){
				// 向后台发送ajax请求
				$.ajax({
					url:ctx + "/deleteBookServlet.do",// 请求地址
					data:{
						"bookId":row.bookId
					},// 向后台提交的参数
					dataType:'JSON',// 后台返回的数据类型
					type:'post',// 发送的ajax请求方式
					success:function(data){
						if(data.success == true){
							$.messager.alert('消息',data.msg);
							// 删除成功之后调用绑定数据的方法进行刷新
							query();
						}else{
							$.messager.alert('警告',data.msg);
						}
					}
				})
				
			}
		});
	})

 删除功能的 servlet（DeleteBookServlet）

@SuppressWarnings("all")
@WebServlet("/deleteBookServlet.do")
public class DeleteBookServlet extends HttpServlet{
	@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("text/html;charset=utf-8");
			
			PrintWriter out = resp.getWriter();
			
			IBookBiz ibb = new BookBiz();
			
			// 定义Map集合
			Map<String, Object> data = new HashMap<String, Object>();
			
			try {
				 String bookId = req.getParameter("bookId");
				 
				 // 调用删除书本的方法
				 ibb.delete(bookId);
				 
				 // 往Map集合里面赋值
				 data.put("success", true);
				 data.put("msg", "书本删除成功！");
			} catch (Exception e) {
				 data.put("success", false);
				 data.put("msg", "书本删除失败！");
				 e.printStackTrace();
			}
			
			// 将Map集合转换为json字符串
			String jsonString = JSON.toJSONString(data);
			
			out.write(jsonString);
			out.flush();
			out.close();	
			
	}
}

最终效果演示：

主界面 - 删除书本

二、实现修改功能

 1.修改书本的方法（ BookDao类 ）

/**
	 * 修改书本的方法
	 * @param book
	 * @throws SQLException
	 */
	public void update(Book book) throws SQLException{
		con = DBAccess.getConnection();
		sql = "update t_book set bookName = ?,bookPrice = ?,bookType = ? where bookId = ?";
		ps = con.prepareStatement(sql);
		ps.setString(1, book.getBookName());
		ps.setDouble(2, book.getBookPrice());
		ps.setString(3, book.getBookType());
		ps.setInt(4, book.getBookId());
		ps.executeUpdate();
		DBAccess.close(con, ps, rs);
	}

  2.给 id 为 editBook 的修改按钮添加点击事件

  增加和修改共用同一个弹出框；

// 打开弹出框（增加和修改）
function openDialog(row){// 参数：所选中的数据行
	let title = "书本新增";
	let servlet = "/addBookServlet.do";// 默认增加请求
	if(row != null){
		title = "书本编辑";
		servlet = "/updateBookServlet.do";
	}
	// 给div添加对话框
	$('#bookDialog').dialog({    
	    title: title,  
	    width: 400,    
	    height: 233,    
	    closed: false,    
	    cache: false,    
	    href: ctx + '/static/jsp/book/editBook.jsp',    
	    modal: true,
	    // 给对话框添加按钮组
	    buttons:[{
	    	// 实现保存功能
			text:'保存',
			handler:function(){
				// 向后台发送ajax请求
				$.ajax({
					url:ctx + servlet,// 请求地址
					data:$("#bookForm").serialize(),// 表单数据
					dataType:'JSON',// 后台返回的数据类型
					type:'post',// 发送的ajax请求方式
					success:function(data){
						if(data.success == true){
							$.messager.alert('消息',data.msg);
							// 增加成功之后调用绑定数据的方法进行刷新
							query();
							// 增加成功之后关闭对话框
							$("#bookDialog").dialog('close');
						}else{
							$.messager.alert('警告',data.msg);
						}
					}
				})
			}
		},{
			// 实现关闭功能
			text:'关闭',
			handler:function(){
				$("#bookDialog").dialog('close');
			}
		}],
		// 绑定要修改的书本数据
		onLoad:function(){
			if(row != null){// 如果row里面有数据
				$("#bookForm").form("load",row);
			}
		}
		
	});
}

在给增加按钮和修改按钮添加点击事件那里去调用这个方法；

// 给增加按钮添加点击事件
    $("#addBook").click(function(){
        openDialog();
    })

// 给修改按钮添加点击事件
    $("#editBook").click(function(){
        // 获取用户所选择的行
        let row = $("#myTable").datagrid("getSelected");
        if(row == null){
            $.messager.alert("警告！","请选择你要修改的行！");
            return;
        }
        openDialog(row);
    })

  修改功能的 servlet（ UpdateBookServlet ）

@SuppressWarnings("all")
@WebServlet("/updateBookServlet.do")
public class UpdateBookServlet extends HttpServlet{
	@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("text/html;charset=utf-8");
			
			PrintWriter out = resp.getWriter();
			
			IBookBiz ibb = new BookBiz();
			
			// 定义Map集合
			Map<String, Object> data = new HashMap<String, Object>();
			
			try {
				 String bookName = req.getParameter("bookName");
				 Double bookPrice = Double.parseDouble(req.getParameter("bookPrice"));
				 String bookType = req.getParameter("bookType");
				 Integer bookId = Integer.parseInt(req.getParameter("bookId"));
				
				 Book book = new Book(bookId, bookName, bookPrice, bookType);
				 
				 // 调用修改书本的方法
				 ibb.update(book);
				 
				 // 往Map集合里面赋值
				 data.put("success", true);
				 data.put("msg", "书本修改成功！");
			} catch (Exception e) {
				 data.put("success", false);
				 data.put("msg", "书本修改失败！");
				 e.printStackTrace();
			}
			
			// 将Map集合转换为json字符串
			String jsonString = JSON.toJSONString(data);
			
			out.write(jsonString);
			out.flush();
			out.close();	
			
	}
}

最终效果演示：

主界面 - 修改书本

完。