easyui datagrid之查询功能

最新推荐文章于 2023-07-27 16:52:41 发布

劫祸大师

最新推荐文章于 2023-07-27 16:52:41 发布

阅读量815

点赞数

文章标签： jquery 前端

本文链接：https://blog.csdn.net/weixin_45576466/article/details/106986380

版权

easyui 目录

一、前言
二、easyui布局
三、easyui后台查询
四、datagrid带条件查询
五、结果图
六、总结

一、前言

这次给大家分享的是要在以下链接博客的tabs控件的基础上增加查询功能，希望能够帮助到大家。
上篇博客地址：点击进入

二、easyui布局

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta 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>book增删改查</title>
</head>
<body>
<input type="hidden" id="ctx"
	value="${pageContext.request.contextPath }">
<div id="tb">
<input class="easyui-taxtbox" id="name" style="width:20%;padding-left: 10px" data-options="label:'书名 :',required:true">
<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
<a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</a>
</div>

<table id="dg" style="width: 100%;right: 100%"></table>  
</body>
</html>

book.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:100},
	        {field:'publishing',title:'出版社',width:100},
	        {field:'description',title:'描述',width:100}
	    ]]    
	});

三、easyui后台查询

entity book实体类

package com.chendongyang.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.chendongyang.dao;

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

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

public class BookDao extends BaseDao<Book> {
	public List<Book> list(Book book,PageBean pageBean) throws SQLException, Exception{
		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方法测试自己写的dao方法是否正确

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

这就是正确的图
web层

package com.chendongyang.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.chendongyang.dao.BookDao;
import com.chendongyang.entity.Book;
import com.chendongyang.framework.ActionSupport;
import com.chendongyang.framework.ModelDriven;
import com.chendongyang.util.DataGridResult;
import com.chendongyang.util.PageBean;
import com.chendongyang.util.ResponseUtil;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class BookAction extends ActionSupport implements ModelDriven<Book> {
	private Book book=new Book();
	private BookDao bookDao=new BookDao();
	@Override
	public Book getModel() {
		// TODO Auto-generated method stub
		return book;
	}
	
	public String datagrid(HttpServletRequest req,HttpServletResponse resp) throws SQLException, Exception{
//		total中的数据从哪来 pagebean中的属性
//		rows的数据从哪来  没页条目数
		PageBean pageBean=new PageBean();
		pageBean.setRequest(req);
		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);*/
		ResponseUtil.writeJson(resp, DataGridResult.ok(pageBean.getTotal()+"",list));
		return null;
	}
	
	/*public static void main(String[] args) throws JsonProcessingException {
		Map<String, Object> map=new HashMap<String, Object>();
		map.put("total", 34);
		List<Book> asList = Arrays.asList(new Book(1, "df", "df"),new Book(2, "dg", "dg"),new Book(3, "dh", "dh"));
		map.put("rows", asList);
		
		ObjectMapper om=new ObjectMapper();
		String jsonstr =om.writeValueAsString(map);
		System.out.println(jsonstr);
	}*/
}

在util包中添加一个 DataGridResult 包，这个地方我们主要考虑到web层使用
Map<String, Object> map=new HashMap<String, Object>();
map.put(“total”, pageBean.getTotal());
map.put(“rows”, list);
那么我们会想到一个系统中会有很多个带分页的列表这时我们就可以编写下列代码对外提供一个ok方法

package com.chendongyang.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;
	}
	public DataGridResult() {
		super();
	}
	public 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);
	}
}

四、datagrid带条件查询

把下列代码复制到book.js中就能够实现模糊查询

//	点击搜索按钮完成按名字进行书籍查询
	$("#btn-search").click(function(){
//		alert("cahd")
		$('#dg').datagrid('load', {    
		    name: $("#name").val()    
		});  
	})
	
})

五、结果图

在这里插入图片描述

六、总结

这次的内容就分享到这里了，如果有什么不对的大家可以到下方留言，下次给大家分享增加、修改、删除功能。

劫祸大师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui datagrid之查询功能

easyui 目录一、前言二、easyui布局三、easyui后台查询四、datagrid带条件查询五、结果图六、总结一、前言这次给大家分享的是要在以下链接博客的tabs控件的基础上增加查询功能，希望能够帮助到大家。二、easyui布局<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html>
复制链接

扫一扫