Jqgrid默認排序在Chrome中不起作用

Question

在Firefox & IE中，列表顯示按預期方式顯示，默認排序正常。而No.列從1,2,3...升序

顯示但問題是Chrome，爲了顯示沒有（請參閱我下面的截圖）

下面是我的代碼，我也嘗試過相關的列模型firstsortorder:'asc'命名爲lineNo，但它不起作用。

實際上，它大約有100條記錄。

jQuery.post(jqDataUrl, data, function(response) { 
    if(response != null) { 
    jQuery("#jqTable").jqGrid("GridUnload"); 
    jQuery("#jqTable").jqGrid({ 
     data: response.rowdata, 
     datatype: "local", 
     colNames: 
     [ 
     "", 
     "", 
     "", 
     "<spring:message code = "patron.transaction.number" />", 
     "<spring:message code = "sales.pdtType" />", 
     "<spring:message code = "sales.pdtDetails" />", 
     "<spring:message code = "patron.transaction.ticketID" />", 
     "<spring:message code = "sales.priceCat" />" , 
     "<spring:message code = "sales.priceClass" />", 
     "<spring:message code = "sales.unitPrice" />", 
     "<spring:message code = "sales.ticketType" />", 
     "<spring:message code = "sales.dateFulfilled" />", 
     "<spring:message code = "sales.lastStatus" />", 
     "<spring:message code = "patron.transaction.lastUpdated" />", 
     "<spring:message code = "generic.jqgrid.action" />" 
     ], 
     colModel: 
     [ 
     { name: "txnID", index: "txnID", width: 50,hidden:true, editable: true, align: "left" ,search:false,sortable:false}, 
     { name: "isReturned", index: "isReturned", width: 50,hidden:true, align: "left",title:false,search:false,sortable:false}, 
     { name: "description", index: "description", width: 50, align: "left",title:false,search:false,sortable:false}, 
     { name: "lineNo", index: "lineNo", width: 50, align: "left",title:false,search:false,sortable:false}, 
     { name: "pdtType", index: "pdtType", width: 100, align: "left",title:false,search:false,sortable:false}, 
     { name: "pdtDetails", index: "pdtDetails", width: 100, align: "left",title:false,search:false,sortable:false}, 
     { name: "ticketID", index: "ticketID", width: 100,key:true, align: "left",title:false,search:false,sortable:false}, 
     { name: "priceCat", index: "priceCat", width: 100, align: "left",title:false,search:false,sortable:false}, 
     { name: "priceClass", index: "priceClass", width: 100, align: "left",title:false,search:false,sortable:false}, 
     { name: "unitPrice", index: "unitPrice", width: 100, align: "left",title:false,search:false,sortable:false, 
      formatter:function (cellvalue, options, rowObject) { 
      if(cellvalue == null || cellvalue == "") { 
       return ""; 
      } else { 
       return "${userCurrency}"+parseFloat(cellvalue).toFixed(2); 
      } 
      } 
     }, 
     { name: "ticketType", index: "ticketType", width: 80, align: "left",title:false,search:false,sortable:false}, 
     { name: "dateFulFilled", index: "dateFulFilled", width: 80, align: "left",title:false,search:false,sortable:false}, 
     { name: "lastStatus", index: "lastStatus", width: 80, align: "left",title:false,search:false,sortable:false}, 
     { name: "lastUpdated", index: "lastUpdated", width: 80, align: "left",title:false,search:false,sortable:false}, 
     { name: 'action', index: 'action', width: 50, align: "center", sortable: false, search:false} 
     ], 
     autowidth: true, 
     height: 'auto', 
     grouping: true, 
     groupingView : { 
     groupField : ['description'], 
     groupColumnShow : [false, false], 
     groupText : ["<b>{0} </b>","<b>{0} </b>","<b>{0} </b>","<b>{0} </b>","<b>{0} </b>","<b>{0} </b>","<b>{0} </b>","<b>{0} </b>","<b>{0} </b>","<b>{0} </b>","<b>{0} </b>"], 
     groupCollapse : false, 
     groupOrder: ['asc', 'asc'], 
     }, 
     pager: jQuery("#jqTablePager"), 
     //rowNum: 10, 
     rowList: [10, 20, 30], 
     cmTemplate: { title: false }, 
     emptyrecords:"<spring:message code = 'generic.jqgrid.nosearchresults'/>", 
     jsonReader : {root: "rowdata", page: "page", total: "total", records: "records", repeatitems: false, id: "ticketID"}, 
     gridComplete: function() { 
     var grid = jQuery("#jqTable"); 
     var ids = grid.jqGrid('getDataIDs'); 
     for (var i = 0; i < ids.length; i++) { 
      var row = ids[i]; 
      var isReturned = grid.getCell(row, 'isReturned'); 
      if(isReturned=='true'){ 
       document.getElementById(row).style.backgroundColor='orange'; 
      } 
      var button = "<img class='icons' title='View Fee Details' src='<c:url value='/resources/img/view.png' />' onclick='viewFeeDetailPopup(" + row + ")'/> <img class='icons' title='View Ticket History' src='<c:url value='/resources/img/lookup2.png' />' onclick='viewTicketHistoryPopup(" + row + ")'/>"; 
      grid.jqGrid('setRowData', row, {action: button}); 
     } 
     } 
    }); 
    } else { 
    jQuery('#statusMsg').html("<fmt:message key="generic.jqgrid.noresponse"/>"); 
    } 
}); 

任何幫助表示讚賞和非常感謝！

Answer 1

我想你需要加sortname: "lineNo"選項到你的電網來修復你的主要問題。

您目前的代碼有一些其他小問題，可以改進。下面我列出一些小的（或不是很小的）建議。

首先，您需要遵循Limitations of grouping中使用的選項，並在網格中添加gridview: true選項。如果您使用當前版本的jqGrid，它會在內部修復問題，但我建議您明確添加該選項。

您應該刪除jsonReader選項，因爲在datatype: "local"的情況下它將被忽略。如果確實需要，可以使用localReader代替（請參閱the documentation）。

您通過一個列description分組（見groupingViewgroupField）。所以groupingView的所有其他陣列參數也應該有一個元素。目前，您使用groupColumnShow和groupOrder以及兩個元素和groupText以及11（!!!）元素。

您可以從網格中刪除hidden:true屬性（txnID,isReturned）的列。本地電網輸入data仍然持有全部屬性。因此，您可以使用var item = $("#jqTable").jqGrid("getLocalRow", rowid)和item包含全部屬性，例如，item.isReturned。 getLocalRow要比目前使用的getCell更有效。

您修改background-colorgridComplete裏面的一些行。這是無效的（緩慢工作）。使用rowattr來設置期間創建網格的期間更有效。請參閱the answer和this one。順便說一句，我會建議你使用loadComplete而不是gridComplete，如果你需要它。請參閱the answer。您應該使用pager: "#jqTablePager"而不是pager: jQuery("#jqTablePager")。由於jqGrid的代碼常見錯誤有一天發生了變化。現在，如果pager的值是jQuery包裝（如jQuery("#jqTablePager")），那麼jqGrid只是將其歸一化爲選擇器。它獲得元素的id並將pager: jQuery("#jqTablePager")修復爲pager: "#jqTablePager"。但爲什麼你需要首先搜索頁面的DOM元素id並找到DOM與id="jqTablePager"創建jQuery包裝到DOM元素（jQuery("#jqTablePager")）？這絕對是不必要的工作。你應該知道這一點，只需使用id選擇器的形式pager："#jqTablePager"。

使用setRowData在循環中改變action列中的每一行網格是慢慢的。每變化一個一個網格的元素跟隨迴流的頁面的所有元素。有關更多詳細信息，請參閱the answer和the article。更有效的是直接使用custom formatter創建action單元的正確內容。這是非常接近目前的一個最簡單的實現將是以下

{ name: 'action', width: 50, align: "center", sortable: false, search: false, 
    formatter: function (cellvalue, options) { 
     return "<img class='icons' title='View Fee Details' src='<c:url value='/resources/img/view.png' />' onclick='viewFeeDetailPopup(" + 
      options.rowId + ")'/> <img class='icons' title='View Ticket History' src='<c:url value='/resources/img/lookup2.png' />' onclick='viewTicketHistoryPopup(" + 
      options.rowId + ")'/>"; 
    }} 

的rowIdoptions參數的屬性爲您提供所需的信息。如果需要，您可以使用自定義格式化程序的第三個rowObject參數來訪問行項目的所有其他屬性。

順便說一句，你可以考慮刪除onclick從action列中添加的上述圖像和使用beforeSelectRow回調代替。請參閱the answer。您可以輕鬆修改代碼，以區分列內兩個不同的img。 e.target是被點擊的元素。例如$(e.target).attr("title")將在的情況下點擊第一個img，並且在點擊第二個img時將爲View Ticket History。

最後一句話。我建議你減少你使用的colModel。您應該刪除所有index屬性和所有屬性，其默認值爲align: "left"。您可以在cmTemplate中包含更多常用屬性。使用cmTemplate: {title: false, search: false, sortable: false}可以減少代碼並使其更具可讀性。列定義

{ name: "priceCat", index: "priceCat", width: 100, align: "left", 
    title: false, search: false, sortable: false} 

例如將減少到

{ name: "priceCat", width: 100 } 

的代碼會更小，更快速地加載的，更容易讀，易於維護。