datagrid之查询

原创 于 2021-10-12 14:01:02 发布 · 211 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#easyui

这篇博客在上篇文章的基础上介绍了如何在EasyUI环境中实现datagrid的查询功能。首先，展示了如何在点击左侧菜单后在右侧Tab页显示相关数据，包括创建jsp界面和加载数据。接着，博主详细讲解了如何从数据库获取数据，包括entity、dao和web包的配置。为减少重复代码，采用了链式编程的方法，并增加了查询条件，使用户能够通过书名进行搜索。

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

在上篇文章Tree基础上加代码

一、点击左侧菜单；右侧Tab页显示相关信息



1、存放右侧相关信息页面

建立userManage.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/gray/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<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/book.js"></script>  
<title>存放书籍的页面</title>
</head>
<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
<div id="tb">
    <input class="easyui-textbox" id="bname" name="bname" 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-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</a> -->
</div>
<table id="dg"></table> 
</body>
</html>

加载数据

<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/book.js"></script> 

放入隐藏域

<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">

2、点击左侧菜单显示对应页面

①datagrid_data1.json（数据）

{"total":28,"rows":[
    {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
    {"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
    {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
    {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
    {"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
    {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
    {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
    {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
    {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
    {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}

②index.js数据

改路径

$(function() {
    $('#dg').datagrid({    
        url:$("#ctx").val()+'/datagrid_data1.json',    
        columns:[[    
            {field:'productid',title:'id',width:100},    
            {field:'productname',title:'名称',width:100},    
            {field:'unitcost',title:'价格',width:100,align:'right'}    
        ]]    
    }); 
}) 
————————————————
版权声明：本文为优快云博主「Jay永不过时」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/Cat_Jay_Fish/article/details/120290014

 

二、造数据（使用数据库数据）

①entity包

Book类

package com.lsy.entity;
 
public class Book {
	private int bid;
	private String bname;
	private float price;
	public int getBid() {
		return bid;
	}
	public void setBid(int bid) {
		this.bid = bid;
	}
	public String getBname() {
		return bname;
	}
	public void setBname(String bname) {
		this.bname = bname;
	}
	public float getPrice() {
		return price;
	}
	public void setPrice(float price) {
		this.price = price;
	}
	@Override
	public String toString() {
		return "Book [bid=" + bid + ", bname=" + bname + ", price=" + price + "]";
	}
	
}

②dao包

package com.lsy.dao;
 
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import com.fasterxml.jackson.databind.ObjectMapper;
import com.lsy.entity.Book;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;
 
public class BookDao extends BaseDao<Book>{
	public List<Book> list(Book book, PageBean pageBean) throws Exception {
		String bname=book.getBname();
		String sql="select * from t_mvc_book where 1=1";
		if(StringUtils.isNotBlank(bname)) {
			sql+=" and bname like '%"+bname+"%'";
		}
		return super.executeQuery(sql, Book.class, pageBean);
	}
	public static void main(String[] args) throws Exception {
//		BookDao bookDao=new BookDao();
//		PageBean pageBean = new PageBean();
//		List<Book> list = bookDao.list(new Book(), new PageBean());
//		ObjectMapper om=new ObjectMapper();
//		//json数组
//		Map<String, Object> map=new HashMap<String, Object>();
//		map.put("total", pageBean.getTotal());
//		map.put("rows", list);
//		System.out.println(om.writeValueAsString(map));
	}
}

③web包

package com.lsy.web;
 
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.databind.ObjectMapper;
import com.lsy.dao.BookDao;
import com.lsy.entity.Book;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
 
public class BookAction extends ActionSupport implements ModelDriver<Book>{
	private Book book=new Book();
	private BookDao bookDao=new BookDao();
	
	public String datagrid(HttpServletRequest req, HttpServletResponse resp) {
		BookDao bookDao=new BookDao();
		PageBean pageBean = new PageBean();
		pageBean.setRequest(req);
		try {
			List<Book> list = bookDao.list(book, pageBean);
			ObjectMapper om=new ObjectMapper();
			//json数组
//			Map<String, Object> map=new HashMap<String, Object>();
//			map.put("total", pageBean.getTotal());
//			map.put("rows", list);
			//链式编程
			ResponseUtil.writeJson(resp, new R()
					.data("total", pageBean.getTotal())
					.data("rows", list));
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
	
	public Book getModel() {
		return book;
	}
 
}

配置xml文件

<action path="/book" type="com.lsy.web.BookAction">
    </action>

使用file文件处理json数据

$('#dg').datagrid({    
	    url:$("#ctx").val()+'/book.action?methodName=datagrid', 
	    pagination:true,
	    fitColumns:true,
	    toolbar:'#tb',
	    columns:[[    
	        {field:'bid',title:'id',width:100},    
	        {field:'bname',title:'名称',width:100},    
	        {field:'price',title:'价格',width:100,align:'right'}    
	    ]]    
	});

界面展示

页面中的分页数据代码

pagination:true,

返回的类型是boolean类型

 

 

3、封装重复代码（链式编程）

建立R类

package com.zking.util;
 
import java.util.HashMap;
 
public class R extends HashMap{
	public R data(String key,Object value) {
		this.put(key, value);
		
		return this;
	}
}

改变BookAction代码

Map<String, Object> map=new HashMap<String, Object>();
//            map.put("total", pageBean.getTotal());
//            map.put("rows", list);
改为
 

ResponseUtil.writeJson(resp, new R()
                    .data("total", pageBean.getTotal())
                    .data("rows", list));

链式编程一直点就行了，方便

4、增加查询条件
代码

<div id="tb">
    <input class="easyui-textbox" id="bname" name="bname" 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>
</div>
将此代码加到userManage.jsp 界面中

再去book.js文件中加

$("#btn-search").click(function() {
		$('#dg').datagrid('load', {    
			bname: $("#bname").val() 
		}); 
		
	});

 BookAction中

 

标记的地方改为

List<Book> list = bookDao.list(book, pageBean);

最终结果展示

 

时刻干饭
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值