当前位置：网站首页>easyui03
easyui03
2022-07-26 11:08:00 【^O^——】
Catalog
The function of the project is perfect
Main functions ： Left menu management in Book display Interface data binding （ With paging and fuzzy query ）.
The function of the project is perfect
Main functions ： Left menu management in Book display Interface data binding （ With paging and fuzzy query ）.
One 、 database
Preparation form 、 Prepare the data ;
Two 、 package
1. Entity class writing
The required entity class Book（entity package ）
public class Book implements Serializable{
private static final long serialVersionUID = 1L;
private int bookId;// Book id
private String bookName;// Book title
private Double bookPrice;// Book price
private String bookType;// Type of book
private String bookNamePinYin;// Book name Pinyin
public int getBookId() {
return bookId;
}
public void setBookId(int bookId) {
this.bookId = bookId;
}
public String getBookName() {
return bookName;
}
public void setBookName(String bookName) {
this.bookName = bookName;
// Call the method that assigns a value to the phonetic attribute of the book name
this.setBookNamePinYin(PinYinUtil.toPinyin(bookName));
}
public Double getBookPrice() {
return bookPrice;
}
public void setBookPrice(Double bookPrice) {
this.bookPrice = bookPrice;
}
public String getBookType() {
return bookType;
}
public void setBookType(String bookType) {
this.bookType = bookType;
}
public String getBookNamePinYin() {
return bookNamePinYin;
}
public void setBookNamePinYin(String bookNamePinYin) {
this.bookNamePinYin = bookNamePinYin;
}
public static long getSerialversionuid() {
return serialVersionUID;
}
public Book() {
// TODO Auto-generated constructor stub
}
public Book(int bookId, String bookName, Double bookPrice, String bookType, String bookNamePinYin) {
super();
this.bookId = bookId;
this.bookName = bookName;
this.bookPrice = bookPrice;
this.bookType = bookType;
this.bookNamePinYin = bookNamePinYin;
}
public Book(int bookId, String bookName, Double bookPrice, String bookType) {
super();
this.bookId = bookId;
this.setBookName(bookName);
this.bookPrice = bookPrice;
this.bookType = bookType;
}
public Book(String bookName, Double bookPrice, String bookType) {
super();
this.setBookName(bookName);
this.bookPrice = bookPrice;
this.bookType = bookType;
}
@Override
public String toString() {
return "Book [bookId=" + bookId + ", bookName=" + bookName + ", bookPrice=" + bookPrice + ", bookType="
+ bookType + ", bookNamePinYin=" + bookNamePinYin + "]";
}
}2. Method writing
stay dao Wrapped in IBookDao Interface
public interface IBookDao {
/**
* Method with fuzzy query paging
* @param bookName
* @param pageIndex
* @param pageSize
* @return
* @throws SQLException
*/
List<Book> query(String bookName, Integer pageIndex, Integer pageSize) throws SQLException;
/**
* The total number of data （ Fuzzy query ）
* @param bookName
* @return
* @throws SQLException
*/
int getTotalRow(String bookName) throws SQLException;
}In the implementation package impl Medium BookDao Class （ Realization IBookDao Interface ）
public class BookDao implements IBookDao{
private Connection con;// Connection object
private PreparedStatement ps;// Perform object
private ResultSet rs;// Result set object
private Book book;// object
private List<Book> listBook;// aggregate
private String sql;// preservation sql sentence
private int n;// Rows affected
@Override
public List<Book> query(String bookName,Integer pageIndex,Integer pageSize) throws SQLException{
listBook = new ArrayList<Book>();
con = DBAccess.getConnection();
Integer startIndex = (pageIndex - 1) * pageSize;
sql = "select * from t_book limit ?,?";
// If the book name keyword is not null Or a blank string
if(null != bookName && !"".equals(bookName)) {
sql = "select * from t_book where bookName like ? or bookNamePinYin like ? limit ?,?";
}
//System.out.println(" Book paging query sql："+sql);
ps = con.prepareStatement(sql);
// Assign value to placeholder
if(null != bookName && !"".equals(bookName)) {
ps.setString(1, "%"+bookName+"%");// Book title
ps.setString(2, "%"+bookName+"%");// Book name Pinyin
ps.setInt(3, startIndex);// The number of entries at the beginning of each page
ps.setInt(4, pageSize);// Page size
}else {// No fuzzy query
ps.setInt(1, startIndex);
ps.setInt(2, pageSize);
}
rs = ps.executeQuery();
while(rs.next()) {
book = new Book(rs.getInt("bookid"), rs.getString("bookname"), rs.getDouble("bookprice"),
rs.getString("booktype"), rs.getString("booknamepinyin"));
listBook.add(book);
}
DBAccess.close(con, ps, rs);
return listBook;
}
@Override
public int getTotalRow(String bookName) throws SQLException{
Integer totalRow = 0;// Number of data pieces queried
con = DBAccess.getConnection();
sql = "select count(0) from t_book where 1 = 1";
// If the book name keyword is not null Or a blank string
if(null != bookName && !"".equals(bookName)) {
sql += " and bookName like ? or bookNamePinYin like ?";
}
ps = con.prepareStatement(sql);
// Assign value to placeholder
if(null != bookName && !"".equals(bookName)) {
ps.setString(1, "%"+bookName+"%");// Book title
ps.setString(2, "%"+bookName+"%");// Book name Pinyin
}
//System.out.println(" Query the total number of book data （ Fuzzy query ）sql："+sql);
rs = ps.executeQuery();
if(rs.next()) {
totalRow = rs.getInt(1);
}
return totalRow;
}
}stay biz Wrapped in IBookBiz Interface
public interface IBookBiz {
/**
* Method with fuzzy query paging
* @param bookName
* @param pageIndex
* @param pageSize
* @return
* @throws SQLException
*/
List<Book> query(String bookName, Integer pageIndex, Integer pageSize) throws SQLException;
/**
* The total number of data （ Fuzzy query ）
* @param bookName
* @return
* @throws SQLException
*/
int getTotalRow(String bookName) throws SQLException;
}
In the implementation package impl Medium IBookBiz Class （ Realization IBookBiz Interface ）
public class BookBiz implements IBookBiz{
IBookDao imd = new BookDao();
@Override
public List<Book> query(String bookName, Integer pageIndex, Integer pageSize) throws SQLException {
return imd.query(bookName, pageIndex, pageSize);
}
@Override
public int getTotalRow(String bookName) throws SQLException {
return imd.getTotalRow(bookName);
}
}3.setvlet Package writing
BookServlet
@SuppressWarnings("all")
@WebServlet("/bookServlet.do")
public class BookServlet 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 {
try {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = resp.getWriter();
IBookBiz ibb = new BookBiz();
// 1. Get the fuzzy query keywords output by the foreground
String bookName = req.getParameter("bookName");
// 2. Get the current page number from the foreground to the background
String page = req.getParameter("page");
// 3. Assign the current page number from the foreground to the current page number variable
Integer pageIndex = null == page || "".equals(page) ? 1 : Integer.parseInt(page);
// 4. Get the page size from the foreground ,rows yes EasUI The parameter name of the current page number specified by the page
Integer pageSize = Integer.parseInt(req.getParameter("rows"));
// 5. Call the method with fuzzy query paging
List<Book> listBook = ibb.query(bookName, pageIndex, pageSize);
// 6. Call the method of querying the total number of data
int totalRow = ibb.getTotalRow(bookName);
// 7. Definition Map aggregate , For preservation listBook and totalRow
Map<String , Object> data = new HashMap<>();
data.put("rows", listBook);
data.put("total", totalRow);
// 8. take data convert to JSON character string
String jsonString = JSON.toJSONString(data);
out.write(jsonString);
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
3、 ... and 、 page
Page needed bookList.jsp and bookList.js .
1. First, in the jsp New in folder book Folder ,book New in folder bookList.jsp page ;
bookList.jsp
（ start ）
<%@ 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> Book display </title>
because include An error will be reported if the instruction uses an absolute path here , So the path here uses a relative path .
<!-- adopt include The instruction introduces the public part page head.jsp -->
<%@ include file="../../../static/common/head.jsp" %>
principle ：
The illustration
../： A file or folder that represents a directory one level above the current directory .
First, according to Relative paths from bookList.jsp（1） page -> book Folder （2） -> WebContent Folder （3）;
And then according to Absolute path Go to static Find it step by step in the folder head.jsp（ Public pages ）.
<!-- introduce bookList.js -->
<script type="text/javascript" src="js/book/bookList.js""></script>
2. stay js New in folder book Folder ,book New in folder bookList.js（ Write js Code ）;
bookList.js
$(function(){
$('#myTable').datagrid({
// 1. 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",
// 2. Pagination
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
});
// 3. Fuzzy query
// Add an event to the query button
$("#searchBtn").click(function(){
query();
})
// Set the text description of the paging component
var p = $("#myTable").datagrid('getPager');
$(p).pagination({
pageList: [10,20,30,40,50,60,70,80,90],// Set the optional page size
beforePageText: ' The first ',// Chinese characters displayed in front of the page number text box
afterPageText: ' page common {pages} page ',
displayMsg: ' The current display {from} - {to} Bar record common {total} Bar record ',
});
})
// Send fuzzy query keywords to the background
function query(){
$("#myTable").datagrid('load',{
bookName: $('#bookName').val(),
});
}</head>
<body>
<!-- Fuzzy query -->
<div>
<input id="bookName" type="text" style="width:300px; margin:21px;">
<a id="searchBtn" type="submit" class="easyui-linkbutton" data-options="iconCls:'icon-search'"> Inquire about </a>
</div>
<!-- Data sheet -->
<table id="myTable" class="easyui-datagrid" style="width:100%;height:155%;">
</table>
</body>
</html>
( ending )
Final effect demonstration ：
main interface - Book display
Perfect function ：easyui04_^O^—— The blog of -CSDN Blog
End .
边栏推荐
猜你喜欢
随机推荐
1748. Sum of unique elements
Bash shell学习笔记（六）
Sword finger offer (twenty): stack containing min function
There is an unhandled exception at 0x003b66c3 in MFC: 0xc000041d: unhandled exception encountered during user callback
Sword finger offer (49): convert a string to an integer
Att request of ble
242. Effective letter heteronyms
MySQL learning notes
LinkedList of source code
@The real difference and usage between validated and @valid
A method to deal with the crash of C Halcon user control
Bigdecimal的加减乘除、比较大小、向上向下取整 和 Bigdecimal的集合累加、判断BigDecimal是否有小数
复现php一句话木马
pytest 用例执行顺序
如何组装一个注册中心？
新来个技术总监要我做一个 IP 属地功能~
pytest fixture装饰器
SCADA and three industrial control systems PLC, DCS and FCS
344. Reverse string
Bash shell learning notes (6)