struts2和Jquery EasyUI整合数据查询(DataGrid)一 -

wuliaolll

浏览: 21543 次
性别:
来自: 武汉

最近访客更多访客>>

qq756514656

lovetonight

suifengoffice

somchai

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (5)

社区版块

存档分类

struts2和Jquery EasyUI整合数据查询(DataGrid)一

jQuery UI JavaScript CSS json

(原创，转载请注明)

最近在项目中很爱偷懒，于是用Jquery EasyUi处理分页，省去了要处理的分页参数信息。相比ExtJs，EasyUi的体积还是小多了，上手也容易多了；再相比Jquery UI，就不用说了，压根就没有DataGird。

先看效果图

准备工作：

Struts2类库：

Json类库：

Jquery EasyUI：

当然还包括Jquery的js库：

先看后台的类设计图：

看着挺多，其实写起来挺简单，本来可以用泛型把所有业务统一起来，但struts2对泛型有bug(不知道现在的版本解决没)，当实例化泛型类时，一半概率会报ClassCastException。而且初学者看着一堆的泛型、抽象类、抽象方法很容易晕，所以用此设计，故不用原来的设计，这样做保证了代码安全稳定，付出的代价是写了不少重复代码。

然后再看代码：

前台页面：

orderlist.jsp：

要包括的ui库:

我用的是绝对路径，用的struts2的s:url标签，所以不要忘了引入struts2的标签库

<%@taglib prefix="s" uri="/struts-tags"%>

以上是在页面头包引入的库

真正的代码在下面：

<body>

</body>

就这么一点点

当然，还要在一开始做初始化，以下代码直接在head标签内接着上面引入库后写就行。

$(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>";