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可以用來解決問題。現在，您可以在固定網格中選擇每個子網格中的行和主網格中的一個，而不會產生任何衝突。