easyui06 DataGrid数据删改

奶油蛋糕赛高!

已于 2022-04-17 12:22:07 修改

阅读量551

点赞数

分类专栏： easyui笔记文章标签： easyui

于 2022-04-16 20:05:04 首次发布

本文链接：https://blog.csdn.net/emmhao/article/details/124219110

版权

easyui笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一.前台开发

同样,修改和删除在原来的基础上有所延伸，找到原来的页面继续写就行了

bookList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@include file="../../common/head.jsp" %>
<script>
	$(function(){
		$('#dg').datagrid({    
		    url:ctx+'/BookServlet',    
		    toolbar: '#tb',
		    pagination:true, //显示底部分页工具栏
		    singleSelect:true,//只能选择一行
		    columns:[[    
		    	//表格的结构，需要与实体类保持一致
		        {field:'id',title:'ID',width:100,align:'center'},    
		        {field:'bookname',title:'书本名称',width:100,align:'center'},    
		        {field:'price',title:'价格',width:100,align:'center'},
		        {field:'booktype',title:'类型',width:100,align:'center'} 
		    ]]    
		});  
		
		//给查询添加点击事件
		$("#qrybtn").click(function(){
			qry();
		});
		
		function qry(){
			//重载行
			$('#dg').datagrid("reload",{
				//拿到以前的值给文本框赋值
				bookName:$("#bookName").val()
			});
		};
		
		//增加书本
		$("#addBook").click(function() {
			openDialog();
		});
	 	
		//修改书本
		$("#updateBook").click(function(){
			let row = $('#dg').datagrid("getSelected");
			openDialog(row);
		});
		
		//删除书本
		$("#deleteBook").click(function(){
			let row = $('#dg').datagrid("getSelected");
			if(!row){
				$.messager.alert('提示', '请先选择你要删除的书籍');
				return;
			}
			let id=row.id;
			$.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
			    if (r){   
			    	$.ajax({
						url:ctx + "/bookDeleteServlet",
						type:'post',
						data: {
							id:id
						},
						dataType:'json',
						success:function(resp){
							if(resp.success){
								$.messager.alert('提示', '操作成功');
								qry();
							}else{
								$.messager.alert('警告', '操作失败');
							}
						}
					});
			    }    
			});  
		})
		
		function openDialog(row){
			let title="增加书本信息";
			let action = "/bookAddServlet";
			if(row){
				title = "修改书本信息";
				action = "/bookUpdateServlet";
			}
			
			$("#editDlalog").dialog({    
			    title:title,    
			    width: 300,    
			    height: 250,    
			    closed: false,    
			    cache: false,    
			    href: 'editBook.jsp',    
			    modal: true,
			    buttons:[{
					text:'保存',
					iconCls:'icon-save',
					handler:function(){
						$.ajax({
							url:ctx + action,
							type:'post',
							data: $("#bookForm").serialize(),
							dataType:'json',
							success:function(resp){
								if(resp.success){
									$.messager.alert('提示', '操作成功');
									$("#editDlalog").dialog("close");
									qry();
								}else{
									$.messager.alert('警告', '操作失败');
								}
							}
						});
					}
				},{
					text:'关闭',
					iconCls:'icon-cancel',
					handler:function(){
						$("#editDlalog").dialog("close");
					}
				}],
				onLoad: function() {
					if(row) {
						$("#bookForm").form("reset");//重置
				    	$("#bookForm").form("load", row);//加载数据
					}
				}
			});   
		}
		
		
	});
</script>
</head>
<body>
<form style="margin-top:20px;">
	<label for="name">书籍名称:</label>  
	<input id="bookName" class="easyui-textbox" data-options="" style="width:300px;">
	<a id="qrybtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>  
</form>

<div style="margin-top:10px;">
	<table id="dg"></table>  
</div>

<!-- 列表上方的工具条 -->
<div id="tb" style="text-align:right;">
	<a href="#" id="addBook"    class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"></a>
	<a href="#" id="updateBook" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a>
	<a href="#" id="deleteBook" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"></a>
</div>

<!-- 给弹出窗口定义一个容器，并默认为隐藏，在点击后再显示 -->
<div id="editDlalog" style="display:none;"></div>  
</body>
</html>

editBook.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<form id="bookForm">
		<input type="hidden" name="id" id="id"/>
		<div style="margin-top: 10px;margin-left:10px;">   
	        <label for="name">书本名称:</label>   
	        <input class="easyui-textbox" type="text" name="bookname" id="bookname" data-options="required:true" />   
	    </div>   
	    <div style="margin-top: 10px;margin-left:10px;">   
	        <label for="price">书本价格:</label>   
	       <input class="easyui-textbox" type="text" name="price" id="price" data-options="required:true" /> 
	    </div>
	  <div style="margin-top: 10px;margin-left:10px;">    
	        <label for="booktype">书本类型:</label>   
	        <input class="easyui-textbox" type="text" name="booktype" id="booktype" data-options="required:true" /> 
	    </div>  
</form>

二:后台开发

IBookDao 实现一个接口

    /**
	 * 修改书本
	 * @param book 书本对象
	 */
	void updateBook(Book book);
	
	/**
	 * 删除书本
	 * @param id 书本id
	 */
	void delBook(Integer id);

BookDao

    @Override
	public void updateBook(Book book) {
		Connection con = null;
		PreparedStatement ps = null;
		String sql = "update t_book set bookname=?,price=?, booktype=?  where id=?";
		try {
			con = DBHelper.getCon();
			ps = con.prepareStatement(sql);
			ps.setString(1, book.getBookname());
			ps.setBigDecimal(2, book.getPrice());
			ps.setString(3, book.getBooktype());
			ps.setInt(4, book.getId());
			ps.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.myClose(con, ps, null);
		}
	}
	
	@Override
	public void delBook(Integer id) {
		Connection con = null;
		PreparedStatement ps = null;
		String sql = "delete from t_book where id=?";
		try {
			con = DBHelper.getCon();
			ps = con.prepareStatement(sql);
			ps.setInt(1, id);
			ps.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.myClose(con, ps, null);
		}
	}

IBookService

    /**
	 * 修改书本
	 * @param book 书本对象
	 */
	void updateBook(Book book);
	
	/**
	 * 删除书本
	 * @param id 书本id
	 */
	void delBook(Integer id);

BookService

    @Override
	public void updateBook(Book book) {
		// TODO Auto-generated method stub
		bd.updateBook(book);
	}

	@Override
	public void delBook(Integer id) {
		// TODO Auto-generated method stub
		bd.delBook(id);
	}

BookUpdateServlet (修改)

package com.zking.euidemo.servlet;

import java.io.IOException;

import java.io.PrintWriter;
import java.math.BigDecimal;
import java.util.HashMap;
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.alibaba.fastjson.JSON;
import com.zking.euidemo.entity.Book;
import com.zking.euidemo.service.BookService;
import com.zking.euidemo.service.IBookService;
@WebServlet("/bookUpdateServlet")
public class BookUpdateServlet extends HttpServlet{
	
	private IBookService service= new BookService();
	
	@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("application/json; charset=utf-8");
		Map<String, Object> rv = new HashMap<>();
		try {
			String id =req.getParameter("id");
			String bookname = req.getParameter("bookname");
			String price = req.getParameter("price");
			String booktype = req.getParameter("booktype");
			Book book = new Book();
			book.setId(Integer.parseInt(id));
			book.setBookname(bookname);
			book.setPrice(new BigDecimal(price));
			book.setBooktype(booktype);
			
			service.updateBook(book);
			rv.put("success", true);
		} catch (Exception e) {
			e.printStackTrace();
			rv.put("success", false);
		}
		
		PrintWriter out = resp.getWriter();
		String json=JSON.toJSONString(rv);
		out.write(json);
		out.flush();
		out.close();
	}
}

BookDeleteServlet(删除)

package com.zking.euidemo.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
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.alibaba.fastjson.JSON;
import com.zking.euidemo.service.BookService;
import com.zking.euidemo.service.IBookService;
@WebServlet("/bookDeleteServlet")
public class BookDeleteServlet extends HttpServlet{
	
	private IBookService service = new BookService();
	
	@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("application/json; charset=utf-8");
		Map<String, Object> rv = new HashMap<>();
		try {
			String id = req.getParameter("id");
			
			service.delBook(Integer.parseInt(id));
			rv.put("success", true);
		} catch (Exception e) {
			e.printStackTrace();
			rv.put("success", false);
		}
		
		PrintWriter out = resp.getWriter();
		String json = JSON.toJSONString(rv);
		out.write(json);
		out.flush();
		out.close();
	}
}

三:效果图

奶油蛋糕赛高!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui06 DataGrid数据删改

一.前台开发同样,修改和删除在原来的基础上有所延伸，找到原来的页面继续写就行了bookList.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.
复制链接

扫一扫