带有子网格和本地数据的 JqGrid 在 IE9 中不起作用 - 抛出 - "SCRIPT600: Invalid target element for this operation"

Question

我是 JQGRID 的新手，我使用的是 4.7.1 版。

我正在尝试使用 SUBGRID 创建 JQGRID。代码在 Google chrome 中按预期工作，但我在 IE9 中收到下面提到的错误。

SCRIPT600: Invalid target element for this operation. 
jquery.jqGrid.src.js, line 1639 character 6

如何解决错误并使其在 IE9 中工作。请提前needful.Thanks。

<html>
<head>
<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-    ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />




<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.src.js" type="text/javascript"></script> 




<style>
.ui-jqgrid tr.ui-row-ltr td 
{ 
border-right-color: transparent;
height:auto;
overflow:hidden;    
padding-top:6px;
padding-bottom:6px;
position:relative;
vertical-align:text-top;
white-space:normal !important; 
}

th.ui-th-column { border-right-color: transparent !important }

.ui-jqgrid .ui-jqgrid-btable
{
table-layout:auto;
}

.top-buffer { margin-top:20px; }

.cursorPointer:hover{
cursor:pointer
}


.ui-jqgrid .ui-jqgrid-htable th div {
height:auto;
overflow:hidden;    
padding-top:6px;
padding-bottom:6px;
position:relative;
vertical-align:text-top;
white-space:normal !important;
}


</style>
</head>

<body>

<div >
<table id="grid"></table>
</div>


</body>


<script type="text/javascript">

var mydata = [
{id: "1", label:"No 1", number:"02200220", status:"OPEN", level:"0", parent:  "", isLeaf: false, expanded:false, loaded:true},
{id: "2", label:"No 2", number:"77733337", status:"ENTERED", level:"0", parent: "", isLeaf: false, expanded:false, loaded:true},
{id: "6", label:"No 2a", number:"12345123", status:"WIRED", level:"1", parent: "2", isLeaf: false, expanded:false, loaded:true},
{id: "7", label:"No 2a1", number:"1111111111", status:"WIRED", level:"2", parent: "6", isLeaf: true, expanded:false, loaded:true},
{id: "3", label:"No 3", number:"02200111", status:"OPEN", level:"0", parent: "", isLeaf: false},
{id: "4", label:"No 3a", number:"02200221", status:"OPEN", level:"1", parent: "3", isLeaf: true, expanded:false, loaded:true},
{id: "5", label:"No 3b", number:"02242320", status:"CLOSED", level:"1",   parent: "3", isLeaf: true, expanded:false, loaded:true}
];

var grid = $("#grid");


grid.jqGrid({
// data: mydata, // doesn't work
datatype: "local",
colNames: ['Id', 'Label', 'Number', 'Status'],
colModel: [
{ name:'id',index:'id', width:60, sortable:false},
{ name: 'label', index: 'label', width: 180, sortable:false},
{ name: 'number', index: 'number', width: 120, formatter: function    (cellValue, option, rowObject) 
{
        return "<span><img src='images/play.png'></img></span><span style='padding-left:10px'><img src='images/Download-icon.png'><span>";
    } },
{ name: 'status', index: 'status', width: 120, sortable:false } ],
hidegrid: false,
gridview: true,
sortname: 'id',    
loadonce: true,

treedatatype: 'local',
ExpandColumn: 'label',
height: 'auto',
pager : "#gridPager",
caption: "Prouct Page Table"
});


// we have to use addJSONData to load the data
grid[0].addJSONData({
total: 1,
page: 1,
records: mydata.length,
rows: mydata
});



</script>



</html>

Answer 1

TreeGrid 不适用于 datatype: "local"，但可以使用 datatype: "jsonstring"。只需使用 datastr: mydata 而不是 data: mydata。对于顶级图标，您应该额外使用 parent: "null" 而不是 parent: ""。它允许另外进行本地排序。请参阅 the answer 以获取相应的代码示例。

问题 "jquery.jqGrid.src.js, line 1639" 的原因可能是 firstElementChild 的用法错误。参见 the answer for details. You can download code of jquery.jqGrid.src of jqGrid 4.7.0 after the fix from here. Alternatively you can download beta version of new free jqGrid from my fork of jqGrid。

带有子网格和本地数据的 JqGrid 在 IE9 中不起作用 - 抛出 - "SCRIPT600: Invalid target element for this operation"

JqGrid with subgrid and local data not working in IE9 - throws - "SCRIPT600: Invalid target element for this operation"

jqgrid

subgrid