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

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

ОБНОВЛЕНИЕ

Я пробовал что-то вроде приведенного ниже кода, внутри моей внутренней сетки, но безрезультатно

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"
    ];

См. демо .Возможно, ваша основная проблема заключалась в том, чтобы просто иметь отсортированные элементы, а не пользовательские отсортированные элементы.В случае, если вы можете удалить функцию sorttype и у вас будут отсортированные по алфавиту имена, в случае использования datatype: 'local'.

Важно отметить, что я исправил в вашем исходном коде еще одну важную проблему, добавив дополнительныеопции.Сначала я добавил gridview: true для улучшения производительности, а второй я добавил idPrefix: 's' + row_id + '_' вариант.Код из демоверсии не определил id для строк сетки.Таким образом, строки основной сетки имеют идентификаторы: 1, 2, ... Для подсетей также не определено id.Таким образом, если вы откроете первую и вторую подсетки в исходной сетке, у вас будет как минимум три дубликата идентификатора : в основной сетке и во всех подсетях будут строки с одинаковыми идентификаторами 1, 2, ... idPrefix может быть использовано для решения проблемы.В фиксированной сетке теперь можно, например, выбрать строку в каждой подсети и одну в основной сетке без каких-либо конфликтов.