【问题标题】:simple jqgrid sample can't load data简单的 jqgrid 示例无法加载数据
【发布时间】:2012-06-17 01:48:52
【问题描述】:

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

我从http://www.trirand.com/blog/jqgrid/jqgrid.html复制了代码,放到一个html文件中,然后用firefox打开,但是grid无法加载数据成功

这里是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>

【问题讨论】:

  • 当我将url放入浏览器时,我可以获得正确的Json字符串,但是当html调用该url并且我在firebug中观察响应时,响应内容不会显示在firebug中,而大小为响应内容与直接调用相同

标签: jqgrid


【解决方案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'。如果您的代码可以正常工作。

下一个问题是您必须在&lt;html&gt; 之前包含某种形式的&lt;!DOCTYPE html ... 语句。真的很重要!!!如果您不这样做,那么 Web 浏览器将尝试在 Internet Explorer 浏览器中模拟非常旧的浏览器(如 IE5)的行为。这种模式的名称为quirks mode

下一个问题是您的代码不符合任何 HTML 标准,因为您在 &lt;body&gt; 之后包含了 &lt;script&gt;。我建议您在一些 HTML 验证器中验证您的页面,例如 this one

将 JavaScript 代码放在 $(function(){/*place code here*/}); 中是一种很好的做法。详情请见jQuery.ready

【讨论】:

  • 是的,但在您提供的同一链接中看到 workarounds en.wikipedia.org/wiki/Same_origin_policy#Workarounds
  • @EricJ.:当然可以使用 JSONP(参见the answer 中的the demoanother answer 中的the demo)。 jqGrid 一般都支持它,但是获取数据的站点也应该支持 JSONP。在问题中,只需从原始 jqGrid 演示页面获取完整代码,并尝试从页面获取数据。所以用户只想了解如何使用jqGrid。这是他的第一步。
  • 我同意。我为可能遇到此问题的其他人添加了评论,以澄清一般来说,人们可以解决相同的起源问题。
【解决方案2】:

您正在调用的网址

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

返回错误:

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

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

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

How can I get JQGrid to recognize server sent Errors?

【讨论】:

猜你喜欢
  • 1970-01-01
  • 2017-07-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-04-26
  • 1970-01-01
  • 2010-11-21
相关资源
最近更新 更多