jQuery 使用数组数据的 jqgrid 示例，我错过了什么
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2461577/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jqgrid sample using array data, what am I missing
提问by Dennis
I'm new in jqgrid, I'm just trying thes example to work. I have a html file only, nothing more. When I ran this file, array data is not showing. What am I missing here? Thanks in advance.
我是 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>
回答by Király István
Ah, its a damn typo in the Demo code.
啊，这是演示代码中的一个该死的错字。
The array that is declared is called mydata, and the array in the loop is mydata1[..] (note that evil 1)
声明的数组叫做mydata，循环中的数组是mydata1[..]（注意evil 1）
grid.locale-en has to be declared first! Then the Browser's debugger can tell you.
grid.locale-en 必须首先声明！然后浏览器的调试器会告诉你。
(more 'bugyi's, I have some strange Loading text on the top and a striped gray background.)
（更多'bugyi's，我在顶部有一些奇怪的加载文本和条纹灰色背景。）
回答by bourne
This are the css and js to include that do the trick for me. Very important to include grid.base.js
这是包含的 css 和 js，它们对我有用。包含grid.base.js非常重要
回答by Jim
I think the problem is in the colModelsomehow. Check if the script after colModelruns. Take only colModelout and then check again. I'm also having this problem at the moment.
我认为问题出在colModel某种程度上。检查脚本是否colModel运行后。只colModel取出，然后再检查。我目前也有这个问题。
example:
例子：
jQuery("#appGrid").jqGrid({
datatype: "local", //or clientSide
colNames: ["Patient"],
colModel:[{name:'pat',index:'pat'}]
});
*some code* <- won't run
No wonder the loop doesn't work if the grid won't let you execute code after.
难怪如果网格不允许您在之后执行代码，则循环不起作用。
But when I do this:
但是当我这样做时：
jQuery("#appGrid").jqGrid({
datatype: "local", //or clientSide
colNames: ["Patient"]
});
*some code* <- will run after col error message
The Grid builds just fine, but the code after it isn't executed at all. I don't know where the error is.
Grid 构建得很好，但它之后的代码根本没有执行。我不知道错误在哪里。
回答by Mike
You are trying to use a pager when you have not set the pager other needed info like the number of rows and page number. Your loop runs into problems when it can't figure out the values for these variables.
当您尚未设置寻呼机其他需要的信息（如行数和页码）时，您正在尝试使用寻呼机。当您的循环无法找出这些变量的值时，它就会遇到问题。
回答by Dhrumil Shah
I am also trying to develop the same example but also received same error and after doing lots of try and error , finally i come to the right path. i am putting my sample example for loading array data in jqgrid. this is working example.
我也在尝试开发相同的示例，但也收到了相同的错误，经过多次尝试和错误，我终于找到了正确的道路。我将我的示例示例用于在 jqgrid 中加载数组数据。这是工作示例。
i have included lots of script file in my head tag because i am not sure about it. i Remove '<' and '>' tag please add it. working code is :-
我在我的 head 标签中包含了很多脚本文件，因为我不确定。i 删除“<”和“>”标签，请添加。工作代码是：-
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
回答by slh777
The example code seems to be broken. Try this in the for loop:
示例代码似乎已损坏。在 for 循环中试试这个：
$("#list").addRowData( i, mydata[i], "last" );
Those parameters are: rowId, data, position.
这些参数是：rowId、数据、位置。
回答by slh777
Your array declaration and manipulation loop should be inside of anonymous function jQuery(document).ready(function(){...}), and not outside of it.
This way it will be executed after jqQrid initialization and not before.
您的数组声明和操作循环应该在匿名函数之内jQuery(document).ready(function(){...})，而不是在它之外。这样它将在 jqQrid 初始化之后而不是之前执行。
回答by Aarthi
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>
