JQGrid：根据某个键排序子网格值

Question

我有一个带有子网格的jqGrid。我想排序子网格，以便在子网格内按照排序顺序显示重要细节。

排序顺序：EBFNUM，VERSION & APPLIEDDATETIME

下面是一个屏幕截图

可选：过滤器适用于elementName，isPresentinXml1 & isPresentinXml2。反正有没有相同的过滤器可以工作name，firstValue & secondValue（子网格列）？

代码电网

_starHeader="infa9 windowsss"; 
_header1="infa9_windowss"; 
grid = jQuery("#ebfList"); 
      grid.jqGrid({ 
       datastr : compareEBFData, 
       datatype: 'jsonstring', 
       colNames:['EBF','',_starHeader, _header1], 
       colModel:[ 
        {name:'elementName',index:'elementName', width:188}, 
        {name:'subCategory',index:'subCategory',hidden:true, width:1}, 
        {name:isPresentinXml1,index:isPresentinXml1, width:270, align:'center', formatter: patchPresent}, 
        {name:isPresentinXml2,index:isPresentinXml2, width:270, align:'center', formatter: patchPresent} 
       ], 
       pager : '#ebfGridpager', 
       rowNum:60, 
       rowList:[60,120,240], 
       scrollOffset:0, 
       height: 'auto', 
       autowidth:true, 
       viewrecords: false, 
       gridview: true, 
       loadonce:true, 

       jsonReader: { 
        repeatitems: false, 
        page: function() { return 1; }, 
        root: "response" 
       }, 
       subGrid: true, 
       // define the icons in subgrid 
       subGridOptions: { 
        "plusicon" : "ui-icon-triangle-1-e", 
        "minusicon" : "ui-icon-triangle-1-s", 
        "openicon" : "ui-icon-arrowreturn-1-e", 
        //expand all rows on load 
        "expandOnLoad" : false 
       }, 

       loadComplete: function() { 
        if (this.p.datatype !== 'local') { 
         setTimeout(function() { 
          grid.trigger('reloadGrid'); 
         }, 0); 
        } else { 
         $("#compareEBFDiv").show();       
        } 
       }, 

       subGridRowExpanded: function(subgrid_id, row_id) { 
        var subgrid_table_id, pager_id, iData = -1; 
        subgrid_table_id = subgrid_id+"_t"; 
        $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' style='overflow-y:auto' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>"); 

        $.each(compareEBFData.response,function(i,item){ 
         if(item.id === row_id) { 
          iData = i; 
          return false; 
         } 

        }); 
        if (iData == -1) { 
         return; // no data for the subgrid 
        } 

        jQuery("#"+subgrid_table_id).jqGrid({ 
         datastr : compareEBFData.response[iData], 
         datatype: 'jsonstring', 
         colNames: ['Name','Value1','Value2'], 
         colModel: [ 
          {name:"name",index:"name",width:70}, 
          {name:firstValue,index:firstValue,width:100}, 
          {name:secondValue,index:secondValue,width:100} 
         ], 
         rowNum:10, 
         //pager: pager_id, 
         sortname: 'name', 
         sortorder: "asc", 
         height: 'auto', 
         autowidth:true, 
         jsonReader: { 
          repeatitems: false, 
          //page: function() { return 1; }, 
          root: "attribute" 
         } 
        }); 

        jQuery("#"+subgrid_table_id).jqGrid('navGrid',{edit:false,add:false,del:false}); 
       } 
      }); 

      grid.jqGrid('navGrid', '#ebfGridpager', { search: false, refresh: false }); 
      grid.jqGrid('navButtonAdd',"#ebfGridpager",{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s', 
       onClickButton:function(){ 
        grid[0].toggleToolbar(); 
       } 
      }); 
      grid.jqGrid('navButtonAdd',"#ebfGridpager",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh', 
       onClickButton:function(){ 
        grid[0].clearToolbar(); 
       } 
      }); 
      grid.jqGrid('filterToolbar', 
        {stringResult: true, searchOnEnter: false, defaultSearch: 'cn'}); 

JSON响应

{ 
    "response": [ 
    { 
     "id": "1", 
     "elementName": "EBF262323", 
     "category": "Product", 
     "subCategory": "EBFINFO", 
     "isEqual": false, 
     "isPrasentinXml1": true, 
     "isPrasentinXml2": true, 
     "isPrasentinXml3": false, 
     "attribute": [ 
     { 
      "name": "APPLIEDDATETIME", 
      "firstValue": "Mon Sep 05 11:12:32 IST 2011", 
      "secondValue": "Mon Sep 05 11:12:32 IST 2011" 
     }, 
     { 
      "name": "VERSION", 
      "firstValue": "9.1.0", 
      "secondValue": "9.1.0" 
     }, 
     { 
      "name": "EBFNUM", 
      "firstValue": "EBF262323", 
      "secondValue": "EBF262323" 
     } 

     ] 
    }, 
    { 
     "id": "2", 
     "elementName": "EBF99993", 
     "category": "Product", 
     "subCategory": "EBFINFO", 
     "isEqual": false, 
     "isPrasentinXml1": true, 
     "isPrasentinXml2": true, 
     "isPrasentinXml3": false, 
     "attribute": [ 
     { 
      "name": "APPLIEDDATETIME", 
      "firstValue": "Mon Sep 09 11:12:32 IST 2012", 
      "secondValue": "Mon Sep 09 11:12:32 IST 2012" 
     }, 
     { 
      "name": "VERSION", 
      "firstValue": "9.1 HF2", 
      "secondValue": "9.1 HF2" 
     }, 
     { 
      "name": "EBFNUM", 
      "firstValue": "EBF99993", 
      "secondValue": "EBF99993" 
     } 
     ] 
    } 
    ], 
    "xls_path": "/files/modifiedServices.xls" 
} 

UPDATE

我试图像下面的代码，我内心的网格内，但没有效果

var orderOfEBFSubCategory = [ 
    "EBFNUM", 
    "PRODUCT", 
    "VERSION" 
]; 

{name:"name",index:"name",width:70, 
           sorttype: function (value) { 
            var order = $.inArray(value, orderOfEBFSubCategory); 
            return order; 
           }}, 

Answer 1

通常，如果您需要实施自定义排序顺序，则使用sorttype作为函数的方法是正确的方法。问题仅在于您在子网格中使用了datatype: 'jsonstring'和datastr。重要的是要明白，来自datastr的数据将被解释为已经排序的。如果你有没有分类的数据，你应该使用datatype: 'local'。在案件中应删除jsonReader参数。所以子网格的代码应该像

jQuery("#" + subgrid_table_id).jqGrid({ 
    data: compareEBFData.response[iData].attribute, 
    datatype: 'local', 
    gridview: true, 
    idPrefix: 's' + row_id + '_', 
    colNames: ['Name', 'Value1', 'Value2'], 
    colModel: [ 
     {name: "name", index: "name", width: 70, 
      sorttype: function (value) { 
       var order = $.inArray(value, orderOfEBFSubCategory); 
       return order; 
      }}, 
     {name: firstValue, index: firstValue, width: 100}, 
     {name: secondValue, index: secondValue, width: 100} 
    ], 
    rowNum: 10, 
    sortname: 'name', 
    sortorder: "asc", 
    height: 'auto', 
    autowidth: true 
}); 

其中

var orderOfEBFSubCategory = [ 
     "EBFNUM", 
     "VERSION", 
     "APPLIEDDATETIME" 
    ]; 

见the demo。它可以是你的主要问题是只有排序项目而不是自定义排序项目。在这种情况下，您可以删除sorttype函数，并且在使用datatype: 'local'的情况下，您将有字母排序的名称。

重要的是要提到，我通过添加附加选项来修复原始代码中的一个更重要的问题。首先，我添加了gridview: true以提高性能，第二个我添加了idPrefix: 's' + row_id + '_'选项。您从演示代码中未定义网格行的任何id。因此，主网格的行具有ID：1,2，...子网格也没有定义id。所以如果你打开第一个和第二个子网格在你的原始网格中，你有至少有三个ID重复：在主网格和所有子网格中是具有相同ID的行1,2，... idPrefix可以用来解决问题。现在，您可以在固定网格中选择每个子网格中的行和主网格中的一个，而不会产生任何冲突。