Jquery JQGrid：根据某个键对子网格值进行排序

我有一个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'});

更新

在我的内部网格中，我尝试了下面的代码，但没有效果

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

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

---

通常，如果需要实现自定义排序顺序，使用

sorttype

as函数的方法是正确的。问题只是在子网格中使用了

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

在哪里

看。您的主要问题可能是仅拥有已排序的项目，而不是自定义排序的项目。在这种情况下，您可以删除

sorttype

函数，并且在使用

datatype:'local'

时，您将使用按字母顺序排序的名称

---

值得一提的是，我在您的原始代码中通过添加其他选项修复了一个更重要的问题。首先我添加了

gridview:true

以提高性能，第二个我添加了

idPrefix:'s'+行id+'.'

选项。演示中的代码没有为网格行定义任何

id

。所以主网格的行有ID:1，2。。。子网格也没有定义

id

。因此，如果要打开原始网格中的第一个子网格和第二个子网格，则至少有三个id副本：在主网格和所有子网格中是id相同的行1、2、。。。可以使用

idPrefix

来解决此问题。例如，在固定网格中，您现在可以在每个子网格中选择一行，在主网格中选择一行，而不存在任何冲突。

感谢您通过演示给出的答案。我在

$（文档）中复制了您的全部代码。准备好了

到我的项目中，但它没有排序。。我可能哪里出错了？@AbhishekSimon:你应该在调试器中检查页面：可能一些变量，如

orderOfEBFSubCategory

未定义。您可以使用F12启动IE开发工具，选择“脚本”选项卡并单击“开始调试”。您可以在

var order=$.inArray（value，orderOfEBFSubCategory）上设置断点行，并验证在打开子网格时将调用
sorttype
。所以应该对子网格进行排序。您可以在我的演示和代码中重复相同的步骤。我希望你能在途中发现问题。
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"
    ];