jquery - Jqgrid默认排序在Chrome中不起作用

Question

在Firefox & IE中，列表显示如预期，默认排序很好。并且No.列从1,2,3...升序显示

但是问题出在Chrome中，并且显示顺序不正确（请参见下面的屏幕截图）


下面是我的代码，我也尝试了名为lineNo的相关列模型的firstsortorder:'asc'，但它不起作用。

实际上，总共约有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进行分组（请参见groupField中的groupingView）。因此groupingView的所有其他数组参数也应具有一个元素。当前，您将groupColumnShow和groupOrder与两个元素一起使用，并将groupText与11（!!!）元素一起使用。

您可以从网格中删除具有hidden:true属性（txnID，isReturned）的列。本地网格的输入data仍保留所有属性。因此，您可以使用var item = $("#jqTable").jqGrid("getLocalRow", rowid)，并且item包含所有属性，例如item.isReturned。 getLocalRow比您当前使用的getCell更有效。

您修改background-color中某些行的gridComplete。这是无效的（工作缓慢）。更有效的方法是在创建网格时使用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"。但是，为什么首先需要通过id搜索页面的DOM元素并使用id="jqTablePager"查找DOM，然后为DOM元素（jQuery("#jqTablePager")）创建jQuery包装器呢？这绝对是不需要的工作。您应该知道这一点，并且始终以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 + ")'/>";
    }}

rowId参数的 options属性为您提供必需的信息。如果需要，您可以使用自定义格式化程序的第三个 rowObject参数来访问行项目的所有其他属性。

顺便说一下，您可以考虑从上述 onclick列中添加的图像中删除 action，而改用 beforeSelectRow回调。请参见 the answer。您可以轻松地修改代码，以区分列内的两个不同的 img。 e.target是单击的元素。例如，如果单击第一个img，则 $(e.target).attr("title")将为 "View Fee Details"；单击第二个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 }

该代码将更小，加载更快，更易于阅读，易于维护。