我是jqgrid的新手，我只是尝试这个例子。我只有一个html文件，仅此而已。当我运行此文件时，不显示数组数据。我在这里错过了什么？提前谢谢。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid Demos</title>
<link rel="stylesheet" type="text/css" media="screen" href="lib/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="lib/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="lib/ui.multiselect.css" />
<style type="text/css">
html, body {
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: hidden; /* Remove scroll bars on browser window */
font-size: 75%;
}
/*Splitter style */
#LeftPane {
/* optional, initial splitbar position */
overflow: auto;
}
/*
* Right-side element of the splitter.
*/
#RightPane {
padding: 2px;
overflow: auto;
}
.ui-tabs-nav li {position: relative;}
.ui-tabs-selected a span {padding-right: 10px;}
.ui-tabs-close {display: none;position: absolute;top: 3px;right: 0px;z-index: 800;width: 16px;height: 14px;font-size: 10px; font-style: normal;cursor: pointer;}
.ui-tabs-selected .ui-tabs-close {display: block;}
.ui-layout-west .ui-jqgrid tr.jqgrow td { border-bottom: 0px none;}
.ui-datepicker {z-index:1200;}
</style>
<script src="lib/jquery-1.4.2.js" type="text/javascript"></script>
<script src="lib/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="lib/jquery.layout.js" type="text/javascript"></script>
<script src="lib/grid.locale-en.js" type="text/javascript"></script>
<script src="lib/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="lib/jquery.tablednd.js" type="text/javascript"></script>
<script src="lib/jquery.contextmenu.js" type="text/javascript"></script>
<script src="lib/ui.multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
// We use a document ready jquery function.
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total', 'Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
multiselect: true,
imgpath: "lib/basic/images",
caption: "Manipulating Array Data"
});
});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list").jqGrid('addRowData',i + 1, mydata1[i]);
</script>
</head>
<body>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</body>
答案 0 :(得分：2)
声明的数组称为mydata，循环中的数组是mydata1 [..]（注意邪恶1）
必须首先声明grid.locale-en！然后浏览器的调试器可以告诉你。
（更多'bugyi's，我在顶部有一些奇怪的加载文字和条纹灰色背景。）
答案 1 :(得分：1)
如果您没有为寻呼机设置其他所需信息（如行数和页码），则尝试使用寻呼机。当你的循环无法找出这些变量的值时，你的循环会遇到问题。
答案 2 :(得分：1)
这是包含的css和js为我做的伎俩。包含 grid.base.js
非常重要
答案 3 :(得分：1)
我认为问题出在colModel某种程度上。检查colModel之后的脚本是否运行。只取出colModel，然后再次检查。我此刻也遇到了这个问题。
示例：
jQuery("#appGrid").jqGrid({
datatype: "local", //or clientSide
colNames: ["Patient"],
colModel:[{name:'pat',index:'pat'}]
});
*some code* <- won't run
难怪如果网格不允许你执行代码后循环不起作用。
但是当我这样做时：
jQuery("#appGrid").jqGrid({
datatype: "local", //or clientSide
colNames: ["Patient"]
});
*some code* <- will run after col error message
Grid构建得很好，但是之后的代码根本没有执行。我不知道错误在哪里。
答案 4 :(得分：0)
示例代码似乎被打破了。在for循环中尝试这个：
$("#list").addRowData( i, mydata[i], "last" );
这些参数是：rowId，data，position。
答案 5 :(得分：0)
我也在尝试开发相同的例子，但也收到了相同的错误，在做了大量的尝试和错误后，最后我走到了正确的道路。 我将我的示例示例用于在jqgrid中加载数组数据。 这是一个有效的例子。
我在头标记中包含了很多脚本文件，因为我不确定。 我删除'＆lt;'和'＆gt;'标签请添加它。 工作代码是： -
html xmlns="http://www.w3.org/1999/xhtml
head
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.22.custom.css" />
<link rel="stylesheet" type="text/css" href="ui.jqgrid.css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
script type="text/javascript"
jQuery(document).ready(function()
{ jQuery("#list4").jqGrid
(
{
data: mydata,
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client'],
colModel:[
{name:'id',index:'id', width:60},
{name:'invdate',index:'invdate' },
{name:'name',index:'name', width:100}
],
pager: '#pager',
rowNum:2,
rowList:[10,20,30],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
multiselect: true,
imgpath: "themes/basic/images",
caption: "Manipulating Array Data"
}
);
var mydata = [ {id:"1",invdate:"2007-10-01",name:"test"},
{id:"2",invdate:"2007-10-01",name:"test"},
{id:"3",invdate:"2007-10-01",name:"test"},
{id:"4",invdate:"2007-10-01",name:"test"},
{id:"5",invdate:"2007-10-01",name:"test"},
{id:"6",invdate:"2007-10-01",name:"test"},
{id:"7",invdate:"2007-10-01",name:"test"},
{id:"8",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"},
{id:"1",invdate:"2007-10-01",name:"test"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list4").addRowData(i, mydata[i]);
}//function
);//ready
script
head
body
This is table
table id="list4"
/table
div id="pager" class="scroll" style="text-align:center;"
/div
This is table
/body
/html
答案 6 :(得分：0)
您的数组声明和操作循环应该在匿名函数jQuery(document).ready(function(){...})内，而不是在它之外。
这样它将在jqQrid初始化之后而不是之前执行。
答案 7 :(得分：0)
Try this friends
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
var mydata = [{
Sno: "1",
StudentName: "Ricky",
DateOfJoining: "05/12/2014"
}, {
Sno: "3",
StudentName: "Hyden",
DateOfJoining: "06/12/2014"
}, {
Sno: "4",
StudentName: "Gill Crist",
DateOfJoining:"04/12/2014"
}, {
Sno: "2",
StudentName: "Lee",
DateOfJoining: "07/12/2014"
}];
$(function () {
$("#grid").jqGrid({
data: mydata,
datatype: "local",
colNames: ["Sno", "StudentName", "DateOfJoining"],
colModel: [
{ name: "Sno", width: 100},
{ name: "StudentName", width: 160 },
{ name: "DateOfJoining", width: 150, align: "right" }
],
pager: "#pager",
rowNum: 2,
rowList: [1, 2, 3],
sortname: "Sno",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "Student Details"
});
});
</script>
</head>
<body>
<table id="grid"></table>
<div id="pager"></div>
</body>