jQuery / jqGrid故障排除不显示问题

我试图获取一个示例jqgrid示例以显示在我的本地计算机上.我不是想做任何花哨的事情,而是试图让网格出现.我几乎没有碰过 javascript(并希望我能保持这种方式),但是觉得这是我最好的希望在宠物django项目中获取数据以显示在网格中.我正在尝试使用firebug,并且已经设置为停止错误.我收到1个错误,它似乎与jqgrid没有任何关系.有人能指出我如何能够找到为什么页面只是简单地加载任何东西,并且什么都没有错误？除了链接到我自己的本地版本的脚本之外,我基本上从某个地方的jquery示例中复制了代码,以确保在我自定义它以满足我的需求之前让它工作.由于其他原因,我还有其他jquery的东西,因此我的代码顶部有大量的javascript引用.

我在firebug中看到的唯一错误是jquery-ui-1.8.5中的以下内容.

b.ajaxOptions.success is not a function

我在加载数据中从here获取我的示例代码 – >阵列数据部分.

我的代码如下所示.我猜这是一件简单的事情,但是我厌倦了把头发拉出来并希望用django工作而不是javascript nest回来.我已经验证我可以访问顶部的所有脚本链接,所以也许我一味地错过了一个？虽然在某个地方看到某些错误会很好,所以我知道从哪里开始.在这样一个看似简单的问题上,我一直把头发拉了几个小时.非常感谢任何建议/想法.

<link type="text/css" href="http://localhost/media/jquery-ui/css/dark-hive/jquery-ui-1.8.5.custom.css" rel="stylesheet" /> 
<link rel="stylesheet" type="text/css" media="screen" href="http://localhost/media/jqGrid/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://localhost/media/jqGrid/src/css/ui.multiselect.css" />

<script type="text/javascript" src="http://localhost/media/jquery-ui/js/jquery-1.4.4.js"></script> 
<script type="text/javascript" src="http://localhost/media/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script> 
<script type="text/javascript" src="http://localhost/media/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="http://localhost/media/jquery-ui/development-bundle/ui/jquery.ui.tabs.js"></script>

<script type="text/javascript" src="http://localhost/media/jquery-ui/js/jquery-ui-1.8.5.custom.min.js"></script>

<script type="text/javascript" src="http://localhost/media/jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="http://localhost/media/jqGrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
    jQuery.jgrid.no_legacy_api = true;
    jQuery.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://localhost/media/jqGrid/src/ui.multiselect.js"></script>
<script type="text/javascript" src="http://localhost/media/jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="http://localhost/media/jqGrid/src/jquery.layout.js"></script>
<script type="text/javascript" src="http://localhost/media/jqGrid/src/jquery.contextmenu.js"></script>


<script type="text/javascript">

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

jQuery(function() {
    jQuery("#tabs").tabs({
        ajaxOptions: {
            error: function(xhr, status, index, anchor) {
                jQuery(anchor.hash).html("If you're reading this then something didn't go right....oops.");
            }
        }
    });
});
</script>

然后在我的HTML中.

<table id="list4"></table>

你犯了很多小错误：

>所有JavaScript文件只能包含一次.您下载了例如jquery.ui.core.js,然后是jquery-ui-1.8.5.custom.min.js,其中包含它.你加载了jquery.jqGrid.min.js twic等等.
>必须在jquery.jqGrid.min.js之前包含grid.locale-en.js
>你应该把你在jQuery(文档)体内编写的所有JavaScript代码放在.ready(function(){/ *你的代码都在这里* /});功能.
>您应该更好地使用jqGrid的data参数,而不是使用addRowData方法.如果使用addRowData方法,则应将代码从i< = mydata.length修复为i< mydata.length.
您可以在here看到代码的更新版本.