我是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中运行。请尽快做好准备。谢谢。
<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>
答案 0 :(得分:1)
TreeGrid不适用于datatype: "local"
,但可以使用datatype: "jsonstring"
代替datastr: mydata
。只需使用data: mydata
代替parent: "null"
即可。您应该使用parent: ""
而不是firstElementChild
作为顶级图标。它允许另外进行本地排序。有关相应的代码示例,请参阅the answer。
问题的原因&#34; jquery.jqGrid.src.js,第1639行&#34;可能是使用jquery.jqGrid.src
的错误。有关详细信息,请参阅the answer。您可以在here的修复后下载jqGrid 4.7.0的{{1}}代码。或者,您可以从my fork of jqGrid下载新版免费jqGrid的测试版。