jqGrid的使用示例阵列中的数据，我在想什么 [英] jqgrid sample using array data, what am I missing
本文介绍了jqGrid的使用示例阵列中的数据，我在想什么的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在jqGrid的新的，我只是想THES例如工作。我只有一个HTML文件，仅此而已。当我运行这个文件，阵列中的数据没有显示。我缺少的是在这里吗？先谢谢了。
＆LT; HEAD＆GT;
＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8/＆GT;
＆LT;标题＆GT;的jqGrid演示＆LT; /标题＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS媒体=屏幕上的href =LIB / jQuery的-UI-1.7.1.custom.css/＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS媒体=屏幕上的href =LIB / ui.jqgrid.css/＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS媒体=屏幕上的href =LIB / ui.multiselect.css/＆GT;
＆LT;风格类型=文/ CSS＆GT;
HTML，身体{
保证金：0; / *清除体内保证金/填充* /
填充：0;
溢出：隐藏; / *在浏览器窗口中删除滚动条* /
字体大小：75％;
}
/ *分路器风格* /
#LeftPane {
/ *可选的，初始splitbar位置* /
溢出：汽车;
}
/ *
*分离器的右侧元素。
* / #RightPane {
填充：2px的;
溢出：汽车;
}
的.ui-标签，导航李{位置：相对;}
的.ui的选项卡，选择一个跨度{填充右：10px的;}
的.ui-标签近距离{显示：无;位置：绝对的;顶部：的3px;右：0像素; z-index的：800;宽度：16px的;高度：14px的; FONT-SIZE：10px的;字体风格：正常;光标：指针;}
的.ui的选项卡选定的.ui-标签近距离{显示：块;}
的.ui布局中西部的.ui-的jqGrid tr.jqgrow TD {边框底部：0像素无;}
的.ui-日期选择器{z索引：1200;}
＆LT; /风格＆GT;
＆LT;脚本SRC =LIB / jQuery的-1.4.2.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =LIB / jQuery的-UI-1.7.2.custom.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =LIB / jquery.layout.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =LIB / grid.locale-en.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =LIB / jquery.jqGrid.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =LIB / jquery.tablednd.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =LIB / jquery.contextmenu.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =LIB / ui.multiselect.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
//我们使用文档准备jQuery函数。
jQuery的（文件）。就绪（函数（）{
jQuery的（＃清单）。jqGrid的（{
数据类型：本地，
高度：250，
colNames：['INV否，日期，客户，金额，税收，合计，注意]
colModel：
{名称：'身份证'，索引：'ID'，宽度：60，sorttype：INT}，
{名称：'invdate'，索引：invdate'，宽度：90，sorttype：日期}，
{名称：'名'，索引：'名'，宽度：100}，
{名称：'量'，索引：'量'，宽度：80，调整：右，sorttype：浮动}，
{名称：'税'，索引：'税'，宽度：80，调整：右，sorttype：浮动}，
{名称：'总'，索引：'总'，宽度：80，调整：右，sorttype：浮动}，
{名称：'音符'，索引：'注意'，宽度：150，排序：假}
]
呼叫器：#pager'，
的rowNum：10，
rowList：[10,20,30]
sortname：'ID'，
排序顺序：递减，
viewrecords：真实，
多选：真实，
imgpath：LIB /基本/图像，
标题：操控阵列数据
}）;
}）;
VAR MYDATA = [
{ID：1，invdate：2007-10-01，名称：测试，注意：注意，金额：200.00，税10.00，总：210.00}，
{ID：2，invdate：2007-10-02，名称：测试2，注：注2，金额：300.00，税20.00，总：320.00}，
{ID：3，invdate：2007-09-01，名称：TEST3注：注3，金额：400.00，税30.00，总：430.00}，
{ID：4，invdate：2007-10-04，名称：测试，注意：注意，金额：200.00，税10.00，总：210.00}，
{ID：5，invdate：2007-10-05，名称：测试2，注：注2，金额：300.00，税20.00，总：320.00}，
{ID：6，invdate：2007-09-06，名称：TEST3注：注3，金额：400.00，税30.00，总：430.00}，
{ID：7，invdate：2007-10-04，名称：测试，注意：注意，金额：200.00，税10.00，总：210.00}，
{ID：8，invdate：2007-10-03，名称：测试2，注：注2，金额：300.00，税20.00，总：320.00}，
{ID：9，invdate：2007-09-01，名称：TEST3注：注3，金额：400.00，税30.00，总：430.00}
];
对于（VAR I = 0;我LT＆= mydata.length;我++）
。jQuery的（＃清单）的jqGrid（'addRowData'，我+ 1，mydata1 [I]）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;表ID =清单级=滚动＆GT;＆LT; /表＆gt;
＆LT; DIV ID =寻呼机级=滚动的风格=文本对齐：中心;＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
解决方案
啊，它在演示code该死的错字。
在循环声明被称为MYDATA的数组，数组mydata1 [..]（注意，邪恶1）
grid.locale恩必须首先声明！然后在浏览器的调试器可以告诉你。
（更多'bugyi的，我对顶部和条纹灰色背景的一些奇怪的文字加载）
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.
<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>
解决方案
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)
grid.locale-en has to be declared first! Then the Browser's debugger can tell you.
(more 'bugyi's, I have some strange Loading text on the top and a striped gray background.)
这篇关于jqGrid的使用示例阵列中的数据，我在想什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
