当 gridview 设置为 true 时，Jqgrid 在 IE9 中显示“正在加载"

Jqgrid shows #39;Loading#39; in IE9 when gridview is set to true(当 gridview 设置为 true 时，Jqgrid 在 IE9 中显示“正在加载)

问题描述

我的网格在 Firefox 和 chrome 中运行良好，但当 gridview 设置为 true 时，它​​在 IE9 中显示正在加载"图标.这是使用 jqgrid 4.7.0

My grid works fine in firefox and chrome but it shows 'Loading' icon in IE9 when gridview is set to true. This is using 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 中工作的想法.

If I change the gridView=false, it works well in IE9. I will have large amount of the data in this grid so I read that gridView=true speeds up the performance in case of large data. Any ideas to get gridView to work in IE9 is appreciated.

谢谢

推荐答案

在您对您的问题发表评论后，我明白了问题所在.问题的原因是 jqGrid 中的错误.它使用 firstElementChild(参见 行) 属性:

After your comments to your question I understand the problem. The reason of the problem is the bug in jqGrid. It uses firstElementChild (see the lines) property:

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

我之前在 my fork of jqGrid 中修复了这个错误(参见 行 当前):

I fixed the bug some time before in my fork of jqGrid (see the lines currently):

} 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 文件来自 my存储库(参见 js 文件夹).我应该警告你代码正在开发体育场，我计划在下个月发布第一个版本，但当前代码是稳定的，它包含我发现的许多其他修复和一些新功能(在自述文件中简要描述).

So I can suggest to to make the same changes in jquery.jqGrid.src.js or to download modified jquery.jqGrid.src.js, jquery.jqGrid.min.js and jquery.jqGrid.min.map files from my repository (see js folder). I should warn you that the code is in developing stadium and I plan to publish the first release in the next month, but the current code is stable and it contains many other fixes which I found and some new features (described shortly in the readme).

更新:上面修复问题的代码来自我的新代码，所以它包含self和$tbody 上面在我的代码中定义.如果要修改 jqGrid 4.7 的代码，可以使用

UPDATED: The code above which fixes the problem are get from my new code, so it contains self and $tbody defined above in my code. If you want modify the code of jqGrid 4.7 you can use

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

UPDATED 2: free jqGrid 的片段的当前代码如下所示

UPDATED 2: The current code of the fragment of free jqGrid look as the following

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
}

这篇关于当 gridview 设置为 true 时，Jqgrid 在 IE9 中显示“正在加载"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！