JQGrid: Сортировка значений подсетей на основе некоторого ключа

Question

У меня есть jqGrid с подсетой. Я хочу отсортировать субграду, чтобы важные детали отображались в отсортированном порядке внутри подсери.

упорядоченном: EBFNUM, версия & 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 для строк сетки. Таким образом, строки основной сетки имеют идентификаторы: 1, 2, ... Субгриды также не определены id. Итак, если вы откроете первую и вторую субгриды в своей исходной сетке, у вас будет не менее трех дубликатов id: в основной сетке и во всех субгридах были строки с одинаковыми идентификаторами 1, 2, ... может для решения проблемы. В фиксированной сетке теперь вы можете, например, выбрать строку в каждой подсетей и одну в основной сетке без каких-либо конфликтов.