一、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代码：
下面是运行结果