当gridview设置为true时，Jqgrid在IE9中显示“正在加载”
我的网格在firefox和chrome中运行良好，但当gridview设置为true时，它在IE9中显示“正在加载”图标。 这是使用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); 如果我更改gridView = false，它在IE9中运行良好。 我将在此网格中有大量数据，因此我读到gridView = true可以加快大数据的性能。 任何想要让gridView在IE9中工作的想法都值得赞赏。
谢谢
@Oleg的修改对我的类似问题很有帮助，但是在尝试这行代码时，我仍然收到Internet Explorer 9中此操作的错误无效目标元素 （7,8,10或11中没有问题）：
self.firstElementChild.innerHTML += rowData.join('');
但是，在设置jqGrid属性后……
gridview: false
…我不再在Internet Explorer 9中出现错误。据我所知，将gridview设置为true会立即构建表，从而提供更快的性能，而将gridview设置为false则逐行构建它并且速度稍慢。
我不知道jqGrid如何将表数据附加到innerHTML，因为，从MSDN ：
innerHTML属性在col，colGroup，frameSet，html，head，style，table，tBody，tFoot，tHead，title和tr对象上是只读的。
然而，即使使用gridview：true，它在IE的所有版本中都有用，除了IE9。
这不是一个真正的答案，但希望它可以帮助某人。 一如既往，感谢@Oleg对jqGrid的所有贡献。 你帮助我的程度超出了你的想象。
在您对您的问题发表评论后，我理解了这个问题。 问题的原因是jqGrid中的错误。 它使用firstElementChild （参见行 ）属性：
} 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 }
我之前在jqGrid的fork中修复了bug（请参阅当前的行 ）：
} 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 }
所以我可以建议在jquery.jqGrid.src.js进行相同的更改，或者从我的存储库下载修改过的jquery.jqGrid.src.js ， jquery.jqGrid.min.js和jquery.jqGrid.min.map文件（见js文件夹）。 我应该警告你，代码正在开发体育场，我计划在下个月发布第一个版本，但是当前代码是稳定的，它包含我发现的许多其他修复程序和一些新function（稍后在自述文件中描述） 。
更新：上面修复问题的代码来自我的新代码 ，因此它包含我的代码中定义的self和$tbody 。 如果你想修改jqGrid 4.7的代码你可以使用
} 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; }
更新2： free jqGrid片段的当前代码如下所示
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 }
我将’ts.firstElementChild’包装到$而不是’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('')); }
它正在发挥作用。
@Oleg，我不得不对你的补丁进行一些更改，因为我在“自我”中收到了javascript错误。 我想如果我使用完整的脚本，它会起作用我猜。 这是我修改后的代码，如果看起来不对，请告诉我。
} 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 }
它现在正在运作。 谢谢你的帮助。 我明天会用你的分叉代码测试我的网格，让你知道结果。