Question

尝试使用自定义排序对网格进行排序。我正在使用动态列和数据构建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消息也不正确排序。但是，如果我通过单击其标题按ipDecimal排序sorttype为'int'，它可以正常工作。我唯一能想到的是sorttype函数本身的双引号。如果您在此处看到任何其他问题，请告知我们，或者解决此案例的最佳方法是什么。这是我构建json函数的片段：

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

但是我明白了 Sorting randomly by custom sort function 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);}"},

Answer 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"
}

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

1 个答案: