由於最近要用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>
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";
}
}String sql = "select * from goods where shopNumber=? ORDER BY "+sortName+" "+sortOrder+" limit ?,?";