的jqGrid亞格不工作時的負載一旦真正

$("#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); 
     } 
    } 
});

但是當我把它改爲loadonce = false，那麼亞格是工作，但我分頁和搜索功能不工作。的jqGrid亞格不工作時的負載一旦真正

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

來源

2017-08-29 preethi koochana

您應該發佈您使用的JavaScript代碼。很明顯，每件事都可以用正確和不正確的方式使用。人們必須知道更多關於使用情況的細節。此外，它是嚴格建議包括** jqGrid的版本**，您可以使用（可以使用）和叉（[免費jqGrid]（https://github.com/free-jqgrid/jqGrid），商業[Guriddo jqGrid JS]（http://guriddo.net/?page_id=103334）或舊版本的<= 4.7版本的jqGrid）。關於jqGrid的許多問題使用「free-jqgrid」標籤，但使用其他產品。 – Oleg

謝謝@oleg我正在使用的版本是Guriddo jqGrid JS 5.2.1 –

您可以在文本編輯器中打開文件'jquery.jqgrid.min.js'，並將註釋視爲文件的開頭（請參閱[here]（ https://github.com/tonytomov/jqGrid/blob/v5.2.1/js/grid.base.js#L4-L9））。它包含[URL]（http://guriddo.net/?page_id=103334），其中包含許可協議的描述以及您必須支付的**價格。換句話說，您使用目前的**商業**產品「Guriddo jqGrid JS」。我根據MIT或GPL許可證提供的名爲「free jqGrid」的替代產品**完全免費**。無論如何，你需要知道JavaScript代碼來幫助你。 – Oleg

我會說哇！您嘗試在一個網格中快速使用網格的所有屬性。

讓我們從頭開始。

網格選項

... 異步：真， ...

被放在錯誤的，也沒有效果。要使此選項有效，應將其放入ajaxGridOptions對象中。請參閱docs here，但說實話，ajax中的此選項默認爲true，因此不需要使用它。

網格中的代碼完全無效。與同樣的成功和更優雅的是使用rowattr event 這意味着你不需要使用getRowData和setRowData方法，只是爲了分析行並把適當的類。
我不確定你嘗試在onSelectRow中使用什麼。我建議你先禁用此事件，這會導致你的問題並顯示次網格行，你躲
選項滾動：1將無法正常工作，如果分組啓用分組：真

我首先建議你的是在網格中解決這些問題，然後讓我們知道是否有問題。

來源

2017-08-29 16:06:47

謝謝@Tony Tomov我已經完成了您所討論的更改。從代碼中刪除了async：true。我已對onSelectRow代碼塊進行了註釋，並取消隱藏了子網格行，並且還評論了scroll：1選項。但仍然面臨相同的問題子網格只有在loadoce：false.I想用loadonce：true的時候才工作。 –

你好，我測試了你的代碼，發現了一個bug，當分組，子網格和loadonce設置爲true時。我已經[修復了這個問題]（https://github.com/tonytomov/jqGrid/commit/ec1545543683093bfcc220fd50a20a4d85dcbed2）。直到發佈所做的更改後，您可以在所有代碼像這樣''setTimeout（function（）{$（「＃jqGrid」）。trigger（「reloadGrid」）;}，100）;' –

我的問題得到了解決。謝謝:) @Tony Tomov –

的jqGrid亞格不工作時的負載一旦真正

回答

相關問題