使用EasyUI实现增加功能

最新推荐文章于 2023-06-07 16:14:12 发布

【小袁】

最新推荐文章于 2023-06-07 16:14:12 发布

阅读量284

点赞数

文章标签： easyui

本文链接：https://blog.youkuaiyun.com/m0_62839141/article/details/124106543

版权

本文档详细介绍了如何在项目中利用EasyUI实现增加功能，包括项目结构、DAO层（无返回值）、Servlet层以及界面代码的编写。强调了`editBook.jsp`中name值与Servlet获取参数的对应关系，并提供了操作截图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，项目结构

二，dao层

@Override
	/**
	 * 增加图书
	 */
    //图书id是拿到表格最大序号加1
	public void addBook(Book book) {
		String sql = "insert into t_book(id,bookname,price,booktype)\r\n" + 
				"select max(id)+1,'"
				+ ""+book.getBookname()+"',"
				+ ""+book.getPrice()+",'"+
				book.getBooktype()+"' from t_book";
		Connection con = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		try {
			con = DBHelper.getCon();
			ps = con.prepareStatement(sql);
			ps.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			DBHelper.myClose(con, ps,rs);
		}
		
	}

注：我这方法没有返回

三，servlet层

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

@WebServlet("/addBookServlet")
public class AddBookServlet extends HttpServlet{
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@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判断是否增加成功用抛异常的方法防止报错
		Map<String,Object> map = new HashMap<>();
		IBookService ibs = new BookService();
		//接收表单过来的值
		try {
			String bookname = req.getParameter("bookname");
			String price = req.getParameter("price");
			String booktype = req.getParameter("booktype");
			
			Book book = new Book();
			book.setBookname(bookname);
			book.setPrice(new BigDecimal(price));
			book.setBooktype(booktype);
			
			
			ibs.addBook(book);
			map.put("success",true);
		} catch (Exception e) {
			e.printStackTrace();
			map.put("success",false);
		}
		PrintWriter out = resp.getWriter();
		String str = JSON.toJSONString(map);
		out.write(str);
		out.flush();//刷新
		out.close();//关闭
	}
}

四，界面代码

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 type="text/javascript">
	$(function(){
		$('#dg').datagrid({    
		    url:ctx+'/bookServlet',
		    toolbar: '#tb',
		    pagination:true,
		    columns:[[    
		    	//这里的id，bookname，price，booktype必须跟实体类保持一致
		        {field:'id',title:'ID',width:100},    
		        {field:'bookname',title:'书本名称',width:100},    
		        {field:'price',title:'价格',width:100},
		        {field:'booktype',title:'类型',width:100} 
		    ]]    
		});
		//给查询添加点击事件
		$("#qrybtn").click(function(){
			qry();
		});
		
		function qry(){
			//重载行
			$('#dg').datagrid("re load",{
				//拿到以前的值给文本框赋值
				bookName:$("#bookName").val()
			});
		}
		$("#addbook").click(function(){//给增加添加点击事件(+号)
			$("#dd").dialog({    
			    title: '新增书本页面',    
			    width: 300,    
			    height: 240,    
			    closed: false,    
			    cache: false,    
			    href: 'editBook.jsp',    
			    modal: true,
			    buttons:[{
					text:'保存',
					iconCls:'icon-save',
					handler:function(){
						$.ajax({
							url:ctx+"/addBookServlet",
							data:'post',
							data:$("#bookForm").serialize(),
							dataType:'json',
							success:function(resp){
								if(resp.success){
									$.messager.alert('提示','操作成功');
									$("#dd").dialog("close");
									qry();
								}
								else{
									$.messager.alert('警告','操作失败')
								}
							}
						});
					}
				},{
					text:'关闭',
					iconCls:'icon-cancel',
					handler:function(){
						$("#dd").dialog("close");
					}
				}]

			});    
		})
	})
</script>
</head>
<body>
<form action="" method="post" style="margin-top:20px" >
        <label for="name">书籍名称：</label>   
        <input id="bookName" class="easyui-textbox" style="width:300px"> 
        <a id="qrybtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
    <div style="margin-top:20px" style="text-align:center">
	    <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="price" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a>
		<a href="#" id="booktype" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"></a>
	</div>
	<div id="dd"></div>  
</form> 
</body>
</html>

editBook.jsp

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

注：上面editBook.jsp页面中的name值必须跟servlet中的获取参数根据name获取value值中的name值必须保持一致

效果图: