Jqgrid montre 'Loading' dans IE9 lorsque gridview est défini sur true

Ma grille fonctionne bien dans firefox et chrome, mais elle montre l'icône 'Chargement' dans IE9 lorsque gridview est défini sur true. Ceci utilise 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); 

Si je change le gridView = false, cela fonctionne bien dans IE9. J'aurai une grande quantité de données dans cette grille, donc je lis que gridView = true accélère les performances en cas de données importantes. Toutes les idées pour obtenir gridView pour travailler dans IE9 sont appréciées.

Merci

Les modifications apportées par @Oleg ont été utiles pour mon problème similaire, mais j'ai toujours reçu l'erreur d' élément cible invalide pour cette opération dans Internet Explorer 9 (aucun problème en 7, 8, 10 ou 11) lors de la tentative de cette ligne de code:

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

Cependant, après avoir défini la propriété jqGrid …

 gridview: false 

… Je n'ai plus l'erreur dans Internet Explorer 9. Comme je l'ai bien compris, la définition de gridview à true crée la table tout en donnant des performances plus rapides, alors que la définition de gridview à false la construit par rangée et est un peu plus lente.

Je ne sais pas comment jqGrid peut ajouter des données de table à innerHTML, car, à partir de MSDN :

La propriété innerHTML est en lecture seule sur les objets col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title et tr.

Cependant, même avec gridview: true, il fonctionne en quelque sorte pour moi dans toutes les versions d'IE, à l'exception de IE9.

Ce n'est pas vraiment une réponse, mais j'espère qu'il aide quelqu'un. Comme toujours, merci @Oleg pour toutes vos contributions à jqGrid. Vous m'avez aidé plus que vous ne pouvez l'imaginer.

Après vos commentaires à votre question, je comprends le problème. La raison du problème est le bug de jqGrid. Il utilise la firstElementChild (voir les lignes ):

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

J'ai réparé le bogue quelque temps avant dans ma fourchette de jqGrid (voir les lignes actuellement):

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

Je peux donc suggérer de faire les mêmes changements dans jquery.jqGrid.src.js ou de télécharger les jquery.jqGrid.src.js , jquery.jqGrid.min.js et jquery.jqGrid.min.map à partir de mon référentiel ( jquery.jqGrid.min.map Voir le dossier js ). Je devrais vous avertir que le code est en développement du stade et j'ai l'intention de publier la première version au mois prochain, mais le code actuel est stable et contient de nombreuses autres corrections que j'ai trouvées et de nouvelles fonctionnalités (décrites sous peu dans le readme) .

MISE À JOUR: Le code ci-dessus qui résout le problème est obtenu à partir de mon nouveau code , donc il contient self et $tbody définis ci-dessus dans mon code. Si vous souhaitez modifier le code de jqGrid 4.7, vous pouvez utiliser

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

MISE À JOUR 2: Le code actuel du fragment de jqGrid gratuit semble comme suit

 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 } 

J'ai enveloppé 'ts.firstElementChild' en $ plutôt la propriété '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('')); } 

Et ça marche.

@Oleg, j'ai dû apporter des modifications à votre patch alors que j'avais des erreurs javascript sur «moi». Je pense que si j'avais utilisé le script complet, cela aurait marché, je suppose. Voici mon code révisé et laissez-moi savoir si cela ne semble pas correct.

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

Il fonctionne maintenant. Merci de votre aide. Je vais tester ma grille avec votre code fourchu demain et vous informer du résultat.