EasyUi之DataGrid（数据表格）

于 2020-06-27 23:54:13 发布
阅读量624 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： js html javascript web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhhhhhhhzsw/article/details/106990177
本文介绍了EasyUi的DataGrid组件，它是一款轻量级且功能强大的表格展示工具，支持选择、排序、分组和编辑数据。文章通过实例展示了如何从HTML元素创建DataGrid，如何实现查询功能，包括从数据库获取数据并展示在表格中，还涉及到了模糊查询的实现。最后，作者对分享的内容进行了简要总结。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

简介

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
在这里插入图片描述

使用案例

1、从现有的表格元素创建DataGrid，在HTML中定义列、行和数据。

<table class="easyui-datagrid">   
    <thead>   
        <tr>   
            <th data-options="field:'code'">编码</th>   
            <th data-options="field:'name'">名称</th>   
            <th data-options="field:'price'">价格</th>   
        </tr>   
    </thead>   
    <tbody>   
        <tr>   
            <td>001</td><td>名称1</td><td>2323</td>   
        </tr>   
        <tr>   
            <td>002</td><td>名称2</td><td>4612</td>   
        </tr>   
    </tbody>   
</table>

通过

标签创建DataGrid控件。在表格内使用
标签定义列。

<table class="easyui-datagrid" style="width:400px;height:250px"   
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">   
    <thead>   
        <tr>   
            <th data-options="field:'code',width:100">编码</th>   
            <th data-options="field:'name',width:100">名称</th>   
            <th data-options="field:'price',width:100,align:'right'">价格</th>   
        </tr>   
    </thead>   
</table>

2、使用Javascript去创建DataGrid控件。

<table id="dg"></table>  

$('#dg').datagrid({    
    url:'datagrid_data.json',    
    columns:[[    
        {field:'code',title:'代码',width:100},    
        {field:'name',title:'名称',width:100},    
        {field:'price',title:'价格',width:100,align:'right'}    
    ]]    
});

json文件在我们之前在官网下载的文件中
在这里插入图片描述
将它放在与jsp文件同级的目录下

实现查询功能

查询数据库的数据将它放到我们的数据表格中
数据表
在这里插入图片描述
实体类

package com.zhangsiwen.entity;

import java.sql.Timestamp;

public class Book {
	private long id;
	private String name;
	private String pinyin;
	private long cid;
	private String author;
	private float price;
	private String image;
	private String publishing;
	private String description;
	private int state;
	private Timestamp deployTime;
	private int sales;
	public long getId() {
		return id;
	}
	public void setId(long id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPinyin() {
		return pinyin;
	}
	public void setPinyin(String pinyin) {
		this.pinyin = pinyin;
	}
	public long getCid() {
		return cid;
	}
	public void setCid(long cid) {
		this.cid = cid;
	}
	public String getAuthor() {
		return author;
	}
	public void setAuthor(String author) {
		this.author = author;
	}
	public float getPrice() {
		return price;
	}
	public void setPrice(float price) {
		this.price = price;
	}
	public String getImage() {
		return image;
	}
	public void setImage(String image) {
		this.image = image;
	}
	public String getPublishing() {
		return publishing;
	}
	public void setPublishing(String publishing) {
		this.publishing = publishing;
	}
	public String getDescription() {
		return description;
	}
	public void setDescription(String description) {
		this.description = description;
	}
	public int getState() {
		return state;
	}
	public void setState(int state) {
		this.state = state;
	}
	public Timestamp getDeployTime() {
		return deployTime;
	}
	public void setDeployTime(Timestamp deployTime) {
		this.deployTime = deployTime;
	}
	public int getSales() {
		return sales;
	}
	public void setSales(int sales) {
		this.sales = sales;
	}
	@Override
	public String toString() {
		return "Book [id=" + id + ", name=" + name + ", pinyin=" + pinyin + ", cid=" + cid + ", author=" + author
				+ ", price=" + price + ", image=" + image + ", publishing=" + publishing + ", description="
				+ description + ", state=" + state + ", deployTime=" + deployTime + ", sales=" + sales + "]";
	}
	public Book() {
		super();
	}
	public Book(long id, String name, String pinyin) {
		super();
		this.id = id;
		this.name = name;
		this.pinyin = pinyin;
	}
}

Dao方法

package com.zhangsiwen.dao;

import java.sql.SQLException;
import java.util.List;

import com.zhangsiwen.entity.Book;
import com.zhangsiwen.util.BaseDao;
import com.zhangsiwen.util.PageBean;
import com.zhangsiwen.util.StringUtils;

public class BookDao extends BaseDao<Book> {
	
	public List<Book> list(Book book,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String name=book.getName();
		String sql="select * from t_easyui_book where true ";
		if(StringUtils.isNotBlank(name)) {
			sql +=" and name like '%"+name+"%' ";
		}
		return super.executeQuery(sql, Book.class, pageBean);
	}
}

使用main方法测试一下看能不能拿到数据

	public static void main(String[] args) throws InstantiationException, IllegalAccessException, SQLException {
		BookDao bookDao=new BookDao();
		Book  book=new Book();
		List<Book> list=bookDao.list(book, null);
		for (Book b : list) {
			System.out.println(b);
		}
	}

Action

package com.zhangsiwen.web;

import java.sql.SQLException;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zhangsiwen.dao.BookDao;
import com.zhangsiwen.entity.Book;
import com.zhangsiwen.framework.ActionSupport;
import com.zhangsiwen.framework.ModelDriven;
import com.zhangsiwen.util.DataGridResult;
import com.zhangsiwen.util.PageBean;
import com.zhangsiwen.util.ResponseUtil;

public class BookAction extends ActionSupport implements ModelDriven<Book> {
	private Book book=new Book();
	private BookDao bookDao=new BookDao();
	@Override
	public Book getModel() {
		return book;
	}
	
	public String datagrid(HttpServletRequest req,HttpServletResponse resp) throws Exception {
//		total中的数据从哪来？ --》pagebean total属性
//		rows的数据从哪来？ --》每页的展示数据
		PageBean pageBean=new PageBean();
		pageBean.setRequest(req);
		try {
			List<Book> list = this.bookDao.list(book, pageBean);
//			将total、rows看成对象封装成属性
			ResponseUtil.writeJson(resp, DataGridResult.ok(pageBean.getTotal()+"",list));
		} catch (InstantiationException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}
}

封装属性工具类

package com.zhangsiwen.util;

public class DataGridResult<T> {
	private String total;
	private T rows;

	public String getTotal() {
		return total;
	}
	public void setTotal(String total) {
		this.total = total;
	}
	public T getRows() {
		return rows;
	}
	public void setRows(T rows) {
		this.rows = rows;
	}
	private DataGridResult(String total, T rows) {
		super();
		this.total = total;
		this.rows = rows;
	}
	private DataGridResult() {
		super();
	}
	
	public static <T> DataGridResult<T> ok(String total,T rows){
		return new DataGridResult<>(total,rows);
	}
	@Override
	public String toString() {
		return "DataGridResult [total=" + total + ", rows=" + rows + "]";
	}
	
}

在xml进行配置

<?xml version="1.0" encoding="UTF-8"?>
<config>
	<action path="/book" type="com.zhangsiwen.web.BookAction">
	</action>
</config>

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">
<!-- 全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!-- 定义图标 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css"> 
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<!-- 组件库源码的js文件 -->  
<script type="text/javascript" 
	src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>  
	<script type="text/javascript" 
	src="${pageContext.request.contextPath }/static/js/book.js"></script>  

<title>增删改查</title>
</head>
<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
<div id="tb">
<input class="easyui-textbox" id="name" name="name" style="width: 20%;padding-left: 10px"data-options="label:'书名',required:true">
<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">搜索</a>
<a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'">新增</a>
</div>
<table id="dg"></table>  

</body>
</html>

js代码

$(function(){
	var ctx=$("#ctx").val();
	$('#dg').datagrid({    
	    url:ctx+'/book.action?methodName=datagrid',
	    pagination:true,
	    toolbar:'#tb',
	    columns:[[    
	        {field:'id',title:'id',width:100},    
	        {field:'name',title:'数据名称',width:100},    
	        {field:'pinyin',title:'拼音',width:100,align:'right'},
	        {field:'cid',title:'书籍类别',width:100},    
	        {field:'author',title:'作者',width:100}, 
	        {field:'price',title:'价格',width:100},    
	        {field:'image',title:'图片',width:300}
	    ]]    
	});  
//	点击搜索按钮完成按名字进行书籍查询
	$("#btn-search").click(function(){
		$('#dg').datagrid('load', {    
		    name: $("#name").val()
		});  
	})
})

实现效果
在这里插入图片描述
模糊查询
在这里插入图片描述

总结

今天的分享到这了，谢谢大家！

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值