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

Question

我的网格在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中工作的想法都值得赞赏.

谢谢

Answer 1

在您对问题发表评论后，我明白了这个问题。问题的原因是jqGrid的bug。它使用firstElementChild（参见lines）属性：

} 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或下载修改后的jquery.jqGrid.src.js,jquery.jqGrid.min.js和jquery.jqGrid.min.map文件。我应该警告您，代码正在开发体育场，我计划在下个月发布第一个版本，但当前代码是稳定的，它包含我发现的许多其他修复和一些新功能（在自述文件中简短描述） 。js

更新：上面修复问题的代码是从我的新代码中获取的，因此它包含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
}