Jqgrid mostra "Loading" in IE9 quando gridview è impostato su true

Question

La mia griglia funziona bene in firefox e chrome ma mostra l'icona "Loading" in IE9 quando gridview è impostato su true. Questo sta usando jqgrid 4.7.0

var setGrid = $("#recordSetsGrid"); 
var gridView=false; //setting this to true in IE9 causes grid not to show with only message 'Loading'. 

setGrid.jqGrid(
     { 
      ajaxGridOptions: {cache: false}, 
      url : getUrlContext()+loadUrl, 
      postData : { 
       searchText : function() { 
        return $("#" + setSearchTextId) 
          .val(); 
       } 
      }, 
      datatype : "json", 
      editurl : setGrid_editUrl, 
      colNames : ["","Record Set", "Origin", 
        "Origin", "Organization", 
        "Sharing", "Active?", 
        "Comments" ], 
      editCaption : "Edit Record Set", 
      colModel : [ 
        { 
         name : "crud", 
         width : 10, 
         fixed : true, 
         editable : false, 
         search : false 
        }, 
        { 
         name : "recordSet", 
         width : 65, 
         fixed : true, 
         editable : false, 
         search : false 
        }, 
        { 
         name : "origin", 
         width : 90, 
         editable : true, 
         hidden : true, 
         editrules : { 
          required : false, 
          edithidden : true 
         }, 
         search : true, 
         editoptions : { 
          size : "30" 
         } 
        }, 
        { 
         name : "domainName", 
         width : 90, 
         editable : false, 
         search : true, 
         searchoptions : { 
          caption : "Search in record sets", 
          sopt : [ 'cn' ] 
         }, 
         formatter : originFormatter, 
         editrules : { 
          required : true, 
          edithidden : false 
         } 
        }, 
        { 
         name : "org", 
         width : 80, 
         align : "left", 
         editable : true, 
         search : false, 
         formatter : orgFormatter, 
         editoptions : { 
          value : orgChoices 
         }, 
         edittype : "select", 
        }, 
        { 
         name : "sharing", 
         width : 65, 
         fixed : true, 
         align : "left", 
         editable : true, 
         search : false, 
         editoptions : { 
          value : sharingChoices 
         }, 
         edittype : "select", 
        }, 
        { 
         name : "active", 
         width : 45, 
         fixed : true, 
         align : "center", 
         editable : true, 
         search : false, 
         edittype : "checkbox", 
         editoptions:{value:"Yes:No", defaultValue: "Yes"}  
        }, 
        { 
         name : "comments", 
         width : 80, 
         align : "left", 
         editable : true, 
         search : false, 
         editoptions : { 
          size : "60" 
         } 
        } ], 
      pager : "#recordSetsGridPager", 
      gridview: gridView, 
      rowNum : getRecordSetInitialPageSize(), 
      rowList : getRecordSetPageSizes(), 
      sortname : "origin", 
      sortorder : "desc", 
      viewrecords : true, 
      autoencode : true, 
      rownumbers: true, 
      height : 100, 
      width : 700, 
      multiselect : false, 
      caption : "Record Sets", 
      onSelectRow : function(ids) 
      { 
       var rowData = setGrid.jqGrid("getRowData",ids); 
       var origin=rowData["domainName"]; 
       var caption="Resource Records: "+ origin; 
       if (ids == null) { 
        ids = 0; 
        if (jQuery("#recordsGrid").jqGrid('getGridParam','records') > 0) { 
         recGrid.jqGrid('setGridParam',{url:getUrlContext()+"" + 
           "/ZoneEditManaged.action?_eventName=getResourceRecords&isInit",page:1}); 
         //recGrid.jqGrid('setCaption',caption).trigger('reloadGrid'); 
         recGrid.trigger('reloadGrid'); 
        } 
       } else { 
        recGrid.jqGrid('setGridParam',{url:getUrlContext()+ 
         "/ZoneEditManaged.action?_eventName=getResourceRecords&&isInit=1",page:1}); 
         //"/ZoneEditManaged.action?_eventName=getResourceRecords&&isInit=1&setId="+ids,page:1}); 
        //recGrid.jqGrid('setCaption',caption).trigger('reloadGrid'); 
        recGrid.trigger('reloadGrid'); 
       } 

       $("#captionOriginId").html(origin); 

       //drawResourceRecordSearchBox(recGrid,caption); 
      }, 
      ondblClickRow : function(rowid) { 
       var p = setGrid[0].p; 
       if (p.selrow !== rowid) { 
        grid.jqGrid('setSelection', 
          rowid); 
       } 
       setGrid.jqGrid('editGridRow', 
         rowid, editProps); 
      }, 
      loadComplete : function() { 
       logMessage("In recordSetsGrid load complete"); 
       applyContextMenu(); 
       highlightFilteredData.call(this,setSearchTextId); 
      }, 
      loadError : function(jqXHR, textStatus, 
        errorThrown) { 
       handleAjaxError(jqXHR, textStatus, 
         errorThrown); 
      } 
     }).navGrid('#recordSetsGridPager', { 
    add : true, 
    edit : true, 
    del : true, 
    search : false 
}, editProps, addProps, delProps); 

Se cambio grigliaView = false, funziona bene in IE9. Avrò una grande quantità di dati in questa griglia, quindi leggo che gridView = true accelera le prestazioni in caso di dati di grandi dimensioni. È apprezzata qualsiasi idea per far funzionare gridView in IE9.

Grazie

Answer 1

Dopo i vostri commenti alla vostra domanda capisco il problema. Il motivo del problema è il bug in jqGrid. Esso utilizza firstElementChild (vedi the lines) Proprietà:

} else { 
    //$("#"+$.jgrid.jqID(ts.p.id)+" tbody:first").append(rowData.join('')); 
    ts.firstElementChild.innerHTML += rowData.join(''); // append to innerHTML of tbody which contains the first row (.jqgfirstrow) 
    ts.grid.cols = ts.rows[0].cells; // update cached first row 
} 

Ho sistemato il bug qualche tempo prima in my fork di jqGrid (vedi the lines attualmente):

} else if (self.firstElementChild) { 
    self.firstElementChild.innerHTML += rowData.join(''); // append to innerHTML of tbody which contains the first row (.jqgfirstrow) 
    self.grid.cols = self.rows[0].cells; // update cached first row 
} else { 
    // for IE8 for example 
    $tbody.html($tbody.html() + rowData.join('')); // append to innerHTML of tbody which contains the first row (.jqgfirstrow) 
    self.grid.cols = self.rows[0].cells; // update cached first row 
} 

così posso suggerire di fare le stesse modifiche in jquery.jqGrid.src.js o per scaricare i file modificati jquery.jqGrid.src.js, jquery.jqGrid.min.js e jquery.jqGrid.min.map da my repository (vedere la cartella js). Dovrei avvisarti che il codice è in sviluppo stadio e ho intenzione di pubblicare la prima versione nel prossimo mese, ma il codice corrente è stabile e contiene molte altre correzioni che ho trovato e alcune nuove funzionalità (descritte a breve nel readme) .

AGGIORNATO: Il codice di cui sopra, che risolve il problema sono ottenere da il mio nuovo codice, in modo che contenga self e $tbody definito sopra nel mio codice. Se si desidera modificare il codice di jqGrid 4.7 è possibile utilizzare

} else if (ts.firstElementChild) { 
    ts.firstElementChild.innerHTML += rowData.join(''); 
    ts.grid.cols = ts.rows[0].cells; 
} else { 
    // use for IE8 for example 
    var $tbody = $(ts.tBodies[0]); 
    $tbody.html($tbody.html() + rowData.join('')); 
    ts.grid.cols = ts.rows[0].cells; 
} 

aggiornato 2: Il codice attuale del frammento di sguardo jqGrid libero come il seguente

if (p.treeGrid === true && fpos > 0) { 
    $(self.rows[fpos]).after(rowData.join("")); 
} else if (p.scroll) { 
    $tbody.append(rowData.join("")); 
} else if (self.firstElementChild == null || (document.documentMode != undefined && document.documentMode <= 9)) { 
    // for IE8 for example 
    $tbody.html($tbody.html() + rowData.join("")); // append to innerHTML of tbody which contains the first row (.jqgfirstrow) 
    self.grid.cols = self.rows[0].cells; // update cached first row 
} else { 
    self.firstElementChild.innerHTML += rowData.join(""); // append to innerHTML of tbody which contains the first row (.jqgfirstrow) 
    self.grid.cols = self.rows[0].cells; // update cached first row 
} 

Answer 2

@Oleg, ho dovuto Apporta alcune modifiche alla tua patch mentre stavo ottenendo errori javascript su "self". Penso che se avessi usato lo script completo, avrebbe funzionato credo. Ecco il mio codice revisionato e per favore fatemi sapere se non sembra giusto.

  } else if (ts.firstElementChild) { //Fix applied by Oleg for gridView=true in IE9. 
       ts.firstElementChild.innerHTML += rowData.join(''); // append to innerHTML of tbody which contains the first row (.jqgfirstrow) 
       ts.grid.cols = ts.rows[0].cells; // update cached first row 
      } else { 
       // for IE8 for example 
       $("#"+$.jgrid.jqID(ts.p.id)+" tbody:first").append($("#"+$.jgrid.jqID(ts.p.id)+" tbody:first").html() + rowData.join('')); //Modified 
       //$tbody.html($tbody.html() + rowData.join('')); // append to innerHTML of tbody which contains the first row (.jqgfirstrow) //doesn't work. 
       ts.grid.cols = ts.rows[0].cells; // update cached first row 
      } 

Ora funziona. Grazie per l'aiuto. Domani testerò la mia griglia con il codice biforcato e ti farò sapere il risultato.

Answer 3

Le modifiche di @Oleg sono stati utili per il mio problema analogo, ma ho ancora ricevuto l'errore valido elemento di destinazione per questa operazione in Internet Explorer 9 (nessun problema a 7, 8, 10, o 11) quando tentare questa riga di codice:

self.firstElementChild.innerHTML += rowData.join(''); 

Tuttavia, dopo aver impostato la proprietà jqGrid ...

gridview: false 

... non ho più l'errore in Internet Explore r 9.Come ho capito, l'impostazione di gridview su true crea la tabella in una sola volta garantendo prestazioni più veloci, mentre l'impostazione di gridview su false lo costruisce riga per riga ed è un po 'più lento.

io non so come jqGrid è in grado di aggiungere i dati della tabella a innerHTML, perché, da MSDN:

La proprietà innerHTML è di sola lettura sul colle, colgroup, frame, html, testa, stile, tabella, tBody, tFoot, tHead, titolo e tr oggetti.

Tuttavia, anche con gridview: true, funziona in qualche modo per me in tutte le versioni di IE, ad eccezione di IE9.

Questa non è davvero una risposta, ma si spera che aiuti qualcuno. Come sempre, grazie a @Oleg per tutti i tuoi contributi a jqGrid. Mi hai aiutato più di quanto tu possa immaginare.

Answer 4

Ho spostato 'ts.firstElementChild' in $ piuttosto la proprietà 'innerHTML'.

try { 
     ts.firstElementChild.innerHTML += rowData.join(''); // append to innerHTML of tbody which contains the first row (.jqgfirstrow) 
    } 
catch (e) { 
     //IE 9 bug-fix for exception "invalid target element for this operation"      

     $(ts.firstElementChild).html($(ts.firstElementChild).html() + rowData.join('')); 
    } 

e funziona.