当前位置：网站首页>easyui04

easyui04

2022-07-26 11:08:00 【^O^——】

Catalog

The function of the project is perfect

Main functions ： Book display Page Add books function .

One 、 Toolbars

Two 、 Popup function implementation

3、 ... and 、 Methods and servlet class

The function of the project is perfect

Main functions ： Book display Page Add books function .

Initial effect ：

One 、 Toolbars

First , Show books bookList.jsp Processing tool strip .

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

stay bookList.js

   $('#myTable').datagrid({
       // Bind data table data
   // Binding header ：columns Column / Field
   columns:[[
   {field:'bookid',title:' Book number ',width:100,align:'center'},
   {field:'bookname',title:' Book title ',width:100,align:'center'},
   {field:'bookprice',title:' Book price ',width:100,align:'center'},
   {field:'booktype',title:' Type of book ',width:100,align:'center'}
   ]],
   // Send to background ajax request
   url:ctx + "/bookServlet.do",
   // Book display page
   pagination: true,// Set whether to display paging labels
   SingleSelect: true,// If true, Only one line can be selected
   loadMsg:" Loading data ...",// Display prompt message when loading data
adopt id Add toolbar
   toolbar:'#tableToolbar',
   });

After adding the toolbar （ The rightmost side of the table ）：

Possible problems ：

Sometimes the toolbar may not be loaded due to cache problems , You can run the page ：

1. Right click , Check ;

2. choice Network , At first, the data may be blank , Click on the top left refresh Icon perhaps Using shortcut keys （ Ctrl + R ） Data can be loaded ;

3. Click on the data of any page , Right click Clear browser cache;

4. And then click determine , You can clear the cache .

summary ： No It's just that the toolbar can't be loaded and can be used , When we finish writing code and run the web page, it is likely that some function will not work because of cache problems , At this time, you can clear the cache .

Two 、 Popup function implementation

then , stay bookList.jsp Under the toolbar of the page, define a dialog box for saving and clicking the Add button .

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

stay bookList.js

// Add a click event to the Add button
   $("#addBook").click(function(){
       // to div Add dialog
       $('#bookDialog').dialog({
       title: ' Add books ',
       width: 400,
       height: 233,
       closed: false,
       cache: false,
Pop up box page to pop up
       href: ctx + '/static/jsp/book/editBook.jsp',

Pop up page （ 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> Add books </title>
</head>
<body>
	<div>
		<form id="bookForm"> 
			<input type="hidden" name="id" id="id"/>
		    <div style="margin: 15px;">   
		        <label for="name"> Title :</label>   
		        <input class="easyui-textbox" name="bookName"  style="width:300px" 
		        				data-options="required:true"> 
		    </div>   
		    <div style="margin: 15px;">   
		        <label for="price"> Price :</label>   
		        <input class="easyui-textbox" name="bookPrice"  style="width:300px" 
		        				data-options="required:true"> 
		    </div>
		    <div style="margin: 15px;">   
		        <label for="booktype"> type :</label>   
		        <input class="easyui-textbox" name="bookType" style="width:300px" 
		        				data-options="required:true"> 
		    </div>  
		</form>
	</div>
</body>
</html>

modal: true,

Add a button group to the pop-up box （ Realize the function of saving and closing buttons ）

           buttons:[{
           // Realize the saving function
               text:' preservation ',
               handler:function(){
                   // Send to background ajax request
                   $.ajax({
                       url:ctx + '/addBookServlet.do',// Request address
                       data:$("#bookForm").serialize(),// The form data
                       dataType:'JSON',// The data type returned in the background
                       type:'post',// Sent ajax Request mode
                       success:function(data){
                           if(data.success == true){
                               $.messager.alert(' news ',data.msg);
                               // After the addition is successful, call the method of binding data to refresh
                               query();
                               // Close the dialog box after adding successfully
                               $("#bookDialog").dialog('close');
                           }else{
                               $.messager.alert(' Warning ',data.msg);
                           }
                       }
                   })
               }
           },{
               // Realize the closing function
               text:' close ',
               handler:function(){
                   $("#bookDialog").dialog('close');
               }
           }]

       });
   })

Demonstration of popup effect ：

3、 ... and 、 Methods and servlet class

1. Method （ Three layer architecture ）

/**
	 *  Ways to add books 
	 * @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. Add data processing pages of books （ 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();
			
			//  Definition Map aggregate 
			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);
				
				 //  Call the method of adding books 
				 ibb.insert(book);
				 
				 //  Go to Map Assignment in the set 
				 data.put("success", true);
				 data.put("msg", " Books increase successfully ！");
			} catch (Exception e) {
				 data.put("success", false);
				 data.put("msg", " Failed to add books ！");
				 e.printStackTrace();
			}
			
			//  take Map Set to json character string 
			String jsonString = JSON.toJSONString(data);
			
			out.write(jsonString);
			out.flush();
			out.close();	
			
	}
}

Final effect demonstration ：

main interface - Add books

Functional perfection ：easyui05_^O^—— The blog of -CSDN Blog

End .

原网站

版权声明
本文为[^O^——]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/207/202207261054347718.html