easyUI_05（DataGrid数据新增）

最新推荐文章于 2023-06-17 19:39:07 发布

Gorgeous_Tang

最新推荐文章于 2023-06-17 19:39:07 发布

阅读量178

点赞数 1

文章标签： easyui 前端 javascript eclipse

本文链接：https://blog.youkuaiyun.com/weixin_65479202/article/details/124652381

版权

本文介绍了如何在easyUI中使用dialog组件实现数据新增功能，利用jQuery的serialize()方法轻松打包表单数据，以及结合后台进行数据操作的案例。

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

一：dialog组件的使用

类似Bootstrap中的模态框

<div id="dd" style = "display:none"></div> 
$('#dd').dialog({    
    title: '新增图书',    
    width: 400,    
    height: 250,    
    closed: false,    
    cache: false,    
    href: xPath+'/editBook.jsp',//新增的表单页面    
    modal: true,
    buttons:[{
	text:'保存',
	handler:function(){
		//ajax方法传递数据到servlet中
		$.post("add路径",$("表单id").serialize(),function(data){
			if(data.success){
				$.messager.alert('我的消息','这是一个提示信息！');


			}
		});
	}
	},{
	text:'关闭',
	handler:function(){...}
	}]   
});

二.$("表单id").serialize()

jQuery中提供的一个方法，可以直接不需要手动获取输入框值，直接打包形成一个url参数拼接。

三.消息框的使用
$.message.alert();

后台新增数据案例：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<form id="bookForm" method="post">
	<center>
		<br>
		<div>
			<label for="name">书名:</label> <input class="easyui-validatebox"
				type="text" name="bookname" data-options="required:true" />
		</div>
		<br>
		<div>
			<label for="email">价格:</label> <input id="strName"
				class="easyui-validatebox" type="text" name="price"
				data-options="required:true" />
		</div>
		<br>
		<div>
			<label for="email">类型:</label> <input id="strName"
				class="easyui-validatebox" type="text" name="booktype"
				data-options="required:true" />
		</div>
	</center>
	<br>
</form>

package com.easyui.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
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.easyui.biz.IBookBiz;
import com.easyui.biz.impl.BookBizImpl;
import com.easyui.entity.Book;
import com.fasterxml.jackson.databind.ObjectMapper;

@WebServlet("/addBook.do")
public class AddBookServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 不考虑模糊查询
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("application/json;charset=utf-8");

		// 实例化biz
		IBookBiz ibb = new BookBizImpl();

		String bname = request.getParameter("bookname");
		Float bprice = Float.valueOf(request.getParameter("price"));
		String btype = request.getParameter("booktype");
		System.out.println(bname);
		System.out.println(bprice);
		System.out.println(btype);
		Book book = new Book(bname, bprice, btype);
		System.out.println(book);
		ObjectMapper mapper = new ObjectMapper();

		Map<String, Object> maps = new HashMap<String, Object>();

		// 判断book是否添加成功
		try {
			ibb.addBook(book);
			maps.put("success", true);
		} catch (Exception e) {
			maps.put("success", false);
		}

		String writeValueAsString = mapper.writeValueAsString(maps);

		PrintWriter out = response.getWriter();
		out.write(writeValueAsString);
		out.flush();
		out.close();
	}

}

<%@ 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>所有图书信息</title>
<%@ include file="/static/common/easyui-link.jsp"%>
</head>
<body>
	<!-- 搜索栏 -->
	<div style="margin: 15px auto; margin-left: 35%;">
		<input id="strName" class="easyui-validatebox" type="text"
			name="strName" data-options="required:true" /> <a id="bookQry"
			class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
	</div>
	<!-- 表格内容区域 -->

	<table id="bookListID" style="width: 100%">



	</table>
	<div id="tb" style="text-align: right">
		<a id="addBookId" href="#" class="easyui-linkbutton"
			data-options="iconCls:'icon-add',plain:true" /a> <a href="#"
			class="easyui-linkbutton"
			data-options="iconCls:'icon-edit',plain:true" /a> <a href="#"
				class="easyui-linkbutton"
				data-options="iconCls:'icon-help',plain:true" /a>
	</div>

	<!-- 弹出框(新增|修改)dialog组件 -->
	<div id="dd" style="display: none"></div>


	<script type="text/javascript">
		//入口函数
		$(function() {
			$('#bookListID').datagrid({
				//servlet界面
				url : xpath + '/BookList.do',
				//表格标题
				columns : [ [ {
					field : 'bid',
					title : '书籍编号',
					width : '25%',
					align : 'center'
				}, {
					field : 'bname',
					title : '书籍名称',
					width : '25%',
					align : 'center'
				}, {
					field : 'bprice',
					title : '书籍价格',
					width : '25%',
					align : 'center'
				}, {
					field : 'btype',
					title : '书籍类型',
					width : '25%',
					align : 'center'
				} ] ],
				//表格中分页工具显示
				pagination : true,
				//分页下拉框显示的条数
				pageList : [ 10, 30, 50, 60, 90 ],
				//发送请求时携带的参数
				queryParams : {
					searchName : $("#strName").val()
				},
				toolbar : '#tb'
			});

			//模糊查询的点击事件
			$("#bookQry").click(function() {
				//alert(123);
				mydemo();
			});
			//默认调方法
			mydemo();

			//封装一个方法实现自动加载第一页的所有行
			function mydemo() {
				$("#bookListID").datagrid('load', {
					searchName : $("#strName").val()
				});
			}

			$("#addBookId").click(function() {
				/* alert(123); */

				$('#dd').dialog({
					title : 'My Dialog',
					width : 400,
					height : 255,
					closed : false,
					cache : false,
					href : xpath + '/editBook.jsp',
					modal : true,
					buttons : [ {
						text : '保存',
						handler : function() {
							/* alert("保存"); */

							$.ajax({
								url : xpath + "/addBook.do",
								//参数传递 jQuery的选择器传递
								data : $("#bookForm").serialize(),
								datatype : "JSON",
								success : function(data) {
									if (data.success) {
										$.messager.alert('消息', '增加成功');
										//关闭窗口    							
										$("#dd").dialog('close');
										mydemo();
									}
								}
							});
						}
					}, {
						text : '关闭',
						handler : function() {
							/* alert("关闭"); */
							$("#dd").dialog('close');
						}
					} ]
				});
			})

		});
	</script>
</body>
</html>