Add, delete and modify easyUI data table

Abstract ：

1、$(" Forms id").serialize()
    jQuery One of the methods provided in , You can directly get the input field value without manual operation , Directly package to form a url Parameter splicing .

2、 Use of message boxes
    $.message.alert();

  Need to introduce the shared shelf package page

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 
<!-- Base label ： When importing external files , By Base The path indicated by the label will be automatically introduced into src in  -->
<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>
 
<!--   Sinicization  -->
<script type = "text/javascript" src = "js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
 
<!--  adopt js The tag holds an absolute path  -->
<script type = "text/javascript">
	let xPath = "${pageContext.request.servletContext.contextPath }";
</script>
 
<!--  Save a file in the form of script with the help of domain object  -->
<%
	String xPath = request.getServletContext().getContextPath();
	session.setAttribute("xPath", xPath);
%>

modify HTML

<%@ 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"> Title :</label> <input id="bookname"
				class="easyui-textbox" name="bname" style="width: 300px"
				data-options="required:true">
		</div>
 
		<div style="margin: 15px;">
			<label for="price"> Price :</label> <input class="easyui-textbox"
				name="bprice" style="width: 300px" data-options="required:true">
		</div>
		<div style="margin: 15px;">
			<label for="booktype"> type :</label> <input class="easyui-textbox"
				name="btype" style="width: 300px" data-options="required:true">
		</div>
	</form>
</div>

Effect display

 

Modified jsp

// Modified click event 
	$('#editBookId').click(function(){
		let row=$('#dg').datagrid('getSelected');// Judge whether to select 
		if(row==null){
			$.messager.alert(' Tips ',' Please select a row to modify ！');
			return;
		}
		
		editBookUI('edit',row);
		
	});
	
	// New click event 
	$('#addBookId').click(function(){
		  
		editBookUI('add');
		
	});
	
	// Add / modify shared container 
	function editBookUI(type,row){
		let ae="";
		let action='/addBook';
		if(type=='add'){
			ae=" New books ";
			action="/addBook";
		}else{
			ae=" Revise the book ";
			action="/editBook";
		}
		$('#dd').dialog({    
		    title: ae,    
		    width: 400,    
		    height: 260,    
		    closed: false,    
		    cache: false,    
		    href: xPath+"/addBook.jsp",    
		    modal: true ,
		    buttons:[{
				text:' confirm ',
				handler:function(){
					$.ajax({
						url:xPath+action,
						type:"post",
						data:$('#bookForm').serialize(),// Get the values in the form 
						datatype:"text",
						success:function(data){
							let flag=data.message;
							if(flag){
								$.messager.alert(' My news ','ok！');
								myload();// Refresh the interface ,
								$('#dd').dialog('close');// Closing interface 
							}
						}
					});
				}
			},{
				text:' close ',
				handler:function(){
					$('#dd').dialog('close');
				}
			}],
			// Triggered when loading remotely 
			onLoad:function(){
				//console.log(row.bid);
				if(row){
				$('#bookForm').form('reset');// Reset form 
				$('#bookForm').form('load',row);// Data assignment 
				
				}
				
			}
		});  
	}

The deletion operation implements

// Deleted click event 
	$('#delBookId').click(function(){
		let row=$('#dg').datagrid('getSelected');// Judge whether to select 
		if(row==null){
			$.messager.alert(' Tips ',' Please select a row to delete ！');
			return;
		}
		$.messager.confirm(' Confirmation dialog ', ' Are you sure you want to delete ？', function(r){
			if (r){// Confirm delete call ajax
			  $.post(xPath+"/delBook",{"bid":row.bid},function(data){
				 if(data.message){
					 $.messager.alert(' Tips ',' Delete successful ！'); 
					 myload();// Refresh the interface 
				 }else{
					 $.messager.alert(' Tips ',' Delete failed ！'); 
				 }
			  });
			}
			
		});
	});

Delete the 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;
 
/**
 *  Delete book servlet controller 
 */
@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 {
		// code 
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("application/json;charset=utf-8");
		
		// Get request parameters （pageIndex,searchName）
		Integer bid = request.getParameter("bid")!=null?Integer.valueOf(request.getParameter("bid")):0;
		
		// encapsulation 
		
		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);
		}
		
		// obtain out
		PrintWriter out = response.getWriter();
		
		ObjectMapper mapper = new ObjectMapper();
		
		String writeValueAsString = mapper.writeValueAsString(maps);
		
		out.write(writeValueAsString);
		out.flush();
		out.close();
 
	
	}
 
}