Easyui数据表实现增删改

最新推荐文章于 2022-11-29 20:37:40 发布

Bugxiu_fu

最新推荐文章于 2022-11-29 20:37:40 发布

阅读量371

点赞数

文章标签： easyui 前端 javascript jquery

本文链接：https://blog.csdn.net/Bugxiu_fu/article/details/125393943

版权

这篇博客介绍了如何在Java环境中使用jQuery的serialize()方法轻松获取表单数据，并结合EasyUI展示消息提示框。文章还展示了如何设置页面基础路径，引用EasyUI库以及使用EasyUI的dialog和form组件进行表单操作，包括新增和编辑功能。在删除操作中，利用AJAX实现了数据的删除和反馈。

摘要由CSDN通过智能技术生成

摘要：

1、$("表单id").serialize()
jQuery中提供的一个方法，可以直接不需要手动获取输入框值，直接打包形成一个url参数拼接。

2、消息框的使用
$.message.alert();

需要引入共享架包页面

<%@ 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);
%>

修改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">书名:</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>

效果展示

修改的jsp

//修改的点击事件
	$('#editBookId').click(function(){
		let row=$('#dg').datagrid('getSelected');//判断是否选中
		if(row==null){
			$.messager.alert('提示','请选中行在进行修改！');
			return;
		}
		
		editBookUI('edit',row);
		
	});
	
	//新增的点击事件
	$('#addBookId').click(function(){
		  
		editBookUI('add');
		
	});
	
	//新增修改共用容器
	function editBookUI(type,row){
		let ae="";
		let action='/addBook';
		if(type=='add'){
			ae="新增图书";
			action="/addBook";
		}else{
			ae="修改图书";
			action="/editBook";
		}
		$('#dd').dialog({    
		    title: ae,    
		    width: 400,    
		    height: 260,    
		    closed: false,    
		    cache: false,    
		    href: xPath+"/addBook.jsp",    
		    modal: true ,
		    buttons:[{
				text:'确认',
				handler:function(){
					$.ajax({
						url:xPath+action,
						type:"post",
						data:$('#bookForm').serialize(),//获取表单中的值
						datatype:"text",
						success:function(data){
							let flag=data.message;
							if(flag){
								$.messager.alert('我的消息','ok！');
								myload();//刷新界面，
								$('#dd').dialog('close');//关闭界面
							}
						}
					});
				}
			},{
				text:'关闭',
				handler:function(){
					$('#dd').dialog('close');
				}
			}],
			//远程加载时触发
			onLoad:function(){
				//console.log(row.bid);
				if(row){
				$('#bookForm').form('reset');//重置表单
				$('#bookForm').form('load',row);//数据赋值
				
				}
				
			}
		});  
	}

删除操作实现

//删除的点击事件
	$('#delBookId').click(function(){
		let row=$('#dg').datagrid('getSelected');//判断是否选中
		if(row==null){
			$.messager.alert('提示','请选中行在进行删除！');
			return;
		}
		$.messager.confirm('确认对话框', '您确认要进行删除吗？', function(r){
			if (r){//确认删除调用ajax
			  $.post(xPath+"/delBook",{"bid":row.bid},function(data){
				 if(data.message){
					 $.messager.alert('提示','删除成功！'); 
					 myload();//刷新界面
				 }else{
					 $.messager.alert('提示','删除失败！'); 
				 }
			  });
			}
			
		});
	});

删除的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();
 
	
	}
 
}