javascript jquery jsp jqgrid

javascript - Jqgrid muestra ''Cargando'' en IE9 cuando gridview se establece en verdadero



jquery jsp (4)

@Oleg, tuve que hacer algunos cambios en tu parche ya que estaba obteniendo errores de JavaScript en ''uno mismo''. Creo que si hubiera usado un script completo, hubiera funcionado, supongo. Aquí está mi código revisado y, por favor, avíseme si no se ve bien.

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

Está trabajando ahora. Gracias por tu ayuda. Voy a probar mi red con tu código bifurcado mañana y te haré saber el resultado.

Mi cuadrícula funciona bien en Firefox y Chrome, pero muestra el ícono ''Cargando'' en IE9 cuando gridview está establecido en verdadero. Esto es 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);

Si cambio gridView = false, funciona bien en IE9. Tendré una gran cantidad de datos en esta cuadrícula, así que leí que gridView = true acelera el rendimiento en caso de datos grandes. Se agradece cualquier idea para hacer que gridView funcione en IE9.

Gracias


Las modificaciones de @Oleg fueron útiles para mi problema similar, sin embargo, aún recibí el elemento de error de destino para esta operación en Internet Explorer 9 (no hubo problema en 7, 8, 10 u 11) al intentar esta línea de código:

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

Sin embargo, después de establecer la propiedad jqGrid ...

gridview: false

... Ya no tengo el error en Internet Explorer 9. Como entiendo, al configurar gridview en verdadero construye la tabla de una vez dando un rendimiento más rápido, mientras que al configurar gridview en falso lo construye fila por fila y es un poco más lento.

No sé cómo jqGrid puede agregar datos de tabla a innerHTML, porque, desde MSDN :

La propiedad innerHTML es de solo lectura en los objetos col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title y tr.

Sin embargo, incluso con gridview: cierto, de alguna manera funciona para mí en todas las versiones de IE, excepto para IE9.

Esta no es realmente una respuesta, pero con suerte ayuda a alguien. Como siempre, gracias @Oleg por todas sus contribuciones a jqGrid. Me has ayudado más de lo que te puedes imaginar.


Envolví ''ts.firstElementChild'' en $ en lugar de la propiedad ''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('''')); }

y está funcionando.


Después de sus comentarios a su pregunta, entiendo el problema. La razón del problema es el error en jqGrid. Utiliza la firstElementChild (vea las líneas ):

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

Arreglé el error algún tiempo antes en mi fork de jqGrid (mira las líneas actualmente):

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

Así que puedo sugerir hacer los mismos cambios en jquery.jqGrid.src.js o descargar los jquery.jqGrid.src.js , jquery.jqGrid.min.js y jquery.jqGrid.min.map de mi repositorio ( ver la carpeta js ). Debo advertirle que el código está en desarrollo en el estadio y planeo publicar el primer lanzamiento el próximo mes, pero el código actual es estable y contiene muchas otras correcciones que encontré y algunas características nuevas (que se describen brevemente en el archivo léame) .

ACTUALIZADO: El código que resuelve el problema se obtiene de mi nuevo código , por lo que contiene self y $tbody definido anteriormente en mi código. Si quiere modificar el código de jqGrid 4.7, puede usar

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

ACTUALIZADO 2: El código actual del fragmento de jqGrid libre se ve como el siguiente

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 }