struts2+easyui分页排序

由于最近要用easyui+struts2做个后台，需要用到排序功能，而自己又是刚刚接触easyui，于是就去 网上各种搜索相关资料。找到的资料要么是不符合要求（用的不是struts2），要么就是不完整，总之看的那个悲催。。。对一个小白来说的真的很痛苦。。于是自己去查api和一些资料。最终终于是搞定了。其实很简单。做个笔记记录下来。

先看效果图吧。。(根据单价升序)

先看下前端：

$("#shopUserList").datagrid({<span style="white-space:pre"></span>url : '${pageContext.request.contextPath}/businessManage_findGoodsByShopId.action?shopRoleNumber='+shopId+'&&time='+new Date().getTime(),<span style="white-space:pre"></span>fitColumns : true,<span style="white-space:pre"></span>striped : true,<span style="white-space:pre"></span>fit:true,<span style="white-space:pre"></span>pagination : true,<span style="white-space:pre"></span>rownumbers:true,<span style="white-space:pre"></span>autoRowHeight:true,<span style="white-space:pre"></span>pageSize : 10,<span style="white-space:pre"></span>pageNumber : 1,<span style="white-space:pre"></span>pageList : [5,10,20,30,40],<span style="white-space:pre"></span>onSortColumn:function(sort,order){<span style="white-space:pre"></span>$.ajax({<span style="white-space:pre"></span>url : '${pageContext.request.contextPath}/businessManage_findGoodsByShopId.action?shopRoleNumber='+shopId+'&&sort='+sort+'&&order='+order+'&&time='+new Date().getTime(),<span style="white-space:pre"></span>success:function(){<span style="white-space:pre"></span>$("#shopUserList").datagrid("load");<span style="white-space:pre"></span>}<span style="white-space:pre"></span>});<span style="white-space:pre"></span>},columns : [[<span style="white-space:pre"></span></span>{field:"goodsId",align:'center',checkbox:true},<span style="white-space:pre"></span></span>{field:"goodsImg",title:'图片',align:'center',<span style="white-space:pre"></span></span>formatter:function(value,row){<span style="white-space:pre"></span></span>    <span style="white-space:pre"></span></span>var str = "";<span style="white-space:pre"></span></span>    <span style="white-space:pre"></span></span>if(value!="" || value!=null){<span style="white-space:pre"></span></span>    <span style="white-space:pre"></span></span>str = "<img alt='未找到' onmouseout='out(this)' onmouseover='over(this)' style='margin:0px;height:50px;width:50px;border-radius:10px;z-index:1' src=${pageContext.request.contextPath}/goodsImg/"+value+">";<span style="white-space:pre"></span></span>           return str;<span style="white-space:pre"></span></span>    <span style="white-space:pre"></span></span>}<span style="white-space:pre"></span></span>    <span style="white-space:pre"></span></span>}<span style="white-space:pre"></span></span>    },<span style="white-space:pre"></span></span>{field:"goodsName",title:'商品名',align:'center'},<span style="white-space:pre"></span></span>{field:"goodsPrice",sortable:true,title:'单价',align:'center'},<span style="white-space:pre"></span></span>{field:"goodsKucun",sortable:true,title:'库存',align:'center'},<span style="white-space:pre"></span></span>{field:"goodsIsShangjia",sortable:true,title:'是否上架',align:'center',<span style="white-space:pre"></span></span>formatter: function(value,row,index){<span style="white-space:pre"></span></span>if(value == 1){<span style="white-space:pre"></span></span>return "<font style='font-weight:800;color:#21a1a1'>已上架</font>";<span style="white-space:pre"></span></span>}else{<span style="white-space:pre"></span></span>return "<font style='font-weight:800;color:red'>已下架</font>";<span style="white-space:pre"></span></span>}<span style="white-space:pre"></span></span>}<span style="white-space:pre"></span></span>},<span style="white-space:pre"></span></span>{field:"goodsIsDiancan",sortable:true,title:'支持点餐',align:'center',<span style="white-space:pre"></span></span>formatter: function(value,row,index){<span style="white-space:pre"></span></span>if(value == 1){<span style="white-space:pre"></span></span>return "<font style='font-weight:800;color:#21a1a1'>支持</font>";<span style="white-space:pre"></span></span>}else{<span style="white-space:pre"></span></span>return "<font style='font-weight:800;color:red'>不支持</font>";<span style="white-space:pre"></span></span>}<span style="white-space:pre"></span></span>}<span style="white-space:pre"></span></span>},<span style="white-space:pre"></span></span>{field:"goodsSales",sortable:true,title:'销量',align:'center'},<span style="white-space:pre"></span></span>{field:"goodsNumber",sortable:true,title:'商品分类类别',align:'center',<span style="white-space:pre"></span></span>formatter: function(value,row,index){<span style="white-space:pre"></span></span>  <c:forEach var="data" items="${sessionScope.goodsClassify }"><span style="white-space:pre"></span></span>  <span style="white-space:pre"></span></span>if(value == ${data.goodsNumber}){<span style="white-space:pre"></span></span>  <span style="white-space:pre"></span></span>return "${data.goodsName}";<span style="white-space:pre"></span></span>  <span style="white-space:pre"></span></span>}<span style="white-space:pre"></span></span>  </c:forEach><span style="white-space:pre"></span></span>}<span style="white-space:pre"></span></span>},<span style="white-space:pre"></span></span>{field:"state",sortable:true,title:'商品状态',align:'center',<span style="white-space:pre"></span></span>formatter: function(value,row,index){<span style="white-space:pre"></span></span>if(value == 1){<span style="white-space:pre"></span></span>return "<img width='20px' src='${pageContext.request.contextPath}/image/MsgSent.gif'/>";<span style="white-space:pre"></span></span>}else{<span style="white-space:pre"></span></span>return "<img width='20px' src='${pageContext.request.contextPath}/image/MsgError.gif'/>";<span style="white-space:pre"></span></span>}<span style="white-space:pre"></span></span>}<span style="white-space:pre"></span></span>}<span style="white-space:pre"></span></span>]]<pre name="code" class="html"><span style="white-space:pre"></span></span>})<span style="white-space:pre"></span></span>

1.给需要排序的字段添加 sortable:true属性
2.$("#dg").datagrid({
onSortColumn:function(sort,order){
$.ajax({
url : '${pageContext.request.contextPath}/businessManage_findGoodsByShopId.action?shopRoleNumber='+shopId+'&&sort='+sort+'&&order='+order+'&&time='+new Date().getTime(),
success:function(){
$("#shopUserList").datagrid("load");
}
});

},

})

onSortColumn的两个属性sort为点击的字段名（name:），order为排序顺序（desc和sac）;

3.ajax把sort和order提交到action

4.最后别忘了，ajax提交处理success记得要load一下

分页和排序写在一起

private List<Goods> rows;private int total;private int page;private String sort;private String order;public void setSort(String sort) {this.sort = sort;}public void setOrder(String order) {this.order = order;}public void setList(List<Goods> rows) {this.rows = rows;}public void setPage(int page) {this.page = page;}public List<Goods> getRows() {return rows;}public int getTotal() {return total;}public String findGoodsByShopId(){if(sort == null){sort = "goodsId";}if(order == null){order = "DESC";}int row = Integer.parseInt(ServletActionContext.getRequest().getParameter("rows"));int shopRoleNumber = Integer.parseInt(ServletActionContext.getRequest().getParameter("shopRoleNumber"));try {PageBean<Goods> pageData = new PageBean<>(row);pageData.setCurrentPage(page);goodsService.GoodsByShopNum(pageData,shopRoleNumber,sort,order);total = pageData.getTotalCount();rows = pageData.getPageData();return "backJson";} catch (Exception e) {e.printStackTrace();return "error";}}

Dao层的排序、分页的sql：

String sql = "select * from goods where shopNumber=? ORDER BY "+sortName+" "+sortOrder+"   limit ?,?";