Question

我是jqGrid的新手，我试图让一个简单的jqGrid工作。

我从http://www.trirand.com/blog/jqgrid/jqgrid.html复制代码并将其放在html文件中，然后用firefox打开它，但网格无法成功加载数据

这是html：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://www.trirand.com/blog/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css"/>
    <link rel="stylesheet" type="text/css" href="http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css"/>
    <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.js"></script>
        <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js"></script>

        <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.layout.js"></script>
        <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
        <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/ui.multiselect.js"></script>
        <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
        <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.tablednd.js"></script>
        <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.contextmenu.js"></script>
    </head>
<body>
    <table id="list2">
        </table><div id="pager2"></div>
</body>
<script type="text/javascript">
    jQuery("#list2").jqGrid({
    url:'http://www.trirand.com/blog/jqgrid/server.php?q=2',
    datatype: "json",
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:55},
        {name:'invdate',index:'invdate', width:90},
        {name:'name',index:'name asc, invdate', width:100},
        {name:'amount',index:'amount', width:80, align:"right"},
        {name:'tax',index:'tax', width:80, align:"right"},      
        {name:'total',index:'total', width:80,align:"right"},       
        {name:'note',index:'note', width:150, sortable:false}       
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pager2',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"JSON Example"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});

</script>
</html>

Answer 1

您发布的代码存在许多问题。

第一个是您使用错误的url:'http://www.trirand.com/blog/jqgrid/server.php?q=2'。您可以在Web浏览器中打开URL并查看结果，但由于称为same origin policy的重要安全限制，您无法在Ajax请求中使用它。 您只能从自己的网站获取JSON数据。因此，您可以将url:'http://www.trirand.com/blog/jqgrid/server.php?q=2'返回的数据保存在my.json等文件中并使用url: 'my.json'。如果您的代码可以使用。

下一个问题是您必须在<!DOCTYPE html ...之前添加某种形式的<html>语句。这真的很重要!!!如果您不这样做，那么Web浏览器将尝试模拟Internet Explorer浏览器中非常旧的浏览器（如IE5）的行为。此类模式的名称为quirks mode。

下一个问题是您的代码不包含任何HTML标准，因为您在<script>之后添加了<body>。我建议您在某些HTML验证程序中验证您的页面，例如this one。

最好将JavaScript代码放在$(function(){/*place code here*/});中。有关详细信息，请参阅jQuery.ready。

Answer 2

您正在呼叫的网址

http://www.trirand.com/blog/jqgrid/server.php?q=2

返回错误：

警告：除以零第145行的/home/trirand/public_html/blog/jqgrid/server.php无法执行查询。您的SQL语法有错误;检查手册对应于您的MySQL服务器版本，以获得正确的语法在第1行附近使用

您需要首先使用数据查询： - ）

它可能也值得处理加载错误，以便在出现问题时显示有意义的错误消息。这里有一个完整的讨论：

How can I get JQGrid to recognize server sent Errors?

简单的jqgrid示例无法加载数据

2 个答案: