EasyUI(DataGrid数据新增)

最新推荐文章于 2025-03-23 22:30:31 发布

代码怎么敲啊

最新推荐文章于 2025-03-23 22:30:31 发布

阅读量342

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_56996467/article/details/124118058

版权

easyui 专栏收录该内容

6 篇文章

订阅专栏

本文档详细介绍了使用EasyUI框架搭建的图书管理系统的实现过程，包括项目结构、前台页面（editBook.jsp和bookList.jsp）的搭建，以及后台（BookDao和BookAddServlet）的开发。在前台，用户可以输入书名、价格和类型进行书籍信息的编辑和查询，后台通过AJAX实现数据的增删查改。运行效果展示了一个简洁易用的图书管理界面。

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

一、项目结构

二、前台页面搭建

editBook.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div>
	<form id="bookForm">   
		<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(){
		$('#bookDiglog').dialog({    
		    title: "增加书本信息",    
		    width: 400,    
		    height: 250,    
		    closed: false,    
		    cache: false,    
		    href: 'editBook.jsp',    
		    modal: true,
		    buttons:[{
				text:'保存',
				handler:function() {
					$.ajax({
						url: ctx + "/bookAddServlet",
						type: 'post',
						dataType: 'json',
						data: $("#bookForm").serialize(),
						success: function(data) {
							if(data.success) {
								$.messager.alert('消息', '操作成功');
	    	                	$('#bookDiglog').dialog('close');
	    	                	qryBook();
							}
						},
	    	            error : function(error) {
	    	            	console.log(error);
	    	            }
					})
				}
			}, {
				text:'关闭',
				handler:function() {
					$('#bookDiglog').dialog("close");
				}
			}]
		});
	})
	
	
	
});
</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:

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

BookAddServlet：

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("/bookAddServlet")
public class BookAddServlet 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");
		
		String name = req.getParameter("bookname");
		String price = req.getParameter("price");
		String booktype = req.getParameter("booktype");
		
		Book book = new Book();
		book.setBookname(name);
		book.setBooktype(booktype);
		book.setPrice(BigDecimal.valueOf(Double.parseDouble(price)));
		
		PrintWriter out = resp.getWriter();
		
		Map<String,Object> data = new HashMap<>();
		try {
			service.addBook(book);
			data.put("success", true);
		} catch (Exception e) {
			data.put("success", false);
		}
		
		out.write(JSON.toJSONString(data));
		out.flush();
		out.close();
	}
}