EasyUI(DataGrid修改&删除)

于 2022-04-12 20:19:34 发布
阅读量705 收藏 3
点赞数
分类专栏： easyui 文章标签： easyui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56996467/article/details/124133000
版权

目录

一、项目结构

二、前台代码

三、后台代码

四、运行效果:

一、项目结构

二、前台代码

editBook.jsp：

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

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">
<%@ include file="../../common/head.jsp"%>
<title>Insert title here</title>
<script>
$(function(){
	
	$('#bookTable').datagrid({    
	    url: ctx+'/BookServlet', 
	    pagination:true,
	    singleSelect:true,
	    queryParams: {
	    	"bookName": $("#bookName").val()
	    },
	    columns:[[    
	        {field:'id',title:'书本ID',width:100},    
	        {field:'bookname',title:'名称',width:100},    
	        {field:'price',title:'价格',width:100,align:'right'},
	        {field:'booktype',title:'类型',width:100,align:'right'}
	    ]],
	    toolbar: '#bookTableToolbar'
	});
	
	$("#bookQry").click(function() {
		qryBook();
	});
	
	qryBook();

	function qryBook() {
		$('#bookTable').datagrid("load", {
			"bookName": $("#bookName").val()
		})
	};
	
	$("#addBookBtn").click(function() {
		openDialog();
	});
	
	$("#editBootBtn").click(function() {
		let row = $("#bookTable").datagrid("getSelected");
		openDialog(row);
	})
	
	$("#delBootBtn").click(function() {
		let row = $("#bookTable").datagrid("getSelected");
		if(!row) {
			$.messager.alert('消息','请选择要删除的记录');
			return;
		}
		$.ajax({
			url: ctx + '/bookDelServlet',
			type: 'post',
			data:{
				id: row.id
			},
			dataType: 'json',
			success: function(resp) {
				if(resp.success) {
					$.messager.alert('消息','操作成功');
					qryBook();
				}else{
					$.messager.alert('消息','操作不成功');
				}
			}
		})
	})
	
	function openDialog(row) {
		
		let title = "增加书本信息";
		let action = "/bookAddServlet"
		if(row) {
			title = "修改书本信息";
			action = "/bookUpdateServlet"
		}
		
		$('#bookDiglog').dialog({    
		    title: title,    
		    width: 400,    
		    height: 250,    
		    closed: false,    
		    cache: false,    
		    href: 'editBook.jsp',    
		    modal: true,
		    buttons:[{
				text:'保存',
				handler:function(){
					$.ajax({
						url:ctx + action,
						data: $("#bookForm").serialize(),
						type: 'post',
						dataType: 'JSON',
						success: function(resp) {
							
							if(resp.success) {
								$.messager.alert('消息','操作成功');
								$('#bookDiglog').dialog('close');
								qryBook();
							} else {
								$.messager.alert('警告','操作失败');    
							}
						}
					});
				}
			},{
				text:'关闭',
				handler:function(){
					$('#bookDiglog').dialog('close');
				}
			}],
			
			onLoad: function() {
				if(row) {
					$("#bookForm").form("reset");
			    	$("#bookForm").form("load", row);
				}
			}
		});
	}
});
</script>
</head>
<body>
	<!-- 查询条件 -->
	<div style="margin-top: 15px; margin-left:10px;">
		<input class="easyui-textbox" id="bookName" style="width:300px">
		<a id="bookQry" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>  
	</div> 
	
	<div id="p" class="easyui-panel" style="padding:10px" data-options="fit:true, border:false">
		<table id="bookTable" class="easyui-datagrid" style="width:100%;height:90%;"> 
		</table>
	</div>
	
	<!-- 列表上方的工具条 -->
	<div id="bookTableToolbar" style="text-align: right;">
		<a href="#" id="addBookBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"/a>
		<a href="#" id="editBootBtn" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
		<a href="#" id="delBootBtn" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"/a>
	</div>
	
	<!-- 给弹出窗口定义一个容器，并默认为隐藏，在点击后再显示 -->
	<div id="bookDiglog" style="display:none;"></div>
	
</body>
</html>

 

三、后台代码

BookDao:

package com.zking.demo.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.zking.demo.model.Book;
import com.zking.demo.util.DBHelper;

public class BookDao implements IBookDao {

	@Override
	public List<Book> getBooks(String name, int pageIndex, int pageSize) {
		Connection con = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		
		List<Book> list = new ArrayList<>();
		
		try {
			String sql = "select id,bookname,price,booktype,rownum as rid from t_book";
			if(name != null && !"".equals(name)) {
				sql += " where bookname like ?";
			}
			
			sql = "select * from (" + sql + ")b where b.rid between ? and ?";
			
			con = DBHelper.getsCon();
			ps = con.prepareStatement(sql);
			
			int start =(pageIndex-1)*pageSize+1;
			int end = pageIndex*pageSize;
			
			if(name != null && !"".equals(name)) {
				ps.setString(1, "%"+name+"%");
				ps.setInt(2, start);
				ps.setInt(3, end);
			} else {
				ps.setInt(1, start);
				ps.setInt(2, end);
			}
			
			rs = ps.executeQuery();
			
			while(rs.next()) {
				Book m = new Book();
				m.setId(rs.getInt("id"));
				m.setBookname(rs.getString("bookname"));
				m.setPrice(rs.getBigDecimal("price"));
				m.setBooktype(rs.getString("booktype"));
				list.add(m);
			}
			
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.Close(con, ps, rs);
		}
		
		return list;
	}
	
	
	@Override
	public int getTotalPage() {
		Connection con = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		
		int n  = 0;
		try {
			con= DBHelper.getsCon();
			String sql = "select count(*) from  t_book";
			ps = con.prepareStatement(sql);
			rs= ps.executeQuery();
			if(rs.next()) {
				n = rs.getInt(1);
			}
			
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			DBHelper.Close(con, ps, rs);
		}
		return n;
	}
	
	@Override
	public void addBook(Book book) {
		
		Connection con = null;
		PreparedStatement ps = null;
		
		String sql = "insert into t_book value (id,bookname,price, booktype) "
				+ "select max(id)+1,'"
				+ book.getBookname()+"','" 
				+ book.getPrice()+"','" 
				+ book.getBooktype()+"' from t_book";
		
		try {
			con = DBHelper.getsCon();
			ps = con.prepareStatement(sql);
			ps.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.Close(con, ps, null);
		}
	}
	
	@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.getsCon();
			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.Close(con, ps,null);
		}
	}
	
	@Override
	public int delBook(int id) {
		Connection con = null;
		PreparedStatement ps = null;
		int n = 0;
		
		String sql = "delete t_book where id=?" ;
		
		
		try {
			con = DBHelper.getsCon();
			ps = con.prepareStatement(sql);
			
			ps.setInt(1, id);
			
			n = ps.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.Close(con, ps,null);
		}
		return n;
	}
	
	public static void main(String[] args) {
		BookDao dao = new BookDao();
		List<Book> books = dao.getBooks("货", 1, 5);
		
		books.forEach(t -> System.out.println(t));
	}

}

BookService:

package com.zking.demo.service;

import java.util.List;

import com.zking.demo.dao.BookDao;
import com.zking.demo.dao.IBookDao;
import com.zking.demo.model.Book;

public class BookService implements IBookService {
	
	private IBookDao dao = new BookDao();

	@Override
	public List<Book> getBooks(String name, int pageIndex, int pageSize) {
		
		return dao.getBooks(name, pageIndex, pageSize);
	}
	
	@Override
	public int getTotalPage() {
		return dao.getTotalPage();
	}
	
	@Override
	public void addBook(Book book) {
		dao.addBook(book);
	}
	
	@Override
	public void updateBook(Book book) {
		dao.updateBook(book);
	}
	
	@Override
	public int delBook(int id) {
		// TODO Auto-generated method stub
		return dao.delBook(id);
	}

}

 

BookUpdateServlet:

package com.zking.demo.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.math.BigDecimal;
import java.util.HashMap;
import java.util.Map;

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.demo.model.Book;
import com.zking.demo.service.BookService;
import com.zking.demo.service.IBookService;

@WebServlet("/bookUpdateServlet")
public class BookUpdateServlet extends HttpServlet {
	
	private IBookService service = new BookService();
	
	public void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		doPost(req, resp);
	}
	
	public void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		
		req.setCharacterEncoding("utf-8");
		resp.setContentType("application/json; charset=utf-8"); 
		
		Map<String,Object> map = new HashMap<>();
		try {
			Book book = new Book();
			book.setId(Integer.parseInt(req.getParameter("id")));
			book.setBookname(req.getParameter("bookname"));
			book.setPrice(BigDecimal.valueOf(Double.parseDouble(req.getParameter("price"))));
			book.setBooktype(req.getParameter("booktype"));
			service.updateBook(book);
			map.put("success", true);
			
		} catch (Exception e) {
			e.printStackTrace();
			map.put("success", false);
		}
		
		PrintWriter out = resp.getWriter();
		out.write(JSON.toJSONString(map));
		out.flush();
		out.close();
	}

}

 

BookDelServlet:

package com.zking.demo.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

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.demo.service.BookService;
import com.zking.demo.service.IBookService;

@WebServlet("/bookDelServlet")
public class BookDelServlet extends HttpServlet {
	
private IBookService service = new BookService();
	
	public void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		doPost(req, resp);
	}
	
	public void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		
		req.setCharacterEncoding("utf-8");
		resp.setContentType("application/json; charset=utf-8"); 
		
		Map<String,Object> map = new HashMap<>();
			int id = Integer.parseInt(req.getParameter("id"));
			int n = service.delBook(id);
			if(n > 0) {
				map.put("success", true);
			}else {
				map.put("success", false);
			}
		
		PrintWriter out = resp.getWriter();
		out.write(JSON.toJSONString(map));
		out.flush();
		out.close();
	}

}

 

四、运行效果:

 

代码怎么敲啊
关注
专栏目录
easyui
qq_65149711的博客
05-05 186
easyui是什么？ jQuery EasyUI是一组基于jQuery的UI插件集合体，能帮助web开发者更轻松的打造出功能丰富(并且美观的UI界面) 为什么要学习easyui? ①.使用easyui 不需要写很多代码，只需要编写一些简单 HTML 标记，就可以定义用户界面 ②.easyui 是个完美支持 HTML5 网页的完整框架 ③.easyui 能节省网页开发的时间和规模 ④.easyui 很简单但功能很强大，容易上手 easyui适合用在哪些地方？ easyui适合用在后台.
EasyUi
weixin_43710113的博客
06-11 365
1.什么是EasyUI EasyUI是基于jQuery的用户界面插件集合体。 EasyUI的目标就是帮助Web开发者轻松的打造出功能丰富、且美观的UI界面。开发者不需要编写复杂的JavaScript脚本，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 2.EasyUI组成部分 EasyUI下载后解压，其组成部分有： 文件/文件夹 说明 demo Ea...
jquery easyui datagrid实现增加，修改，删除方法总结
10-22
主要介绍了jquery easyui datagrid实现增加，修改，删除方法,结合实例形式分析了jquery easyui datagrid结合asp.net实现数据的增删改等操作的步骤与相关技巧,需要的朋友可以参考下
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
10-21
JQuery EasyUI datagrid添加、修改、删除操作是开发中常见需求，本文将详细介绍如何在JQuery EasyUI datagrid中实现这些操作。 ### 添加操作 要在JQuery EasyUI datagrid中实现添加操作，一般需要以下步骤： 1. ...
jquery Easyui Datagrid实现批量操作（编辑，删除，添加）
10-20
本篇文章主要讲述了如何利用jquery Easyui库中的Datagrid组件实现批量操作功能，包括编辑、删除以及添加新行。jquery Easyui 是一个基于jquery的前端UI框架，其中Datagrid组件专门用于展示和管理表格数据。通过这篇...
easyui DataGrid动态编辑
04-10
动态编辑意味着用户可以随时在表格内添加、修改或删除记录，而无需跳转到单独的编辑页面。这对于提高用户体验和提升数据处理效率至关重要。 首先，要实现DataGrid的动态编辑，我们需要了解几个关键配置项和方法： ...
Easyui 未压缩版
09-18
Easyui 未压缩版， 学习Easyui，深入理解，扩展，修改Easyui插件必备
easyUI
AWAKE-HU
07-30 417
typora-root-url: img easyui combobox组合框 用法 组合（combo）可以使用 javascript 从 或 元素进行创建。请注意，从标记创建组合（combo）是无效的 &amp;amp;lt;input id=&amp;quot;cc&amp;quot; value=&amp;quot;001&amp;quot;&amp;amp;gt; $('#cc').combo({ required:true
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码怎么敲啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值