datagrid查询
一、datagrid组件
1、了解datagrid
介绍：DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。
用处：DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
2、依赖关系
- panel（承载其它内容的容器）
- resizable（调整大小）
- linkbutton（按钮组件，使用超链接按钮创建）
- pagination（分页控件，允许用户导航页面的数据）
二、实例讲解
1、步骤了解
然后了解了步骤之后，我们就可以开始实例代码操作了：
2、book类
在开始代码之前，记得导入 {}datagrid_data1.json 。
然后首先开始book实体类：
代码如下:
//zouyan
package com.zouyan.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 String 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 String getSales() {
return sales;
}
public void setSales(String sales) {
this.sales = sales;
}
public Book() {
super();
}
public Book(long id, String name, String pinyin, long cid, String author, float price, String image,
String publishing, String description, int state, Timestamp deployTime, String sales) {
super();
this.id = id;
this.name = name;
this.pinyin = pinyin;
this.cid = cid;
this.author = author;
this.price = price;
this.image = image;
this.publishing = publishing;
this.description = description;
this.state = state;
this.deployTime = deployTime;
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 + "]";
}
}
3、addBook.jsp
然后来到界面这边，写addBook.jsp，一样的可以根据自己的项目进行更改。
代码如下：
//zouyan
<%@ 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/icon.css">
<!--组件库源文件的js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<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/index.js"></script>
<title>查询</title>
</head>
<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath}">
<div id="tb">
<input class="easyui-textbox" id="name" style="width: 70%;padding-left: 10px" data-options="label:'书名：',required:true">
<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">查询</a>
<a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">新增</a>
</div>
<table id="dg"></table>
</body>
</html>
4、bookdao类
布置好界面的样式之后，就可以开始写bookdao类了，一样根据代码来看：
//zouyan
package com.zouyan.dao;
import java.sql.SQLException;
import java.util.List;
import com.zouyan.entity.Book;
import com.zouyan.util.BaseDao;
import com.zouyan.util.PageBean;
import com.zouyan.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);
}
public static void main(String[] args) throws InstantiationException, IllegalAccessException, Exception {
BookDao bookDao=new BookDao();
Book book=new Book();
List<Book> list=bookDao.list(book, null);
for (Book b : list) {
System.out.println(b);
}
}
}
5、BookAction
其次就是BookAction：
//zouyan
package com.zouyan.web;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zouyan.dao.BookDao;
import com.zouyan.entity.Book;
import com.zouyan.util.DataGridResult;
import com.zouyan.util.PageBean;
import com.zouyan.util.ResponseUtil;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriven;
public class BookAction extends ActionSupport implements ModelDriven<Book>{
public Book book=new Book();
public BookDao bookDao=new BookDao();
@Override
public Book getModel() {
// TODO Auto-generated method stub
return book;
}
public String datagrid(HttpServletRequest req,HttpServletResponse resp) {
//total中数据从哪里来？-->pageBean
//rows中的数据从哪里来？-->每页的展示数据
PageBean pageBean=new PageBean();
pageBean.setRequest(req);
try {
List<Book> list = this.bookDao.list(book, pageBean);
/*Map<String, Object> map=new HashMap<String, Object>();
map.put("total", pageBean.getTotal());
map.put("rows", list);*/
//通用工具类dategridresult可以将上面的代码给替换成下面的代码
ResponseUtil.write(resp, DataGridResult.ok(pageBean.getTotal()+"", list));
} catch (InstantiationException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
/*public static void main(String[] args) {
Map<String, Object> map=new HashMap<String, Object>();
}*/
}
6、DataGridResult
然后就是DataGridResult的代码:
//zouyan
package com.zouyan.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() {
super();
}
private DataGridResult(String total, T rows) {
super();
this.total = total;
this.rows = rows;
}
public static <T> DataGridResult<T> ok(String total,T rows){
return new DataGridResult<>(total,rows);
}
}
7、book.js
最后就是界面显示,参照官网上的这个部分去写：
示例代码如下：
//zouyan
$(function(){
var ctx=$("#ctx").val();
$('#dg').datagrid({
url:ctx+'/book.action?methodName=detagrid',
//是否分页
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:'cid',width:100},
{field:'author',title:'作者',width:100},
{field:'price',title:'单价',width:100},
{field:'image',title:'图片',width:100},
{field:'publishing',title:'出版',width:100},
{field:'description',title:'描述',width:100},
{field:'state',title:'状态',width:100},
{field:'deployTime',title:'时间',width:100},
{field:'sales',title:'销售',width:100}
]]
});
//查询
$("btn-search").click(function(){
$('#dg').datagrid('load', {
name: $("name").val()
});
});
})
在我这里的显示效果如下：
三、总结
在学习过程中可以经常登录这个网站去学习的：jeasyui.net/tutorial/22.html.
我是南橙，我是一个逐渐秃头的橙子Orange。
244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
