jqGrid sous-maille ne fonctionne pas lorsque la charge une fois vrai

Question

$("#jqGrid").jqGrid({ 
    url: "getJsonData", 
    async: true, 
    mtype: "GET", 
    datatype: "json", 
    colModel: [      
     { label: 'TESTID', name: 'testID', width: 60, sorttype: 'integer' , 
      colmenu : true, 
      coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true}, 
      searchoptions : { 
       searchOperMenu : false, 
       sopt : ['eq','gt','lt','ge','le'] 
      } 
     }, 
     { label: 'SUBTESTID', name: 'subTestID', width:80, sorttype: 'string' , 
      colmenu : true, 
      coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true}, 
      searchoptions : { 
       searchOperMenu : false, 
       sopt : ['eq','gt','lt','ge','le'] 
      } 
     }, 
     { label: 'CLIENT', name: 'client', width: 60, sorttype: 'string', 
      colmenu : true, 
      coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true}, 
      searchoptions : { 
       searchOperMenu : false, 
       sopt : ['eq','gt','lt','ge','le'] 
      } 
     }, 
     { label: 'RESULTS', name: 'testResults', width: 70, sorttype: 'string', 
      colmenu : true, 
      coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:true, freeze : true}, 
      searchoptions : { 
       searchOperMenu : false, 
       sopt : ['eq','gt','lt','ge','le'] 
      } 
     }, 
     { lable:"Seq Id", hidden:true, name: 'seqId' } 
    ], 
    loadComplete: function() { 
     var rowIds = $('#jqGrid').jqGrid('getDataIDs'); 
     for (i = 0; i < rowIds.length; i++) {//iterate over each row 
      rowData = $('#jqGrid').jqGrid('getRowData', rowIds[i]); 
      if (rowData['testResults'] === "Pass") { 
       $('#jqGrid').jqGrid('setRowData', rowIds[i], true, "CSSClass"); 
      } 
      if (rowData['testResults'] == "Fail") { 
       $('#jqGrid').jqGrid('setRowData', rowIds[i], true, "CSSClass1"); 
      } 
     } 
    }, 
    onSelectRow:function(rowid){ 
     var rowData = jQuery('#jqGrid').jqGrid('getRowData', rowid); 
     if (rowData['testResults'] == "Fail") { 
      console.log("clicked"); 
      $(this).jqGrid("toggleSubGridRow", rowid); 
     } 
    }, 
    subGrid: true, 
    subgridtype:"json", 
    subGridRowExpanded: function(subgrid_id, row_id) { 
     var rowData = jQuery('#jqGrid').jqGrid('getRowData', row_id); 
     console.log("rowData:::"+rowData); 
     var seqId=rowData['seqId']; 

     console.log(seqId) 
     subgrid_table_id = subgrid_id+"_t"; 
     pager_id = "p_"+subgrid_table_id; 
     $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class=' table2 scroll table-striped table' style='border: 1px solid #ccc;'></table>"); 
     jQuery("#"+subgrid_table_id).jqGrid({ 
      url:"getCommentsJsonData/"+seqId, 
      datatype: "json", 
      mtype: "GET", 
      height:'auto', 
      width: 1400, 
      colNames: ['File Name','Field Name','Actual Field Value ','Excpected Field Value'], 
      colModel: [ 
       {name:"fileName",index:"fileName"}, 
       {name:"fieldName",index:"fieldName"}, 
       {name:"actualFieldValue",index:"actualFieldValue"}, 
       {name:"excpectedFiledValue",index:"excpectedFiledValue"}, 
      ], 
      loadonce:true, 
      rowNum:20 
     }); 
    }, 
    loadonce: true, 
    //navOptions: { reloadGridOptions: { fromServer: true } }, 
    viewrecords: true, 
    width: 1390, 
    height: 300, 
    rowNum: 3000, 
    colMenu : true, 
    shrinkToFit : true,  
    grouping: true, 
    hoverrows:false, 
    groupingView: { 
     groupField: ["client"], 
     groupColumnShow: [true], 
     groupText: ["<b>{0}</b>"], 
     groupOrder: ["asc"], 
     groupSummary: [false], 
     groupCollapse: false    
    }, 
    scroll: 1, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records 
    emptyrecords: 'Scroll to bottom to retrieve new page', // the message will be displayed at the bottom 
    sortable: true, 
    caption: "ART TEST CASES RESULTS",// set caption to any string you wish and it will appear on top of the grid 
    pager: "#jqGridPager" 
}); 

$("#jqGrid").jqGrid("hideCol", "subgrid"); 

// activate the build in search with multiple option 
$('#jqGrid').navGrid("#jqGridPager", {   
     search: true, // show search button on the toolbar 
     add: false, 
     edit: false, 
     del: false, 
     refresh: true, 
    }, 
    {}, // edit options 
    {}, // add options 
    {}, // delete options 
    { multipleSearch: true } // search options - define multiple search 
); 
$('.colmenu').on('click',function(event){ 
    event.preventDefault(); 
}) 
// on chang select value change grouping 
jQuery("#chngroup").change(function(){ 
    var vl = $(this).val(); 
    if(vl) { 
     if(vl === "clear") { 
      jQuery("#jqGrid").jqGrid('groupingRemove',true); 
     } else { 
      jQuery("#jqGrid").jqGrid('groupingGroupBy',vl); 
     } 
    } 
});  

Quand je mets loadonce = true dans ma grille de sous ne fonctionne pas, mais quand je l'ai changé cela loadonce = false alors sous-grille fonctionne mais mon pagination et des fonctionnalités à la recherche ne fonctionnent pas.

$(document).ready(function(){ 
    $.jgrid.styleUI.Bootstrap.base.rowTable = " table1 table-bordered"; 
    var previousRowId = 0; 
    $("#jqGrid").jqGrid({ 
     url: "getJsonData", 
     async: true, 
     mtype: "GET", 
     datatype: "json", 
     colModel: [      
      { label: 'TESTID', name: 'testID', width: 60, sorttype: 'integer' , 
       colmenu : true, 
       coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true}, 
       searchoptions : { 
        searchOperMenu : false, 
        sopt : ['eq','gt','lt','ge','le'] 
       } 
      }, 
      { label: 'SUBTESTID', name: 'subTestID', width:80, sorttype: 'string' , 
       colmenu : true, 
       coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true}, 
       searchoptions : { 
        searchOperMenu : false, 
        sopt : ['eq','gt','lt','ge','le'] 
       } 
      }, 
      { label: 'CLIENT', name: 'client', width: 60, sorttype: 'string' , 
       colmenu : true, 
       coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true}, 
       searchoptions : { 
        searchOperMenu : false, 
        sopt : ['eq','gt','lt','ge','le'] 
       } 
      }, 
      { label: 'RESULTS', name: 'testResults', width: 70, sorttype: 'string' , 
       colmenu : true, 
       coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:true, freeze : true}, 
       searchoptions : { 
        searchOperMenu : false, 
        sopt : ['eq','gt','lt','ge','le'] 
       } 
      }, 
      { 
       lable:"Seq Id", 
       hidden:true, 
       name: 'seqId'    
      } 
     ], 
     loadComplete: function() { 
      var rowIds = $('#jqGrid').jqGrid('getDataIDs'); 
      for (i = 0; i < rowIds.length; i++) {//iterate over each row 
       rowData = $('#jqGrid').jqGrid('getRowData', rowIds[i]); 

       if (rowData['testResults'] === "Pass") {  
        $('#jqGrid').jqGrid('setRowData', rowIds[i], true, "CSSClass"); 
       } 
       if (rowData['testResults'] == "Fail") { 
        $('#jqGrid').jqGrid('setRowData', rowIds[i], true, "CSSClass1"); 
       } 
      } 
     }, 
     onSelectRow:function(rowid){ 
      var rowData = jQuery('#jqGrid').jqGrid('getRowData', rowid); 
      if (rowData['testResults'] == "Fail") { 
       console.log("clicked"); 
       $(this).jqGrid("toggleSubGridRow", rowid); 
      } 
     }, 
     subGrid: true, 
     subgridtype:"json", 
     subGridRowExpanded: function(subgrid_id, row_id) { 
      var rowData = jQuery('#jqGrid').jqGrid('getRowData', row_id); 
      console.log("rowData:::"+rowData); 
      var seqId=rowData['seqId']; 

      console.log(seqId) 
      subgrid_table_id = subgrid_id+"_t"; 
      pager_id = "p_"+subgrid_table_id; 
      $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class=' table2 scroll table-striped table' style='border: 1px solid #ccc;'></table>"); 
      jQuery("#"+subgrid_table_id).jqGrid({ 
       url:"getCommentsJsonData/"+seqId, 
       datatype: "json", 
       mtype: "GET", 
       height:'auto', 
       width: 1400, 
       colNames: ['File Name','Field Name','Actual Field Value ','Excpected Field Value'], 
       colModel: [ 
        {name:"fileName",index:"fileName"}, 
        {name:"fieldName",index:"fieldName"}, 
        {name:"actualFieldValue",index:"actualFieldValue"}, 
        {name:"excpectedFiledValue",index:"excpectedFiledValue"}, 
       ], 
       loadonce:true, 
       rowNum:20 
      }); 
     }, 
     loadonce: true, 
     //navOptions: { reloadGridOptions: { fromServer: true } }, 
     viewrecords: true, 
     width: 1390, 
     height: 300, 
     rowNum: 3000, 
     colMenu : true, 
     shrinkToFit : true,  
     grouping: true, 
     hoverrows:false, 
     groupingView: { 
      groupField: ["client"], 
      groupColumnShow: [true], 
      groupText: ["<b>{0}</b>"], 
      groupOrder: ["asc"], 
      groupSummary: [false], 
      groupCollapse: false    
     }, 
     scroll: 1, // set the scroll property to 1 to enable paging with scrollbar - virtual loading of records 
     emptyrecords: 'Scroll to bottom to retrieve new page', // the message will be displayed at the bottom 
     sortable: true, 
     caption: "ART TEST CASES RESULTS",// set caption to any string you wish and it will appear on top of the grid 
     pager: "#jqGridPager" 
    }); 

    $("#jqGrid").jqGrid("hideCol", "subgrid"); 

    // activate the build in search with multiple option 
    $('#jqGrid').navGrid("#jqGridPager", {   
      search: true, // show search button on the toolbar 
      add: false, 
      edit: false, 
      del: false, 
      refresh: true, 
     }, 
     {}, // edit options 
     {}, // add options 
     {}, // delete options 
     { multipleSearch: true } // search options - define multiple search 
    ); 
    $('.colmenu').on('click',function(event){ 
     event.preventDefault(); 
    }) 
    // on chang select value change grouping 
    jQuery("#chngroup").change(function(){ 
     var vl = $(this).val(); 
     if(vl) { 
      if(vl === "clear") { 
       jQuery("#jqGrid").jqGrid('groupingRemove',true); 
      } else { 
       jQuery("#jqGrid").jqGrid('groupingGroupBy',vl); 
      } 
     } 
    });  
}); 

Answer 1

Je vais dire wow !!! vous essayez d'utiliser rapidement toutes les propriétés de la grille dans une grille.

Partons du début.

1. L'option grille

   ... async: true, ...

est dérangée et il n'a pas d'effet. Pour avoir un effet, cette option doit être placée dans l'objet ajaxGridOptions. Voir docs here, mais pour être honnête cette option dans ajax est par défaut vrai, donc il n'y a pas besoin de l'utiliser.

2. Le code dans la grille est totalement inefficace. Avec le même succès et plus élégant est d'utiliser rowattr event Cela signifie que vous n'avez pas besoin d'utiliser les méthodes getRowData et setRowData et juste pour analyser la ligne et mettre la classe appropriée.

3. Je ne suis pas sûr de ce que vous essayez d'utiliser dans onSelectRow. Je vous suggère d'abord de désactiver cet événement, ce qui provoque vos problèmes et de montrer la ligne de sous-maille qui vous cachez

4. Le défilement de l'option: 1 ne fonctionnera pas si le regroupement est activé groupement: true

Ce que je vous suggère d'abord est de résoudre ces problèmes dans la grille et ensuite faites-nous savoir s'il y a un problème.