easyui05

Catalog

The function of the project is perfect

         One 、 Realize the deletion function

         Two 、 Implement the modification function

---

The function of the project is perfect

         Main functions ： Book display   Page Delete book 、 Modify books   function .

  First , Add the functions of deleting books and modifying books to the toolbar .

<!--  Toolbars  -->
      <div id="tableToolbar" style="text-align: right;">
          <!--  increase  -->
          <a id="addBook" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" /a>
          <!--  Delete  -->
        <a id="removeBook" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" /a>
        <!--  modify  -->
        <a id="editBook" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" /a>
    </div>

Toolbar effect ：

One 、 Realize the deletion function

 1. Write a method to delete books （ Written in BookDao class Inside , The principle of three-tier architecture is also used ）;

/**
	 *  How to delete books 
	 * @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. to id by removeBook Click the delete button to add a click event ;

  Written in $(function(){} Inside

$("#removeBook").click(function(){
		//  Get the row selected by the user 
		let row = $("#myTable").datagrid("getSelected");
		if(row == null){
			$.messager.alert(" Warning ！"," Please select the row you want to delete ！");
			return;
		}
		
		$.messager.confirm(" news ！"," Are you sure you want to delete ？",function(f){// f Is the value returned by the query box 
			if(f){
				//  Send to background ajax request 
				$.ajax({
					url:ctx + "/deleteBookServlet.do",//  Request address 
					data:{
						"bookId":row.bookId
					},//  Parameters submitted to the background 
					dataType:'JSON',//  The data type returned in the background 
					type:'post',//  Sent ajax Request mode 
					success:function(data){
						if(data.success == true){
							$.messager.alert(' news ',data.msg);
							//  After the deletion is successful, call the method of binding data to refresh 
							query();
						}else{
							$.messager.alert(' Warning ',data.msg);
						}
					}
				})
				
			}
		});
	})

  Delete function 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();
			
			//  Definition Map aggregate 
			Map<String, Object> data = new HashMap<String, Object>();
			
			try {
				 String bookId = req.getParameter("bookId");
				 
				 //  Call the method of deleting books 
				 ibb.delete(bookId);
				 
				 //  Go to Map Assignment in the set 
				 data.put("success", true);
				 data.put("msg", " The book was deleted successfully ！");
			} catch (Exception e) {
				 data.put("success", false);
				 data.put("msg", " Book deletion failed ！");
				 e.printStackTrace();
			}
			
			//  take Map Set to json character string 
			String jsonString = JSON.toJSONString(data);
			
			out.write(jsonString);
			out.flush();
			out.close();	
			
	}
}

Final effect demonstration ：

main interface - Delete book

Two 、 Implement the modification function

 1. How to modify books （ BookDao class ）

/**
	 *  How to modify books 
	 * @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. to id by editBook Click the Modify button to add a click event

  Add and modify share the same pop-up box ;

//  Open the pop-up box （ Add and modify ）
function openDialog(row){//  Parameters ： Selected data row 
	let title = " Book addition ";
	let servlet = "/addBookServlet.do";//  Default add request 
	if(row != null){
		title = " Book editor ";
		servlet = "/updateBookServlet.do";
	}
	//  to div Add dialog 
	$('#bookDialog').dialog({    
	    title: title,  
	    width: 400,    
	    height: 233,    
	    closed: false,    
	    cache: false,    
	    href: ctx + '/static/jsp/book/editBook.jsp',    
	    modal: true,
	    //  Add button groups to the dialog 
	    buttons:[{
	    	//  Realize the saving function 
			text:' preservation ',
			handler:function(){
				//  Send to background ajax request 
				$.ajax({
					url:ctx + servlet,//  Request address 
					data:$("#bookForm").serialize(),//  The form data 
					dataType:'JSON',//  The data type returned in the background 
					type:'post',//  Sent ajax Request mode 
					success:function(data){
						if(data.success == true){
							$.messager.alert(' news ',data.msg);
							//  After the addition is successful, call the method of binding data to refresh 
							query();
							//  Close the dialog box after adding successfully 
							$("#bookDialog").dialog('close');
						}else{
							$.messager.alert(' Warning ',data.msg);
						}
					}
				})
			}
		},{
			//  Realize the closing function 
			text:' close ',
			handler:function(){
				$("#bookDialog").dialog('close');
			}
		}],
		//  Bind the book data to be modified 
		onLoad:function(){
			if(row != null){//  If row There's data 
				$("#bookForm").form("load",row);
			}
		}
		
	});
}

Call this method when adding click events to the Add button and Modify button ;

// Add a click event to the Add button
    $("#addBook").click(function(){
        openDialog();
    })

// Add a click event to the Modify button
    $("#editBook").click(function(){
        // Get the row selected by the user
        let row = $("#myTable").datagrid("getSelected");
        if(row == null){
            $.messager.alert(" Warning ！"," Please select the row you want to modify ！");
            return;
        }
        openDialog(row);
    })

  Modify the function of 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();
			
			//  Definition Map aggregate 
			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);
				 
				 //  Call the method of modifying the book 
				 ibb.update(book);
				 
				 //  Go to Map Assignment in the set 
				 data.put("success", true);
				 data.put("msg", " The book was modified successfully ！");
			} catch (Exception e) {
				 data.put("success", false);
				 data.put("msg", " Book modification failed ！");
				 e.printStackTrace();
			}
			
			//  take Map Set to json character string 
			String jsonString = JSON.toJSONString(data);
			
			out.write(jsonString);
			out.flush();
			out.close();	
			
	}
}

Final effect demonstration ：

main interface - Modify books

End .