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

问题

I am new to JQGRID and I am using version 4.7.1.

I am trying to create JQGRID with SUBGRID. The code is working as expected in Google chrome, but I am getting the below mentioned error in IE9.

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

How can I resolve the error and make it work in IE9. Kindly do the needful.Thanks in advance.

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

回答1:

TreeGrid don't works with datatype: "local", but one can use datatype: "jsonstring" instead. One need just use datastr: mydata instead of data: mydata. You should use parent: "null" instead of parent: "" additionally for top level icons. It allows to have local sorting additionally. See the answer for the corresponding code example.

The reason of the problem "jquery.jqGrid.src.js, line 1639" could be the bug with the usage of firstElementChild. See 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.

来源：https://stackoverflow.com/questions/28542068/jqgrid-with-subgrid-and-local-data-not-working-in-ie9-throws-script600-inv

标签

jqgrid

subgrid