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">
<title>书籍hhh</title>
<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>
</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>
②.要跳到相对应的页面,于是要修改index.js文件里的路径
content:'<iframe height="100%" width="100%" src="'+node.attributes.self.menuURL+'"></iframe>',
2.引入datagrid数据表格,以死数据的方式引进去
①.从easyui demo 中引入datagrid里的datagrid_data1引入到WebContent目录下
{"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"}
]}
②.book.js文件引入datagrid表格
$('#dg').datagrid({
url:'datagrid_data1.json',
columns:[[
{field:'productid',title:'代码',width:100},
{field:'productname',title:'名称',width:100},
{field:'unitcost',title:'价格',width:100,align:'right'}
]]
});
3.造数据(从数据库表中拿值)
①.entity
package com.zy.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;
}
public Book() {
// TODO Auto-generated constructor stub
}
public Book(int bid, String bname, float price) {
super();
this.bid = bid;
this.bname = bname;
this.price = price;
}
@Override
public String toString() {
return "Book [bid=" + bid + ", bname=" + bname + ", price=" + price + "]";
}
}
②.BookDao
package com.zy.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.zy.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();
Book b=new Book();
PageBean pageBean=new PageBean();
List<Book> list = bookDao.list(b, pageBean);
ObjectMapper om=new ObjectMapper();
Map<String, Object> map=new HashMap<String, Object>();
map.put("total", pageBean.getTotal());
map.put("rows",list);
//拿到的是json数组
System.out.println(om.writeValueAsString(list));
//拿到的是对象
System.out.println(om.writeValueAsString(map));
}
}
③BookAction
package com.zy.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.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
import com.zy.dao.BookDao;
import com.zy.entity.Book;
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) throws Exception {
BookDao bookDao=new BookDao();
PageBean pageBean=new PageBean();
pageBean.setRequest(req);
List<Book> list = bookDao.list(book, pageBean);
ObjectMapper om=new ObjectMapper();
/*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));
return null;
}
public Book getModel() {
return book;
}
}
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;
}
}
④.配置mvc.2xml
<?xml version="1.0" encoding="UTF-8"?>
<config>
<action path="/menu" type="com.zy.web.MenuAction">
</action>
<action path="/book" type="com.zy.web.BookAction">
</action>
</config>
⑤.修改book.js文件
$(function(){
/**
* 在easyui中,点击下一页等默认的分页效果,携带的参数是page/rows
* 在bookstrap中,点击下一页等默认的分页效果,携带的参数是page/offset
*/
$('#dg').datagrid({
url:$("#ctx").val()+'/book.action?methodName=datagrid',
// 分页 如果不要分页就写false
pagination:true,
// 填充列
fitColumns:true,
columns:[[
{field:'bid',title:'代码',width:100},
{field:'bname',title:'名称',width:100},
{field:'price',title:'价格',width:100,align:'right'},
]]
});
//查询条件 datagrid的load方法
$("#btn-search").click(function(){
$('#dg').datagrid('load', {
bname: $("#bname").val(),
});
})
})
运行结果如下:
可以根据书名进行查询