Dojo 自定义后台排序

Dojo本身提供了排序功能，但这种排序不是后台排序，如果页面有分页，只能在当前页排序，分页后排序将丢失。
这里提供一种实现后台排序方法，思路就是重写表头点击触发事件，将要排序的字段传递给后台。

<div class="tundra" id="batchGrid" dojoType="dojox.grid.DataGrid" store="initStore"  onHeaderCellClick="myGridSort" structure="layout" escapeHTMLInData="false"   noDataMessage="noData" autoHeight="true"></div>

红色标注就是当点击表头时我们要实现的方法，代码如下：

function myGridSort(e) {    
     columnSort = e.cellIndex;
     if(oldColumnSort&&columnSort!=oldColumnSort){
         systemlogsortAscending = false;
     }
     var data = e.rowIndex;       
     if (columnSort != -1) {        
             var propSort = layout[e.cellIndex].name;//   
             var sortby = layout[e.cellIndex].id;//
             if (sortby) {    
                    var cells_length = layout.length;//        
                    if (true) {             //                 
                          systemlogsortAscending = !systemlogsortAscending; //           
                          var order = 'DESC';            
                          if (systemlogsortAscending){                
                                    order = 'ASC';
                          }
                         //因为带有分页，所以要把某些数据保存到隐藏域
                        dojo.byId("sortby").value=sortby;
                        dojo.byId("order").value=order;
                        dojo.byId("cells_length").value=cells_length;
                        dojo.byId("columnSort").value=columnSort; 
                        dojo.byId("propSort").value=propSort; 
                        dojo.byId("sortAscending").value=systemlogsortAscending;
                        var form = document.getElementById("${param.formId}");
                        var url = form.action + "?sortby=" + sortby + "&order=" + order;   
                        oldColumnSort=columnSort;      
                         loadGridDataAJAX("${param.formId}", "${param.gridId}", url,cells_length, columnSort, propSort, systemlogsortAscending);                                         
         } 
      }  
    }

}

loadGridDataAJAX 代码如下：

function loadGridDataAJAX(formID, gridID , actionUrl,cells_length, columnSort, propSort,sortAscending){
        showProgressBar();
        dojo.xhrPost({
           url: actionUrl,
           handleAs: "json",
           form: formID, 
           load: function(resp, ioArgs){
           response = resp.data;

          document.forms[gridID + "PageInfoForm"]["paging.current"].value = "";

           if(typeof(resp) == "string") {
                   hideProgressBar(); 
                   return false; 
           }
           try{
                   dojo.byId(gridID + "currentPageNum").value = "";
                   var toPageRefreshObject = dijit.byId(gridID);
                   var gridItems = {items:resp.data};
                   toPageRefreshObject.setStore(new dojo.data.ItemFileReadStore({data:gridItems}));
                  dojo.byId(gridID + "totalRecord").innerHTML = resp.paging.totalRecord;
                  dojo.byId(gridID + "size").innerHTML = resp.paging.size;
                  dojo.byId(gridID + "currentPageNum").innerHTML = resp.paging.current; 
                  dojo.byId(gridID + "totalPageNum").innerHTML = resp.paging.total;
                  document.forms[gridID + "PageInfoForm"]["paging.size"].value = resp.paging.size; 
                  document.forms[gridID + "PageInfoForm"]["paging.queryCondition"].value =      resp.paging.queryCondition;
                  updateHeaderView(gridID, cells_length, columnSort, propSort,sortAscending); 
                  hideProgressBar();
              }catch(e){
                   hideProgressBar(); 
              }
           return resp;
      },
      error: function(resp,sss){ 
      hideProgressBar();
      }
      });
}

最后在列表页面代码：

dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.parser"); 

 var gridList = { identifier:'batch_ID',  items:${dojoGridVO.jsonData} }; 
 var initStore=new dojo.data.ItemFileReadStore({data:gridList}); 
 var layout = [ 
 {name:'<input type="checkbox" name="all" id="all" οnclick="selectAll(this)">', width:6,               get:getSelect},
 {id:'batchName', name:'<fmt:message key="batch.batchName" />', width: 15, field:"batchName"},
 {id:'batchExt', name:'<fmt:message key="batch.suffix" />', width: 6, field:"batchExt"}, 
 {id:'checked', name:'<fmt:message key="batch.checkStatus" />', width: 8, field:"checked"}, 
 {id:'posted', name:'<fmt:message key="batch.postStatus" />', width: 8, field:"posted"}, 
 {name:'<fmt:message key="batch.select" />', width:10, get:selectLink}, 
  {name:'<fmt:message key="batch.process" />', width: 'auto', get:processColumn}            
];

想让哪些字段排序就在layout里定义，给想要排序的列添加id:'batchName' 属性，这里batchName为传到后台的排序字段名称，这个通常与PO里面字段对应。如果此列不需要排序，就不要添加id属性。