Question

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

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

b.ajaxOptions.success is not a function

我从加载数据中的here获取示例代码 - ＆gt;阵列数据部分。

我的代码如下所示。我猜这是一件简单的事情，但是我厌倦了把头发拉出来并希望用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>

Answer 1

你犯了很多小错误：

所有JavaScript文件只能包含一次。您下载了例如jquery.ui.core.js，然后是jquery-ui-1.8.5.custom.min.js，其中包含它。你加载jquery.jqGrid.min.js twic等等。
grid.locale-en.js必须包含 jquery.jqGrid.min.js
您应该将您编写的所有JavaScript代码放在jQuery(document).ready(function () {/*you code mus be here*/});函数的正文中。
您应该更好地使用jqGrid的data参数，而不是使用addRowData方法。如果您使用addRowData方法，则应将代码从i<=mydata.length修改为i<mydata.length。

您可以看到代码的更新版本here。

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

1 个答案: