最近在项目中很爱偷懒,于是用Jquery EasyUi处理分页,省去了要处理的分页参数信息。相比ExtJs,EasyUi的体积还是小多了,上手也容易多了;再相比Jquery UI,就不用说了,压根就没有DataGird。
准备工作:
Struts2类库:
Json类库:
Jquery EasyUI:
当然还包括Jquery的js库:
先看后台的类设计图:
看着挺多,其实写起来挺简单,本来可以用泛型把所有业务统一起来,但struts2对泛型有bug(不知道现在的版本解决没),当实例化泛型类时,一半概率会报ClassCastException。而且初学者看着一堆的泛型、抽象类、抽象方法很容易晕,所以用此设计,故不用原来的设计,这样做保证了代码安全稳定,付出的代价是写了不少重复代码。
前台页面:
orderlist.jsp:
要包括的ui库:
<link rel="stylesheet" type="text/css" href="<s:url value="/ui/themes/default/easyui.css"/>">
<link rel="stylesheet" type="text/css" href="<s:url value="/ui/themes/icon.css"/>">
<script type="text/javascript" src="<s:url value="/js/jquery-1.4.2.min.js"/>"></script>
<script type="text/javascript" src="<s:url value="/ui/jquery.easyui.min.js"/>"></script>
<script type="text/javascript" src="<s:url value="/ui/easyui-lang-zh_CN.js"/>"></script>
我用的是绝对路径,用的struts2的s:url标签,所以不要忘了引入struts2的标签库
<%@taglib prefix="s" uri="/struts-tags"%>
以上是在页面头包引入的库
真正的代码在下面:
<body>
<table id="dataGrid"></table>
</body>
就这么一点点
当然,还要在一开始做初始化,以下代码直接在head标签内接着上面引入库后写就行。
<script type="text/javascript">
$(function(){
//这个#dataGrid一定要和以上table的id对应
$('#dataGrid').datagrid({
title:'订单查询',
width:910,
height:400,
nowrap: false,
striped: true,
collapsible:false,
url:'<s:url value="/manage/queryOrder.action"/>',
remoteSort: true,
idField:'id',
loadMsg:'装载中...',
columns:[[
{ field:'id',title:'订单号',width:50,align:'center'},
{ field:'lastName',title:'姓',width:60,align:'center'},
{ field:'firstName',title:'名',width:60,align:'center'},
{ field:'roomName',title:'房型名称',width:130,align:'center'},
{ field:'roomNum',title:'订房数量',width:50,align:'center'},
{ field:'orderDate',title:'下单日期',width:110,align:'center'},
{ field:'liveDate',title:'住店日期',width:80,align:'center'},
{ field:'leaveDate',title:'离店日期',width:80,align:'center'},
{ field:'price',title:'总价格',width:100,align:'center'},
{ field:'opt',title:'操作',width:95,align:'center',
formatter:function(value,rec){
return "<a href='<%=request.getContextPath()%>/manage/viewOrder.action?orderId=" + rec.id + "'>查看</a> <a href='<%=request.getContextPath()%>/manage/deleteOrder.action?orderId=" + rec.id + "'>删除</a>";
}