1

我是 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>
4

2 回答 2

2

您发布的代码有很多问题。

第一个是您使用url:'http://www.trirand.com/blog/jqgrid/server.php?q=2'的错误。您可以在 Web 浏览器中打开 URL 并查看结果，但您不能在 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 验证器中验证您的页面。

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

于 2012-06-14T10:23:28.840 回答
1

您正在调用的 URL

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

正在返回一个错误：

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

您需要先让数据查询工作:-)

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

如何让 JQGrid 识别服务器发送的错误？

于 2012-06-14T03:12:59.807 回答