EasyUI——DataGrid数据显示

最新推荐文章于 2024-09-21 19:42:30 发布

洛洛虎虎生威

最新推荐文章于 2024-09-21 19:42:30 发布

阅读量1.9k

点赞数 7

分类专栏： EasyUI 文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/weixin_65975275/article/details/124720922

版权

EasyUI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

hello，家人们，我来啦，今天咱们主要讲一下EasyUI的DataGrid数据显示:

一.什么是DataGrid？

二.案例准备工作：

三.案例

一.什么是DataGrid？

DataGrid（数据表格）

DataGrid以表格形式展⽰数据，并提供了丰富的选择、排序、分组和编辑数据的功能⽀持
DataGrid的设计⽤于缩短开发时间，并且使开发⼈员不需要具备特定的知识
它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的⼀⼩部分功能

图片介绍：

二.案例准备工作：

1.数据库（sql语句）

CREATE TABLE BS_BOOK
(
    ID    NUMBER PRIMARY KEY,
    NAME  VARCHAR(50) NOT NULL,
    PRICE NUMBER      NOT NULL
);

INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (20, '双枪会给你答案(龚双双)', 62.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (21, '凡人修仙传（李昊）', 90.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (22, '吞噬星空（周宇辉）', 52.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (26, '重生之贼行天下（袁玉）', 84.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (27, '择天记(熊丽艳)', 6.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (28, '我的美女总裁老婆（李福彬）', 77.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (29, '爵迹·风津道(陈辉)', 70.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (30, '神墓(李康)', 88.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (31, '寻花问柳（陈辉）', 89.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (32, '仙逆(曾凡烟)', 86.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (33, '天珠变(孙涛)', 49.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (34, '重生之官道（匡安石）', 45.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (35, '春莺啭（杨杰）', 44.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (36, '永生(王吉祥)', 26.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (37, '覆雨翻云（陈峰）', 59.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (38, '完美世界', 5.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (39, '活色生香（彭菲）', 60.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (40, '武动乾坤（李林）', 0.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (41, '眸倾天下（刘鑫）', 63.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (42, '临界·爵迹2', 34.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (43, '恐怖高校（尹金霞）', 37.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (44, '大罗金仙异界销魂', 92.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (45, '我把爱情煲成汤（何相权)', 24.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (46, '罂粟的情人(向亦菲)', 36.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (47, '魔兽剑圣异界纵横', 63.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (48, '香初上舞(陈峰)', 78.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (49, '莽荒纪', 5.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (50, '重生1998(李康)', 69.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (51, '晚明', 42.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (52, '空战极限', 56.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (53, '风临异世', 83.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (54, '傲世九重天', 20.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (55, '造化之门', 6.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (56, '武神', 26.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (57, '婚宠之枭妻霸爱(陈紊涛)', 78.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (58, '斗破苍穹', 96.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (59, '主神崛起', 11.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (60, '异世邪君', 71.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (61, '富贵锦绣(王指旺)', 61.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (62, '绝品医仙(吴逸轩)', 68.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (63, '杀手之王(肖勇)', 27.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (64, '极乐篮球风暴', 42.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (65, '极度修真(卿美婷)', 58.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (66, '慧眼问道', 42.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (67, '混沌劫(周苏琪)', 71.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (68, '混沌修真诀', 47.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (69, '华夏立国传(李旺灯)', 15.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (70, '鸿蒙玄天曲', 9.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (71, '洪荒之金口玉言(杨晓涵)', 80.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (72, '横行在异世', 19.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (73, '鬼王的毒妃(肖玉珍)', 15.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (74, '和亲娇妃（成维锦）', 46.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (75, '宠物小精灵之小天（李小聪）', 41.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (76, '总裁的俏保镖（曾加成）', 54.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (77, '毒仙（李标杨）', 78.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (78, '钻石女人极品男（朱坤鹏）', 96.00);
INSERT INTO BS_BOOK (ID, NAME, PRICE)
VALUES (79, '亡命奴妃（资年）', 11.00);
commit;

2.导入一系列jar包以及 EasyUi的专属文件夹

三.案例

实体类 com.xxx.pojo

🍖🍖 Book

package com.zking.pojo;

public class Book {
	
	private Integer id;
	private String name;
	private Double price;
	
	public Book() {
		
	}

	public Book(Integer id, String name, Double price) {
		super();
		this.id = id;
		this.name = name;
		this.price = price;
	}


	public String toString() {
		return "Book [id=" + id + ", name=" + name + ", price=" + price + "]";
	}

	public Integer getId() {
		return id;
	}

	public void setId(Integer id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public Double getPrice() {
		return price;
	}

	public void setPrice(Double price) {
		this.price = price;
	}	

}

帮助类（util）

🌌🌌DBHelper

package com.zking.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import oracle.jdbc.driver.OracleDriver;

public class DBHelper {

	static {
		try {
			Class.forName("oracle.jdbc.driver.OracleDriver");
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	
	private static final String URL="jdbc:oracle:thin:@localhost:1521:orcl";
	
	public static Connection getCon() {
		try {
		 return	DriverManager.getConnection(URL, "scott","123");
		} catch (Exception e) {
			e.printStackTrace();
		}
		 return null;
	}
	
	
	public static void getClose(Connection con,PreparedStatement ps,ResultSet rs) {
		try {
			if(con!=null&&!con.isClosed())   con.close();
			if(ps!=null) ps.close();
			if(rs!=null) rs.close();
 		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	public static void main(String[] args) {
		System.out.println(DBHelper.getCon());
	}
}

三层架构：

⛅⛅ IBookDao （com.xxx.dao）

package com.zking.dao;

import java.util.List;

import com.zking.pojo.Book;

public interface IBookDao {

	List<Book> list(int page,int rows,String name);
	
	 public Integer total(String name);
}

🥣🥣 BookDao (com.xxx.daoimpl)

package com.zking.daoimpl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.zking.dao.IBookDao;
import com.zking.pojo.Book;
import com.zking.util.DBHelper;

public class BookDaoImpl implements IBookDao{
	
	private Connection con;
	private PreparedStatement ps;
	private ResultSet rs;

	public List<Book> list(int page,int rows,String name){
		List<Book> list=new ArrayList();
		int begin=(page-1)*rows+1;
		int end=page*rows;
		try {
			con=DBHelper.getCon();
			ps=con.prepareStatement(" select * from (select a.*,rownum myr from bs_book a where name like ?) b where myr between ? and ? ");
			ps.setString(1, "%"+name+"%");
			ps.setInt(2,begin);
			ps.setInt(3, end);
			rs=ps.executeQuery();
			while(rs.next()) {
				Book b=new Book(rs.getInt(1),rs.getString(2),rs.getDouble(3));
				list.add(b);
			}
			
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			DBHelper.getClose(con, ps, rs);
		}
		return list;
	}
	
	
	public Integer total(String name) {
		try {
			con=DBHelper.getCon();
			ps=con.prepareStatement("select count(1) from BS_BOOK b where name like ?");
			ps.setString(1,"%"+name+"%");
			rs=ps.executeQuery();
			while(rs.next()) {
			   return rs.getInt(1);
			}	
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			DBHelper.getClose(con, ps, rs);
		}
		return 0;
	}
	
}

🍈🍈IBookBiz（com.xxx.biz）

package com.zking.biz;

import java.util.List;

import com.zking.pojo.Book;

public interface IBookBiz {

	List<Book> list(int page,int rows,String name);
	
	public Integer total(String name);
}

🍻🍻BookBizImpl (com.xxx.bizimpl)

package com.zking.bizimpl;

import java.util.List;

import com.zking.biz.IBookBiz;
import com.zking.dao.IBookDao;
import com.zking.daoimpl.BookDaoImpl;
import com.zking.pojo.Book;

public class BookBizImpl implements IBookBiz{

	private IBookDao bookDao=new BookDaoImpl();
	
	public List<Book>list(int page,int rows,String name){
	    return bookDao.list(page, rows, name);
	}
	
	
	public Integer total(String name) {
		return bookDao.total(name);
	}
				
}

🍬🍬 BookServlet (com.xxx.servlet)

package com.zking.servlet;

import java.io.IOException;
import java.util.List;

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.fasterxml.jackson.databind.ObjectMapper;
import com.zking.biz.IBookBiz;
import com.zking.bizimpl.BookBizImpl;
import com.zking.pojo.Book;
import com.zking.pojo.PageBean;

@WebServlet("/book.do")
public class BookServlet extends HttpServlet{

	private IBookBiz bookBiz=new BookBizImpl();
	
	ObjectMapper mapper=new ObjectMapper();
	
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	
	
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		String name="";
		
		String n=req.getParameter("name");
		
		if(n!=null) {
			name=n;
		}
		
		//避免乱码，我们来设置一下编码
		req.setCharacterEncoding("utf-8");
		//把这三个值通过biz装进来
		PageBean bean=new PageBean();
		bean.getReq(req);
		bean.setTotal(bookBiz.total(name));
	    bean.setRows(bookBiz.list(bean.getPage(), bean.getRow(), name));
		
		resp.setCharacterEncoding("utf-8");
		//然后通过响应扔出去
		mapper.writeValue(resp.getOutputStream(),bean);
		
	}
}

🌸🌸PageBean

package com.zking.pojo;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

/**
 * 
 * @author zjjt
 *处理分页和数据封装的类
 */
public class PageBean {
	
	private Integer total;
	private List<?> rows;
	private Integer page=1;
	private Integer row=5;
	
	public Integer getTotal() {
		return total;
	}
	public void setTotal(Integer total) {
		this.total = total;
	}
	public List<?> getRows() {
		return rows;
	}
	public void setRows(List<?> rows) {
		this.rows = rows;
	}
	public Integer getPage() {
		return page;
	}
	public void setPage(Integer page) {
		this.page = page;
	}
	public Integer getRow() {
		return row;
	}
	public void setRow(Integer row) {
		this.row = row;
	}
	
	//拿到分页中的请求数据
	public void getReq(HttpServletRequest req) {
		String p=req.getParameter("page");
		String r=req.getParameter("rows");
		if(p!=null) {
			page=Integer.parseInt(p);
		}
		if(r!=null) {
			row=Integer.parseInt(r);
		}
	}
	
	
	
}

🧅🧅index.jsp主页代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/easyui/themes/icon.css">

</head>
<body>
<div style="text-align: center; margin-bottom: 5px;">
<input id="name" class="easyui-textbox" style="width:300px"><button id="btn" class="easyui-linkbutton">搜索🔍</button>
</div>
<table id="dg"></table>

<script>
  //field是属性
 $('#dg').datagrid({    
    url:'${pageContext.request.contextPath}/book.do', 
    columns:[[    
        {field:'id',title:'编号'},    
        {field:'name',title:'名称'},    
        {field:'price',title:'价格'}    
    ]],
    pagination:true,
    pageList:[5,10,20],
    pageSize:5
}); 

$("#btn").click(()=>{
	$("#dg").datagrid('load',{
		name:$("#name").val
	})
})
  
</script>

</body>
</html>

今天的代码到这里就结束啦！下期见