思维导图

 

一、利用dategrid进行数据展示以及结果集的封装

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

1、单击左边菜单栏右边显示相对应的页面

2、先引入死数据 

{"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"}
]}

3、造出数据 entity、dao、action几个类；

实体类

package com.xly.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.xly.dao;
 
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;
import com.zw.entity.Book;
 
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(list));
	}
 
	
}

action类

package com.xly.dao;
 
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;
import com.zw.entity.Book;
 
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(list));
	}
 
	
}

工具类R

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

mvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<config>
	<action path="/book" type="com.xly.web.BookAction">
		<forward name="list" path="/blogList.jsp" redirect="false" />
		<forward name="toList" path="/book.action?methodName=list" redirect="true" />
		<forward name="toEdit" path="/blogEdit.jsp" redirect="false" />
	</action>
	<action path="/menu" type="com.xly.web.MenuAction">
	</action>
	<action path="/book" type="com.xly.web.BookAction">
	</action>
</config>

主页面

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

显示结果

二、分页 

添加api代码

$('dg').datagrid('load',{
name:'easyui',
address:'ho'
});

分页修改后的jsp页面新增以下代码

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

js页面代码

$(function(){
	$('#dg').datagrid({    
	    url:$("#ctx").val()+'/book.action?methodName=datagrid',   
	    pagination:true,
	    fitColums: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()
		})	
	}); 
})

分页后的结果