Javascript 第一次让jqGrid工作_Javascript_Jquery_Jqgrid

Javascript 第一次让jqGrid工作

javascript jquery jqgrid

Javascript 第一次让jqGrid工作,javascript,jquery,jqgrid,Javascript,Jquery,Jqgrid,我第一次尝试让jqGrid工作。我几乎一字不差地复制了一个示例，下面是我的代码： <html> <head> <title>hi</title> <script src="http://code.jquery.com/jquery-1.8.1.min.js" type="text/javascript"></script> <link type="text/css" href="jquery-ui-bootstra

我第一次尝试让jqGrid工作。我几乎一字不差地复制了一个示例，下面是我的代码：

<html>
<head>
<title>hi</title>

<script src="http://code.jquery.com/jquery-1.8.1.min.js" type="text/javascript"></script>

<link type="text/css" href="jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

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

jQuery("#list2").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}       
    ],
    multiselect: true,
    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("#list2").jqGrid('addRowData',i+1,mydata[i]);

</script>

</head>
<body>

hi

<table id="list2"></table>
<div id="pager2"></div>


</body>
</html>


你好
jQuery（“#list2”）.jqGrid({
数据类型：“本地”，
身高：250，
colname:['Inv No'，'Date'，'Client'，'Amount'，'Tax'，'Total'，'Notes'，]，
colModel：[
{名称：'id'，索引：'id'，宽度：60，排序类型：“int”}，
{名称：'invdate'，索引：'invdate'，宽度：90，排序类型：“date”}，
{名称：'name'，索引：'name'，宽度：100}，
{名称：'amount'，索引：'amount'，宽度：80，对齐：“right”，排序类型：“float”}，
{名称：'tax'，索引：'tax'，宽度：80，对齐：“right”，排序类型：“float”}，
{名称：'total'，索引：'total'，宽度：80，对齐：“right”，排序类型：“float”}，
{名称：'note'，索引：'note'，宽度：150，可排序：false}
],
多选：对，
标题：“操纵数组数据”
});
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”，note2，amount:“300.00”，tax:“20.00”，total:“320.00”}，
{id:“3”，invdate:“2007-09-01”，name:“test3”，note3，amount:“400.00”，tax:“30.00”，total:“430.00”}，
{id:“4”，投资日期：“2007-10-04”，名称：“测试”，注：“注”，金额：“200.00”，税款：“10.00”，总额：“210.00”}，
{id:“5”，invdate:“2007-10-05”，name:“test2”，note2，amount:“300.00”，tax:“20.00”，total:“320.00”}，
{id:“6”，invdate:“2007-09-06”，name:“test3”，note3，amount:“400.00”，tax:“30.00”，total:“430.00”}，
{id:“7”，投资日期：“2007-10-04”，名称：“测试”，注：“注”，金额：“200.00”，税款：“10.00”，总额：“210.00”}，
{id:“8”，invdate:“2007-10-03”，name:“test2”，note2，amount:“300.00”，tax:“20.00”，total:“320.00”}，
{id:“9”，invdate:“2007-09-01”，name:“test3”，note3，amount:“400.00”，tax:“30.00”，total:“430.00”}
];
对于（var i=0；i，在定义表（#list2
）之前执行代码
有两种简单的方法可以解决这一问题，其中任何一种都有效：

将JavaScript代码移动到
标记之前
在加载整个文档时，使用jQuery的事件执行代码
Woah。这很有效。我从未猜到（我是jquery新手-通常在
中定义时，普通javascript可以工作，对吗？当我使用document.getElementById（）更新元素时？）您不能引用尚不存在的元素（无论您是否使用jquery）标题中引用正文中元素的.JavaScript仅在浏览器读取正文后才执行时有效，例如，如果它附加到某个事件，如窗口。onload