datagrid之查询-CSDN博客

本文链接：https://blog.csdn.net/zxy15974062965/article/details/120298634

本文档详细介绍了如何使用EasyUI框架在JavaWeb项目中实现在点击人员信息维护时，右侧Tab页显示书籍相关数据。通过在jsp页面设置监听事件，结合datagrid分页和填充列功能，动态加载数据库中的书籍信息，并实现了链式编程优化代码结构。同时，配置了后台Action处理请求，完成数据获取与返回。

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

目标：点击人员信息维护，右侧Tab页显示书籍相关信息

项目结构：

1、点击人员信息维护，右侧Tab页显示书籍相关信息

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

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

在index.js包中修改页面跳转路径

content:'<iframe width="100%" height="100%" src="'+node.attributes.self.menuURL+'"></iframe>',

3、引入datagrid数据表格，以死数据的方式引进去

①、从easyui demo 中引入datagrid到WebContent目录下

②book.js

$(function(){
	/**
	 * 在easyui中，点击下一页上一页灯默认分页效果，携带的参数是page/rows
	 */
	$('#dg').datagrid({    
	    url:$("#ctx").val()+'/book.action?methodName=datagrid',    
	    pagination:true,
	    fitColumns:true,//填充列
	    toolbar:'#tb',
	    columns:[[    
	        {field:'bid',title:'代码',width:300},    
	        {field:'bname',title:'名称',width:500},    
	        {field:'price',title:'价格',width:100,align:'right'}    
	    ]]    
	});  
})

效果：datagrid数据直接显示在界面上

4、造数据

从数据库表中拿值，点击人员信息维护，右侧Tab页显示数据库表中相关信息

①、BookDao中，用Map集合拿到对象

package com.zking.dao;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.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));
//	}
}

②、BookAction

package com.zking.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.zking.dao.BookDao;
import com.zking.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);
			// 此处得到的是个json数组
			Map<String, Object> map = new HashMap<String, Object>();
		map.put("total", pageBean.getTotal());
			map.put("rows", list);
			ResponseUtil.writeJson(resp, map);
		
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
	@Override
	public Book getModel() {
		// TODO Auto-generated method stub
		return book;
	}
	
}

展示效果：

5、分页、填充列及toolbar

在easyui中，点击下一页等默认的分页效果，携带的参数是page/rows在bookstrap中，点击下一页等默认的分页效果，携带的参数是page/offset

book.js

$(function(){
	/**
	 * 在easyui中，点击下一页等默认的分页效果，携带的参数是page/rows
	 * 在bookstrap中，点击下一页等默认的分页效果，携带的参数是page/offset
	 */
	$('#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'}    
	    ]]    
	});  
	$("#btn-search").click(function(){
		$('#dg').datagrid('load', {    
			bname: $("#bname").val()   
		});  
	});
 
})

在mvc.xml 中配置

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

6、链式编程

目的：简化代码

例如：

util下的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

package com.zking.web;

import java.util.List;

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

import com.dhm.dao.BookDao;
import com.dhm.entiey.Book;
import com.fasterxml.jackson.databind.ObjectMapper;
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();
//			Map<Object,Object> map = new HashMap<Object,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;
	}
}

最终运行结果：