今天下午花了点时间做了个简单的查询,前端使用easyUI的datagrid显示列表,用mybatis访问数据库,通过spring mvc进行请求跳转,在这先说说我琢磨出来的datagrid的一个用法。
jsp页面里的部分代码:
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
财务信息列表
<script>
$(function (){
$('#dd').datagrid({
title:'财务明细列表',
method:'GET',
url:'getFinanceList.action',
iconCls:'icon-ok',
fitColumns:true,
pagination:true,
striped:true,
nowrap:true,
singleSelect:true,
rownumbers:true,
pageSize:10,
columns:[[
{field:'ck',checkbox:true},
{field:'financeNo',title:'编号',width:100,align:'center'},
{field:'financeDate',title:'日期',width:100,align:'center'},
{field:'totalMoney',title:'总金额(元)',width:100,align:'center'},
{field:'foodMoney',title:'食品金额(元)',width:100,align:'center'},
{field:'foodDetail',title:'食品明细',width:100,align:'center'},
{field:'clothMoney',title:'衣服金额(元)',width:100,align:'center'},
{field:'clothDetail',title:'衣服明细',width:100,align:'center'},
{field:'lifeMoney',title:'生活用品金额(元)',width:100,align:'center'},
{field:'lifeDetail',title:'生活用品明细',width:100,align:'center'},
{field:'otherMoney',title:'其他金额(元)',width:100,align:'center'},
{field:'otherDetail',title:'其他明细',width:100,align:'center'}
]]
}
);
</script>
后台代码:
@RequestMapping(value="/getFinanceList",method=RequestMethod.GET)
public void getFinanceList(HttpServletRequest request,
HttpServletResponse response,Model model){
PageVo pageVo = new PageVo();
//获取分页相关属性
String pageNo = request.getParameter("page") == null ?"1":request.getParameter("page");
String pageSize = request.getParameter("rows");
int beginRow = (Integer.parseInt(pageNo)-1)*Integer.parseInt(pageSize);
int endRow = beginRow + Integer.parseInt(pageSize);
pageVo.setPageNo(pageNo);
pageVo.setPageSize(pageSize);
pageVo.setBeginRow(beginRow);
pageVo.setEndRow(endRow);
fList = fnService.getFinanceList(pageVo);
int total = fnService.getTotalCount();
Map
map = new HashMap
();
if(fList.size()>0){
map.put("total", total);
map.put("rows", fList);
json = JSONObject.fromObject(map);
try {
/*设置编码格式,返回结果
* ***/
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(json.toString());
} catch (IOException e1) {
e1.printStackTrace();
}
//return null;
}
}
1,在列表页面有一个id 为 dd的table,当跳转到该页面时,自动请求datagrid中的url地址;
2,在getFinanceList()方法中,查询得到List<Finance>,将其封装到Map中;
3,通过JSONObject.fromObject(map),将List转换为JSON对象,可以通过debug查看转换后的JSON对象格式;
4,最后通过response.getWriter().write(json.toString())传到前端,不要忘了设置编码格式为UTF-8。
这只是最简单的列表,并没包括分页,关于easyUI的相关属性和方法,可以查看API。