无法使用 sorttype 函数对 jqGrid 列进行排序答案

【问题标题】：Unable to sort jqGrid column with sorttype function无法使用 sorttype 函数对 jqGrid 列进行排序
【发布时间】：2015-04-14 20:53:34
【问题描述】：

尝试使用自定义排序对网格进行排序。我正在使用动态列和数据构建 jqgrid。除了对其中一列进行排序外，一切都运行良好。我正在使用 javax.json 来构建 json，我正在使用 jqgrid 4.7.0。这是网格代码：

var resultsGrid = $("#resultsGrid");
var url = "grid/GridDataController?action=runSearch&searchText="+getSearchText()+"&_ts"+$.now();
var csvUrl = "grid/GridDataController?action=downloadCsv&_ts"+$.now();
var gridPagerId="#resultsPager";

var drawSearchResultsGrid = function(colNames,colModel,data) {
    resultsGrid.disableSelection(); //disales highlioghting cells outside selection like ghosting.
    resultsGrid.jqGrid({
        url: url,
        datatype: 'jsonstring',
        loadonce: true,
        mtype: "GET",
        height: 300,
        width: 700,
        colNames: colNames,
        colModel: colModel,
        datastr : data,
        rowNum: 100000,
        sortname: "invid",
        sortorder: "asc",
        rownumbers: true,
        viewrecords: true,
        pager: gridPagerId, 
        pginput : false,
        pgbuttons : false,
        viewrecords : false,
        gridview: true,
        autoencode: true,
        onSelectRow : function(id) {
            logMessage("row selected ["+id+"]");
        },
        loadComplete: function(data) {
            logMessage("load completed");
        },
        ondblClickRow : function(rowid) {
            logMessage("Double clicked");
            $(escapeColon("#contentForm:viewPropertiesButton")).click();
        }
    }); 
    // Set navigator with search enabled.
    resultsGrid.jqGrid('navGrid',gridPagerId,{add:false,edit:false,del:false,search:false,refresh:false});

    // add custom button to export the data to excel
    resultsGrid.jqGrid('navButtonAdd',gridPagerId,{
           caption:"Export", 
           onClickButton : function () { 
               resultsGrid.jqGrid('excelExport',{"url":csvUrl});
           } 
    });
}; //end drawResultGrid function

//get grid config...
$.ajax({
   type: "GET",
   url: url,
   data: "",
   dataType: "json",
    success: function(response)
    {
       if (response.result == "0")
       {
           logMessage("Drawing results grid...");
            drawSearchResultsGrid(response.colNames,response.colModel,response.data);
            resizeGrid();
           logMessage("Results grid drawing done.");
       }
       else
       {
           logMessage("Error : " + response.message);
           alert(response.message);
       }
    },
    error: function(x, e)
    {
         alert(x.readyState + " "+ x.status +" "+ e.msg);   
    }
});

这是我的动态 colModel 的样子：

  {
    "result":"0",
    "message":"",
    "data":{
    "records":18,
    "total":1,
    "page":"1",
    "rows":[ ]
    },
    "colNames":[
    "IP Address/Cidr",
    "Name",
    "IP Decimal",
    "Cidr"
    ],
    "colModel":[
    {
      "name":"adressCidr",
      "width":50,
      "sortable":true,
      "hidden":false,
      "sorttype":"function (cellValue,rowObject) {    console.log('sorting by ['+rowObject.ipDecimal+']');    return parseInt(rowObject.ipDecimal,10);}"
    },
    {
      "name":"name",
      "width":50,
      "sortable":true,
      "hidden":false
    },
    {
      "name":"ipDecimal",
      "width":50,
      "sortable":true,
      "hidden":false,
      "sorttype":"int"
    },
    {
      "name":"cidr",
      "width":0,
      "sortable":false,
      "hidden":true
    }
]
  }

ipDecimal 是一个隐藏列，但我显示它是为了进行测试。要求是第一列“addressCidr”是一个字符串列，但我想使用隐藏的 ipDecimal 列对其进行排序。该函数既不显示 console.log 消息，也不正确排序。但是，如果我通过单击其标题以 sorttype 为“int”的 ipDecimal 进行排序，则它可以正常工作。我唯一能想到的是围绕 sorttype 函数本身的双引号。如果您在这里看到任何其他问题，或者解决此案例的最佳方法是什么，请告诉我。这是我构建json函数的sn-p：

private JsonObjectBuilder createColumn(JsonBuilderFactory factory,
        String name,int width,boolean sortable,boolean hidden,boolean sorttype)
{
    JsonObjectBuilder column =this.createColumn(factory, name, width, sortable, hidden);
    StringBuilder fnBuilder = new StringBuilder("");

    //this is not generic but can easily be made one :(

    fnBuilder.append("function (cellValue,rowObject) {");
    fnBuilder.append("    console.log('sorting by ['+rowObject.ipDecimal+']');");
    fnBuilder.append("    return parseInt(rowObject.ipDecimal,10);");
    fnBuilder.append("}");

    column.add("sorttype", fnBuilder.toString()); // this works, not sure why above function does not work :(
    return column;
}

private JsonObjectBuilder createColumn(JsonBuilderFactory factory,
        String name,int width,boolean sortable,boolean hidden)
{
    JsonObjectBuilder column;
    column = factory.createObjectBuilder();
    column.add("name", name);
    column.add("width", width);
    column.add("sortable", sortable);
    column.add("hidden", hidden);
    return column;
}

我用于测试的数据是：

  IpAddressCidr ipDecimal
  5.1.0.0/24--83951616
  5.1.1.0/24--83951872
  5.1.2.0/24--83952128
  5.1.3.0/24--83952384
  5.1.4.0/24--83952640
  5.3.0.0/24--84082688
  5.9.2.0/24--84476416
  6.0.0.0/24--100663296
  6.0.1.0/24--100663552
  6.0.2.0/24--100663808
  6.0.3.0/24--100664064
  6.0.4.0/24--100664320
  6.0.5.0/24--100664576
  7.1.0.0/24--117506048
  7.1.1.0/24--117506304
  7.1.2.0/24--117506560
  7.1.3.0/24--117506816
  198.186.198.0/24--3334129152

但这是我看到的 Ip 198.186.198.0 应该出现在顶部，因为它具有最高的 ipDecimal，但它被推到了底部。

添加更多测试信息。如果我删除封闭的双引号，排序可以正常工作，但不能使用它。以下作品：

 { name: "adressCidr", width:50, sortable: true,
            sorttype: function (cellValue,rowObject) {  console.log('sorting by ['+rowObject.ipDecimal+']');return parseInt(rowObject.ipDecimal,10);}},

以下没有：

            { name: "adressCidr", width:50, sortable: true,
            sorttype: "function (cellValue,rowObject) {  console.log('sorting by ['+rowObject.ipDecimal+']');return parseInt(rowObject.ipDecimal,10);}"},

【问题讨论】：

您将sorttype 定义为字符串而不是函数。这是你问题的根源。我建议您使用列模板。如果您有实施问题，我可以写下答案。
谢谢奥列格。我同意，但我使用 json api 动态生成它，请让我知道删除这些双引号的最佳方法是什么。我正在使用 java.json api 来生成 colModel。我是否可能会更改 grid.base.js 以从 sorttype 函数中删除双引号？
能否包含用于填充网格的测试数据？
我也尝试过使用模板，但不幸的是，当返回模板名称时，json引擎将模板名称包装在双引号中并且模板不起作用。它在未封闭时工作。在我找到解决方案之前一直坚持下去。
我用 hack 搞定了。不确定这是否好。我将模板设置为 var ipAddressSortTemplate= {sorttype: function (cellValue,rowObject) { return parseInt(rowObject.ipDecimal,10); } } 在 java 代码中，我正在添加临时变量 addTemplate 像这样。 column.add("addTemplate", "ipAddressSortTemplate").

标签： javascript jquery sorting jqgrid

【解决方案1】：

您的问题的原因是使用了sorttype，您将其定义为字符串而不是函数：

{
    "name":"adressCidr",
    "width":50,
    "sortable":true,
    "hidden":false,
    "sorttype":"function (cellValue,rowObject) {    console.log('sorting by ['+rowObject.ipDecimal+']');    return parseInt(rowObject.ipDecimal,10);}"
}

您使用包含我建议的新功能的 jqGrid 4.7（请参阅here）。所以你可以包含这样的代码

$.extend($.jgrid, {
    cmTemplate: {
        myIpAddress: {
            sorttype: function (cellValue, rowObject) {
                console.log('sorting by [' + rowObject.ipDecimal + ']');
                return parseInt(rowObject.ipDecimal, 10);
            },
            width: 50
        }
    }
});

现在您可以将服务器返回的数据更改为

{
    "name":"adressCidr",
    "sortable":true,
    "hidden":false,
    "template":"myIpAddress"
}

【讨论】：

酷。谢谢奥列格。现在，这比我的 hack 修复要干净得多:-)。再次感谢。