JQGrid: Sortieren von Untergitter-Werten basierend auf einem Schlüssel

Question

Ich habe ein jqGrid mit einem Untergitter. Ich möchte das Subgrid so sortieren, dass wichtige Details im Subgrid sortiert angezeigt werden.

sortierter Reihenfolge: EBFNUM, VERSION & APPLIEDDATETIME

Unten ist ein Bildschirm Schuss

Optional: Der Filter arbeitet für elementName, isPresentinXml1 & isPresentinXml2. Gibt es trotzdem den gleichen Filter kann für name, firstValue & secondValue (Subgrid-Spalten) arbeiten?

-Code für das Netz

_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 Antwort

{ 
    "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

habe ich versucht, so etwas wie Code unten, in meinem inneren Gitter, hat aber keine Wirkung

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

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

Answer 1

Im Allgemeinen ist der Ansatz mit der Verwendung von sorttype als Funktion der richtige Weg, wenn Sie benutzerdefinierte Sortierreihenfolge implementieren müssen. Das Problem ist nur, dass Sie datatype: 'jsonstring' und datastr im Subgrid verwendet haben. Es ist wichtig zu verstehen, dass die Daten von datastr als bereits sortiert interpretiert werden. Wenn Sie nicht sortierte Daten haben, sollten Sie stattdessen datatype: 'local' verwenden. Der Parameter jsonReader sollte in diesem Fall entfernt werden. So sollte der Code von subgrid sein wie

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 
}); 

wo

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

the demo See. Es kann sein, dass Ihr Hauptproblem nur sortierte Artikel und nicht benutzerdefinierte sortiert Artikel war. In dem Fall können Sie sorttype Funktion entfernen und Sie werden alphabetisch sortierte Namen im Falle der Verwendung datatype: 'local' haben.

Es ist wichtig zu erwähnen, dass ich in Ihrem ursprünglichen Code ein weiteres wichtiges Problem durch Hinzufügen zusätzlicher Optionen behoben habe. Zuerst fügte ich gridview: true hinzu, um die Leistung zu verbessern, und die Sekunde, die ich idPrefix: 's' + row_id + '_' Wahl hinzufügte. Sie codieren von der Demo keine id für die Gitterzeilen definiert. Die Zeilen des Hauptgitters haben also folgende IDs: 1, 2, ... Die Subgrids haben auch keine id definiert. Wenn Sie also das erste und das zweite Teilgitter in Ihrem ursprünglichen Raster geöffnet hätten, hätten Sie mindestens drei ID-Duplikate: im Hauptraster und in allen Teilrastern waren die Zeilen mit den gleichen IDs 1, 2, ... Die idPrefix können verwendet werden, um das Problem zu lösen. Im festen Raster können Sie nun z. B. die Zeile in jedem Untergitter und eins im Hauptgitter ohne Konflikte auswählen.