easyui-05（DataGrid数据新增）

最新推荐文章于 2023-07-27 17:16:28 发布

huangᴸ

最新推荐文章于 2023-07-27 17:16:28 发布

阅读量456

点赞数 1

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

本文链接：https://blog.csdn.net/m0_63579794/article/details/124648426

版权

java 同时被 2 个专栏收录

44 篇文章 1 订阅

订阅专栏

easyui

6 篇文章 0 订阅

订阅专栏

一.BookList.jsp界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!-- 通过include指令引入公共资源 -->
<%@ include file="/static/common/easyui-link.jsp"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<div style="margin: 15px; text-align: center;">
		<input class="easyui-textbox" id="bookName" style="width: 300px">
		<a id="bookQry" class="easyui-linkbutton"
			data-options="iconCls:'icon-search'">查询</a>
	</div>

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

	<table id="bookListId">

	</table>

	<div id="tb" style="text-align: right;">
		<a id="addBookId" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="add();">增加</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="edit();">编辑</a>
	</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,20,30,40,50,60,70,80,90,100],
    	    //发送请求是携带的参数
    	    queryParams:{
    	    	searchName:$("#bookName").val()
    	    },
    	    toolbar: '#tb'
    	});  
    	
    	//模糊查询点击事件
    	$("#bookQry").click(function() {
			mydemo();
		});
    	
    	mydemo();
    	
    	//封装一个方法实现自动加载第一页的所有行
    	function mydemo() {
			$('#bookListId').datagrid('load',{
				searchName:$("#bookName").val()
			});
		}
    	
    	$("#addBookId").click(function () {
			/* alert(123); */
			//调用dialog
    		$('#dd').dialog({    
    		    title: '增加界面',    
    		    width: 400,    
    		    height: 260,    
    		    closed: false,    
    		    cache: false,    
    		    href: xPath+'/editBook.jsp',    
    		    modal: true,
    		    buttons:[{
    				text:'保存',
    				handler:function(){
    					/* alert("保存"); */
    					//获取表单中的数据 调用方法 传到servlet中
    					$.ajax({
    						url:xPath+"/addBook.do",
    						//参数传递 jQuery的选择器传递
    						data:$("#bookForm").serialize(),
    						datatype:"JSON",
    						success:function(data){
    							if(data.success){
    								$.messager.alert('消息','增加成功');
                                    //关闭窗口    							
    								$("#dd").dialog('close');
    							}
    						}
    					});
    				}
    			},{
    				text:'关闭',
    				handler:function(){
    					/* alert("关闭"); */
    					$("#dd").dialog('close');
    				}
    			}]
    		});
    		});  
		});
    	
    	

</script>

</body>
</html>

二.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="bname" style="width:300px">
          </div>
           <div style="margin: 15px">
             <label for="price">价格:</label>
             <input class="easyui-textbox" name="bprice" style="width:300px">
          </div>
           <div style="margin: 15px">
             <label for="booktype">类型:</label>
             <input class="easyui-textbox" name="btype" style="width:300px">
          </div>
       </form>
    </div>

三.AddBookServlet 界面

package com.easyui.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.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("bname");
		Float bprice=Float.valueOf(request.getParameter("bprice"));
		String btype=request.getParameter("btype");
		
		Book book=new Book(bname, bprice, btype);
		
		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();
	}

}

四.小结

1.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(){...}
	}]   
});    
 

2.$("表单id").serialize()
	jQuery中提供的一个方法，可以直接不需要手动获取输入框值，直接打包形成一个url参数拼接。

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