easyui04

^O^——

已于 2022-04-17 21:25:33 修改

阅读量587

点赞数 1

文章标签：前端框架

于 2022-04-13 16:03:29 首次发布

本文链接：https://blog.csdn.net/weixin_62332711/article/details/124139353

版权

项目功能完善

主要实现的功能：书本展示页面的增加书本功能。

一、工具条

二、弹出框功能实现

三、方法和servlet类

项目功能完善

主要实现的功能：书本展示页面的增加书本功能。

初始效果：

一、工具条

首先，给书本展示 bookList.jsp 加工具条。

<!-- 工具条 -->
<div id="tableToolbar" style="text-align: right;">
   <!-- 增加 -->
   <a id="addBook" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" /a>
</div>

在 bookList.js

   $('#myTable').datagrid({
       // 绑定数据表数据
   // 绑定表头：columns列/字段
   columns:[[
   {field:'bookid',title:'书本编号',width:100,align:'center'},
   {field:'bookname',title:'书本名称',width:100,align:'center'},
   {field:'bookprice',title:'书本单价',width:100,align:'center'},
   {field:'booktype',title:'书本类型',width:100,align:'center'}
   ]],
   // 向后台发送ajax请求
   url:ctx + "/bookServlet.do",
   // 书本展示分页
   pagination: true,// 设置是否显示分页标签
   SingleSelect: true,// 如果为true,则只允许选择一行
   loadMsg:"正在加载数据...",// 加载数据的时候显示提示消息

通过id添加工具条
   toolbar:'#tableToolbar',
   });

加了工具条后（表格最右边）：

可能遇到的问题：

有时候工具条可能因为缓存问题加载不出来，你可以在运行的网页：

1.右键，检查；

2.选择 Network ,刚开始数据可能是空白，点击左上角的 刷新图标 或者 使用快捷键（ Ctrl + R ） 就可以加载出数据；

3.随便点击一个页面的数据，右键 Clear browser cache；

4.然后点击确定，即可清除缓存。

总结：不只是工具条加载不出来可以使用，当我们写完代码运行网页的时候很有可能因为缓存问题导致某个功能出不来，这时候就可以清除缓存。

二、弹出框功能实现

然后，在 bookList.jsp 页面的工具栏下面定义一个用来保存点击增加按钮弹出的对话框。

<div id="bookDialog"></div>

在 bookList.js

// 给增加按钮添加点击事件
   $("#addBook").click(function(){
       // 给div添加对话框
       $('#bookDialog').dialog({
       title: '增加书本',
       width: 400,
       height: 233,
       closed: false,
       cache: false,

要弹出的弹出框页面
       href: ctx + '/static/jsp/book/editBook.jsp',

弹出框页面（ editBook.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>增加书本</title>
</head>
<body>
	<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="bookPrice"  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>
</body>
</html>

modal: true,

给弹出框添加按钮组（实现保存和关闭按钮功能）

           buttons:[{
           // 实现保存功能
               text:'保存',
               handler:function(){
                   // 向后台发送ajax请求
                   $.ajax({
                       url:ctx + '/addBookServlet.do',// 请求地址
                       data:$("#bookForm").serialize(),// 表单数据
                       dataType:'JSON',// 后台返回的数据类型
                       type:'post',// 发送的ajax请求方式
                       success:function(data){
                           if(data.success == true){
                               $.messager.alert('消息',data.msg);
                               // 增加成功之后调用绑定数据的方法进行刷新
                               query();
                               // 增加成功之后关闭对话框
                               $("#bookDialog").dialog('close');
                           }else{
                               $.messager.alert('警告',data.msg);
                           }
                       }
                   })
               }
           },{
               // 实现关闭功能
               text:'关闭',
               handler:function(){
                   $("#bookDialog").dialog('close');
               }
           }]

       });
   })

弹出框效果演示：

三、方法和servlet类

1.方法（三层架构）

/**
	 * 增加书本的方法
	 * @param book
	 * @throws SQLException
	 */
	public void insert(Book book) throws SQLException{
		con = DBAccess.getConnection();
		sql = "insert into t_book(bookName,bookPrice,bookType,bookNamePinYin)"
				+ " value(?,?,?,?)";
		ps = con.prepareStatement(sql);
		ps.setString(1, book.getBookName());
		ps.setDouble(2, book.getBookPrice());
		ps.setString(3, book.getBookType());
		ps.setString(4, book.getBookNamePinYin());
		n = ps.executeUpdate();
		DBAccess.close(con, ps, rs);
	}

2.增加书本的数据处理页面（ AddBookServlet ）

@SuppressWarnings("all")
@WebServlet("/addBookServlet.do")
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");
			
			PrintWriter out = resp.getWriter();
			
			IBookBiz ibb = new BookBiz();
			
			// 定义Map集合
			Map<String, Object> data = new HashMap<String, Object>();
			
			try {
				 String bookName = req.getParameter("bookName");
				 Double bookPrice = Double.parseDouble(req.getParameter("bookPrice"));
				 String bookType = req.getParameter("bookType");
				
				 Book book = new Book(bookName, bookPrice, bookType);
				
				 // 调用增加书本的方法
				 ibb.insert(book);
				 
				 // 往Map集合里面赋值
				 data.put("success", true);
				 data.put("msg", "书本增加成功！");
			} catch (Exception e) {
				 data.put("success", false);
				 data.put("msg", "书本增加失败！");
				 e.printStackTrace();
			}
			
			// 将Map集合转换为json字符串
			String jsonString = JSON.toJSONString(data);
			
			out.write(jsonString);
			out.flush();
			out.close();	
			
	}
}

最终效果演示：

主界面 - 增加书本

功能完善：easyui05_^O^——的博客-CSDN博客

完。