datagrid查询

微醺3

于 2021-09-17 21:01:07 发布

阅读量91

点赞数

分类专栏： JAVA基础文章标签： easyui javascript

本文链接：https://blog.csdn.net/m0_55556488/article/details/120356620

版权

JAVA基础专栏收录该内容

38 篇文章 0 订阅

订阅专栏

本文介绍了如何使用EasyUI的datagrid组件进行数据查询，并展示了在userManage.jsp页面上的应用。通过链式编程提高了代码的可读性，详细讲解了在book.js中如何设置datagrid的load和toolbar属性，以及实现查询按钮的功能。

摘要由CSDN通过智能技术生成

一、datagrid的初步使用及链式编程结果类封装

思路：

①、要有一个存放书籍信息的展示页面

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

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/default/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>
<table id="dg"></table>
<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>
</body>
</html>

其中将人员数据维护与数据联系起来的是以下代码：

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

book.js代码：

$(function() {
	$('#dg').datagrid({
		url : $("#ctx").val() + '/book.action?methodName=datagrid',
		pagination : true,
		columns : [ [ {
			field : 'bid',
			title : 'id',
			width : 100
		}, {
			field : 'bname',
			title : '名字',
			width : 300
		}, {
			field : 'price',
			title : '价格',
			width : 100,
		} 
		
		] ]
	});
 
	$("#btn-search").click(function() {
		$('#dg').datagrid('load', {
			bname : $("#bname").val()
		});
	});
	
})

BookAction代码：

 
public class BookAction extends ActionSupport implements ModelDriver<Book> {
 
	Book book= new Book();
	
	BookDao dao = new BookDao();
	
	public Book getModel() {
		return book;
	}
 
	public String datagrid(HttpServletRequest req, HttpServletResponse resp) {
		PageBean pageBean = new PageBean();
		pageBean.setRequest(req);
        try {
        	List<Book> list = dao.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;
	}
}

链式编程:链式编程可以使得代码可读性高，链式编程的原理就是返回一个this对象，就是返回本身，达到链式效果

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

二、利用dategrid属性进行查询

思路: 1、首先要写好控件的位置，写在对应的usermanage.jsp界面上（其中用到了load以及toolbar属性）

2、在book.js中要写好点击方法，当点击查询按钮时要出现对应效果，

具体代码实现

usermanage界面代码：

<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>

book.js代码：

下面是运行结果