当网格视图设置为 true 时，Jqgrid 在 IE9 中显示“正在加载”
Jqgrid shows 'Loading' in IE9 when gridview is set to true
我的网格在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中不再有错误。据我了解，将网格视图设置为 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 的分支中修复了这个错误（请参阅当前的行）：
} 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中进行相同的更改，或者从我的存储库（请参阅js文件夹）下载修改后的jquery.jqGrid.src.js，jquery.jqGrid.min.js和jquery.jqGrid.min.map文件。我应该警告你，代码正在开发体育场，我计划在下个月发布第一个版本，但当前的代码是稳定的，它包含我发现的许多其他修复程序和一些新功能（稍后在自述文件中描述）。
更新：上面解决问题的代码是从我的新代码中获取的，因此它包含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：免费 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，我不得不对您的补丁进行一些更改，因为我在"self"上收到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
}
它现在正在工作。感谢您的帮助。明天我会用你的分叉代码测试我的网格，并让你知道结果。
相关文章：
- 当网格视图设置为 true 时，Jqgrid 在 IE9 中显示“正在加载”
- Flowplayer 插件在 Win7:IE9 和 Firefox 中显示“HTML5 视频文件未找到”错误
- 如何使 Dreamweaver AP Div 显示/隐藏功能在 IE9 中工作
- Twitter按钮未显示在IE9中
- 如何在IE9上显示对象的内容
- PDF 未显示在 IE9、10 和 11 的 fancybox 2 iframe 中
- TinyMCE 4在IE9(任何模式）中不显示工具栏图标
- IE9 中未显示图像/网格
- IE9 内容可编辑中显示错误的光标
- Ajax 调用 IE8 不显示所有数据，适用于 Firefox 和 IE9
- Jquery对话框IE9内容未使用html显示
- Angularjs-ng路由在IE9上不起作用-视图不显示
- 样式显示:没有在IE8、IE9、IE10兼容性视图中不起作用
- Javascript不能在Chrome或IE9中工作-错误”;复选框未定义“;显示在FF JS控制台中
- 如何调用IE9的Ctrl-F并突出显示几个单词
- 选择选项显示/隐藏IE9问题
- jQuery.Fileuploadui，在ie9中不显示缩略图预览
- 第一个选项卡面板没有显示网格中的数据(ie9)
- ie9不显示由js填充的表
- ie9及以下版本显示滑出侧边栏菜单时的问题
