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);???????????? ????? ??????????????????????
???????? }?
?? ?? }??
??? }
???? 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();
????? }
????? });
}
??????? 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" onclick="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} ???????????
];
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" onclick="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属性。
?