EasyUi：DataGrid数据新增

最新推荐文章于 2022-05-09 09:13:56 发布

纽库鲁：金

最新推荐文章于 2022-05-09 09:13:56 发布

阅读量249

点赞数

文章标签： easyui

本文链接：https://blog.youkuaiyun.com/weixin_50624008/article/details/124156561

版权

本文详细介绍了如何在EasyUI的DataGrid中实现数据的新增功能。包括前端页面bookList.jsp的布局设计，添加关闭按钮的实现，以及后台的AddBookServlet和BookDao的编写，确保数据能正确保存。同时，还涵盖了前端JavaScript文件bookList.js中的相关操作逻辑。

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

样式图：

增加页面布局$关闭按钮实现：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>
</head>
<!-- 通过include指令引入公共部分页面的head.jsp -->
<%@ include file="../../../static/common/head.jsp" %>
<!-- 引入index.js -->
<script type="text/javascript" src="js/book/bookList.js"></script>
<body>
	<!-- 查询组件，不需要form表单， 默认的是ajax -->
<div>
	<input id="bookName" class="easyui-textbox" data-options="iconCls:'icon-search'" 
		sstyle="width:300px" /> 
	<a id="btn_search" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a> 
	
</div>
		<!-- 工具拦 -->
	<lable id="tableToolbar" style="text-align: right;">
		<a class="easyui-linkbutton" id="addBook" data-options="iconCls:'icon-add',plain:true"></a>
		<a  class="easyui-linkbutton" id="" data-options="iconCls:'icon-remove',plain:true"></a>
		<a  class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a>
		<a  class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"></a>
	</lable> 

	<!-- 数据表 -->
	<div>
		<table  id ="myTable" class="easyui-datagrid" s
			tyle="width:100%;height:390px">   
   		 <thead>     
    	</thead>   
		</table>  
	</div>
	

	<!-- window对话框 -->
	 <div id="bookDialog" style="margin-top: 30px;top:0px;">   
	</div>  
</body>
</html>

后台编写（servlet&dao）：

AddBookServlet:增加书本

package com.zking.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.biz.IBookBiz;
import com.zking.biz.impl.BookBiz;
import com.zking.entity.Book;

/**
 * 增加书本
 * @author jin
 *
 */
@WebServlet("/AddBookServlet")
public class AddBookServlet extends HttpServlet{
	@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("text/html;charset=utf-8");
		IBookBiz ibb = new BookBiz();
		PrintWriter out = resp.getWriter();
		Map<String,Object> data = new HashMap<>();
		try {
			//获取前端的关键字
			String bookName = req.getParameter("bookName");
			System.out.println("bookBName="+bookName);
			String bookPrice = req.getParameter("bookPrice");
			System.out.println("bookPrice=" + bookPrice);
			String bookType = req.getParameter("bookType");
			System.out.println("bookType=" + bookType);
//			Book book = new Book(bookName,bookPrice,bookType);//①
			//第二种
			Book book = new Book();
			book.setBookname(bookName);
			book.setBookprice(bookPrice);
			book.setBooktype(bookType);
		
			//调用增加的方法
			ibb.insert(book);
			
			//往map集合里面赋值
			data.put("sucess", true);
			data.put("msg", "书本增加成功!");
			
			
		}catch (Exception e) {
			data.put("sucess", false);
			data.put("msg", "书本增加失败!");
			// TODO: handle exception
			e.printStackTrace();
		}
		//将map集合data装换成JSON字符串
		String jsonString = JSON.toJSONString(data);
		out.write(jsonString);
		out.flush();
		out.close();
	}
}

BookDao

package com.zking.dao.impl;

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

import com.zking.dao.IBookDao;
import com.zking.entity.Book;
import com.zking.util.DBAccess;

public class BookDao implements IBookDao{
	private List<Book> listBook;
	private PreparedStatement ps;
	private Connection con;
	private Book book;
	private ResultSet rs;
	private String sql;
	private int n;
	@Override
	public List<Book> query(String bookName,int pageIndex,int pageSize) throws Exception{
		
		listBook = new ArrayList<>();
		con = DBAccess.getConnection();
		
		//计算每页开始 的数据条数
		int startIndex = (pageIndex - 1)* pageSize;
		
		//分页的SQL语句
		sql="select bookId,bookName,bookPrice,bookType,bookNamePinYin from t_book limit ?,?";
		
		//如果书本的关键字不为null和空白关键字
		if(null != bookName && !"".equals(bookName)) {
			sql = "select bookId,bookName,bookPrice,bookType,bookNamePinYin from t_book where bookName like ? or bookNamePinYin like ? limit ?,? ";
		}
		System.out.println("模糊查询sql语句="+sql);
		ps = con.prepareStatement(sql);
		//给占位符赋值
		if(null != bookName && !"".equals(bookName)) {
			ps.setString(1, "%"+bookName+"%");//书本名称
			ps.setString(2, "%"+bookName+"%");//书本名称拼音
			ps.setInt(3, startIndex);//开始页数
			ps.setInt(4, pageSize);//页大小        
		}else {
			ps.setInt(1, startIndex);//开始页数
			ps.setInt(2, pageSize);//页大小        
		
		}
		
		ps.setInt(1, startIndex);
		rs = ps.executeQuery();
		while(rs.next()) {
			book = new Book();
			book.setBookid(rs.getInt("bookId"));
			book.setBookname(rs.getString("bookname"));
			book.setBookprice(rs.getString("bookprice"));
			book.setBooktype(rs.getString("bookType"));
			book.setBooknamepinyin(rs.getString("booknamepinyin"));
			listBook.add(book);
		}
		DBAccess.close(con, ps, rs);
		return listBook;
	}
	@Override
	public int getTotalRow(String bookName) throws Exception{
		int TotalRow=0;//数据总条数
		con = DBAccess.getConnection();
		sql = "select count(0) from t_book where 1=1";
		//如果书本的关键字不为null或者空白关键字
		if(null != bookName && !"".equals(bookName)) {
			sql += " and bookName like ? or bookNamePinYin like ?";
		}
		ps = con.prepareStatement(sql);
		//给占位符赋值
		if(null != bookName && !"".equals(bookName)) {
		ps.setString(1, "%"+bookName+"%");//书本名称
		ps.setString(2, "%"+bookName+"%");//书本名称拼音
		}
		System.out.println("查询数据总条数："+sql);
		rs = ps.executeQuery();
		if(rs.next()) {
			TotalRow = rs.getInt(1);
		}
		DBAccess.close(con, ps, rs);
		return TotalRow;
	}
	@Override
	public void insert(Book book) throws Exception {
		con = DBAccess.getConnection();
		sql = "insert into t_book(bookName,bookPrice,bookType,bookNamePinYin)values(?,?,?,?)";
		ps = con.prepareStatement(sql);
		ps.setString(1, book.getBookname());//书本名称
		ps.setString(2, book.getBookprice());//书本名称拼音
		ps.setString(3, book.getBooktype());//书本名称拼音
		ps.setString(4, book.getBooknamepinyin());//书本名称拼音
		n = ps.executeUpdate();
		DBAccess.close(con, ps, rs);
	}
	
	
}

前端：bookList.js

$(function(){
	//获取表格
	$("#myTable").datagrid({
		//绑定表头：columns列/字段
		//第一个参数
		columns:[[
			{field:'bookid',title:'书本编号',width:100},
			{field:'bookname',title:'书本名称',width:100},
			{field:'bookprice',title:'书本单价',width:100},
			{field:'booktype',title:'书本类型',width:100}
		]],
		//向后台发送ajax请求
		url:ctx+"/BookServlet",
		//分页
		pagination: true,// 设置是否显示分页标签
	    singleSelect:true,// 如果为true，则只允许选择一行(否则点一行选择一行，很丑)
	    loadMsg:"正在加载数据...",//加载数据的时候显示提示消息。
	    toolbar:'#tableToolbar',//通过id获取工具栏
	});
	//给查询按钮添加事件
	$("#btn_search").click(function(){
		console.info("关键字:"+$("#bookName").val());
		query();
	})

	
	//给增加工具条添加点击事件
	$('#addBook').click(function(){
		//给div添加对话框
		$('#bookDialog').dialog({    
		    title: '添加',    
		    width: 400,    
		    height: 200,    
		    closed: false,    
		    cache: false,    
		    href: ctx+'/static/jsp/book/editBook.jsp',    
		    modal: true,
		    //给对话框添加按钮组
		    buttons:[{
				text:'保存',
				handler:function(){
					//像后台发送ajax请求
					$.ajax({
						url:ctx+'/AddBookServlet',//请求地址
						data: $("#bookForm").serialize(),//表单数据
						dataType:'JSON',//后台返回数据类型
						type:'post',//发送ajax请求方式类型
						success:function(data){
							if(data.success == true){//增加成功
								$.messager.alert('消息',data.msg);
								//增加成功，重新绑定数据
								query();
							}else{//增加失败
								$.messager.alert('警告！',data.msg);
							}
						}
					})
				}
			},{
				text:'关闭',
				handler:function(){
					//获取到对话框的id
					$('#bookDialog').dialog('close');
				}
			}]

		    
		    
		})   

	})
	


	
	
	/* 设置分页组件的文字描述  */
	var p = $('#myTable').datagrid('getPager'); 
	$(p).pagination({ 
		pageSize: 10,//每页显示的记录条数，默认为10 
		pageList: [10,20,30,50,60,70,80,90,100],//可以设置可以选择的页大小(下拉框的内容)
		beforePageText: '第',//页数文本框前显示的汉字 
		afterPageText: '页    共 {pages} 页', 
		displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录', 
	}); 
})

//向后台发送模糊查询关键字方法
function query(){
	console.info($("#bookName").val());
	$('#myTable').datagrid('load',{
		bookName:$("#bookName").val(),
	});
}