javascript - Jqgrid muestra 'Cargando' en IE9 cuando gridview está configurado en true
Mi cuadrícula funciona bien en Firefox y Chrome, pero muestra el icono de 'Cargando' en IE9 cuando gridview está configurado en verdadero. Esto está 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, por lo que leí que gridView=true acelera el rendimiento en caso de datos grandes. Cualquier idea para hacer que gridView funcione en IE9 sería apreciada.
Gracias
Respuesta #1
Las modificaciones de @Oleg fueron útiles para mi problema similar, sin embargo, todavía recibí el error elemento de destino no válido para esta operación en Internet Explorer 9 (sin problema en 7, 8, 10 o 11) al intentar esta línea de código:
self.firstElementChild.innerHTML += rowData.join('');
Sin embargo, después de configurar la propiedad jqGrid...
gridview: false
... Ya no tengo el error en Internet Explorer 9. Según entiendo, configurar gridview en verdadero construye la tabla de una vez dando un rendimiento más rápido, mientras que configurar gridview en falso la construye fila por fila y es un poco más lento.
No sé cómo jqGrid puede agregar datos de tabla al innerHTML, porque, según 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:true, de alguna manera funciona para mí en todas las versiones de IE, excepto en IE9.
Esto no es realmente una respuesta, pero con suerte ayudará a alguien. Como siempre, gracias @Oleg por todas tus contribuciones a jqGrid. Me has ayudado más de lo que puedes imaginar.
Respuesta #2
Después de tus comentarios a tu pregunta, entiendo el problema. La razón del problema es un error en jqGrid. Utiliza la propiedad firstElementChild (ver 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 hace algún tiempo en mi bifurcación de jqGrid (ve las líneas actuales):
} 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 que hagas los mismos cambios en jquery.jqGrid.src.js o que descargues los archivos modificados jquery.jqGrid.src.js, jquery.jqGrid.min.js y jquery.jqGrid.min.map desde mi repositorio (ver carpeta js). Debo advertirte que el código está en fase de desarrollo y planeo publicar la primera versión el próximo mes, pero el código actual es estable y contiene muchas otras correcciones que encontré y algunas nuevas funciones (descritas brevemente en el readme).
ACTUALIZADO: El código anterior que soluciona el problema se obtiene de mi nuevo código, por lo que contiene self y $tbody definidos anteriormente en mi código. Si quieres modificar el código de jqGrid 4.7, puedes 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 free jqGrid se ve como sigue
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
}