Question

我有一个带有jqGrid的网页，它使用am xmlreader来填充由RoR服务吐出的数据。该页面加载firefox和safari很好。但是在Chrome中，我得到一个空格。只有当我通过单击列更改排序顺序时才会填充。

<html> 
<head> 
    <title>LocalFx</title> 
    <link href="/stylesheets/main.css?1271423251" media="screen" rel="stylesheet" type="text/css" /> 


    <link href="/stylesheets/redmond/jquery-ui-1.8.custom.css?1271404544" media="screen" rel="stylesheet" type="text/css" /> 
    <link href="/stylesheets/ui.jqgrid.css?1265561560" media="screen" rel="stylesheet" type="text/css" /> 
    <script src="/javascripts/jquery-1.3.2.min.js?1259426008" type="text/javascript"></script> 
    <script src="/javascripts/i18n/grid.locale-en.js?1266140090" type="text/javascript"></script> 
    <script src="/javascripts/jquery.jqGrid.min.js?1271437772" type="text/javascript"></script> 



    <script type="text/javascript"> 

        jQuery().ready(function() {
            jQuery("#list").jqGrid({
                xmlReader: {
                    root:"contracts",
                    row:"contract",
                    repeatitems:false,
                    id:"id"
                },
                jsonReader: {
                    repeatitems:false,
                    root:"contracts"
                },
                datatype: 'xml',
                url:'http://localhost:3000/contracts/index/all.xml',
                mtype: 'GET',
                colNames:['User','B/S',  'Currency', 'Amount', 'Rate'],
                colModel :[
                    {name:'user', index:'username', width:100 , xmlmap:'user>username'} ,
                    {name:'side', index:'side', width:100 , xmlmap:'side'} ,
                    {name:'currency', index:'ccy', width:100 , xmlmap:'currency>ccy'} ,
                    {name:'amount', index:'amount', width:100 , xmlmap:'amount'},
                    {name:'rate', index:'rate', width:100 , xmlmap:'exchange-rate>rate'}
                ],
                pager: jQuery('#pager'),
                caption: 'Contracts',
                sortname: 'side',
                sortorder: "asc",
                viewrecords:true,

                rowNum:10,
                rowList:[10,20,30]
            });
            $("#list").trigger("reloadGrid")
        });
    </script> 


</head> 
<body> 

<table id="list" align="center" class="scroll"></table> 
<div id="pager" class="scroll" style="text-align:center;"></div> 

</body> 
</html>

这是xml：

<contracts type="array"> 
  <contract> 
    <amount type="float">1000.0</amount> 
    <created-at type="datetime">2010-04-16T13:59:40Z</created-at> 
    <currency-id type="integer">488525179</currency-id> 
    <id type="integer">18277852</id> 
    <side>BUY</side> 
    <updated-at type="datetime">2010-04-16T13:59:40Z</updated-at> 
    <user-id type="integer">830138774</user-id> 
    <exchange-rate> 
      <contract-id type="integer">18277852</contract-id> 
      <created-at type="datetime">2010-04-16T13:59:40Z</created-at> 
      <denccy-id type="integer">890731696</denccy-id> 
      <id type="integer">419011264</id> 
      <numccy-id type="integer">488525179</numccy-id> 
      <rate type="float">1.3</rate> 
      <updated-at type="datetime">2010-04-16T13:59:40Z</updated-at> 
    </exchange-rate> 
    <user> 
      <created-at type="datetime">2010-04-16T13:59:40Z</created-at> 
      <id type="integer">830138774</id> 
      <updated-at type="datetime">2010-04-16T13:59:40Z</updated-at> 
      <username>John Doe</username> 
    </user> 
    <currency> 
      <ccy>EUR</ccy> 
      <created-at type="datetime">2010-04-16T13:59:40Z</created-at> 
      <id type="integer">488525179</id> 
      <updated-at type="datetime">2010-04-16T13:59:40Z</updated-at> 
    </currency> 
  </contract> 
  <contract> 
    <amount type="float">500.0</amount> 
    <created-at type="datetime">2010-04-16T13:59:40Z</created-at> 
    <currency-id type="integer">890731696</currency-id> 
    <id type="integer">716237132</id> 
    <side>SELL</side> 
    <updated-at type="datetime">2010-04-16T13:59:40Z</updated-at> 
    <user-id type="integer">830138774</user-id> 
    <exchange-rate> 
      <contract-id type="integer">716237132</contract-id> 
      <created-at type="datetime">2010-04-16T13:59:40Z</created-at> 
      <denccy-id type="integer">890731696</denccy-id> 
      <id type="integer">861902380</id> 
      <numccy-id type="integer">488525179</numccy-id> 
      <rate type="float">1.3</rate> 
      <updated-at type="datetime">2010-04-16T13:59:40Z</updated-at> 
    </exchange-rate> 
    <user> 
      <created-at type="datetime">2010-04-16T13:59:40Z</created-at> 
      <id type="integer">830138774</id> 
      <updated-at type="datetime">2010-04-16T13:59:40Z</updated-at> 
      <username>John Doe</username> 
    </user> 
    <currency> 
      <ccy>GBP</ccy> 
      <created-at type="datetime">2010-04-16T13:59:40Z</created-at> 
      <id type="integer">890731696</id> 
      <updated-at type="datetime">2010-04-16T13:59:40Z</updated-at> 
    </currency> 
  </contract> 
</contracts>

Answer 1

很抱歉，但您如何在http://www.ok-soft-gmbh.com/jqGrid/XmlTest/xmlorg.htm验证您的原始代码在Chrome中运行良好（“4.1.249.1045（42898）”或“5.0.342.9 beta”）。我不包括main.css，因为你没有发布它。

我可以说，那条线

$("#list").trigger("reloadGrid")

（顺便没有分号）可以删除。并且jqGrid表和页面div可以简化为

<table id="list"></table>
<div id="pager"></div>

（参见http://www.ok-soft-gmbh.com/jqGrid/XmlTest/xml.htm）但所有这些都不能帮到你。我的建议是：

使用当前版本的jqGrid（3.6.4）
验证从http://www.trirand.com/blog/?page_id=6下载最小化版本的jqGrid时检查所需的所有jqGrid部件。如果你不确定 - 检查所有。或者使用GitHub中的最后一个版本（特别是如果你使用jQuery 1.4.x），如果jqGrid的未压缩版本适合你。

我认为，你的错误是因为使用了错误的jqGrid最小化版本（没有你真正需要的部分）。另一个可能的错误点是你的main.css文件。

祝你好运

Answer 2

在初始化网格对象后，不要调用$("#list").trigger("reloadGrid")，而是尝试从loadComplete调用它，这是在从URL加载数据后调用的：

jQuery("#list").jqGrid({
    ...
    rowList:[10,20,30],
    loadComplete: function(){
        ("#list").trigger("reloadGrid")
    }
});

Answer 3

因为我的评论我的答案不容易看到，我发布的信息与第二个答案相同：

这很奇怪！我刚刚下载了jqGrid以及所有选中的复选框，并将xmlorg.htm更改为使用jquery-1.3.2的min版本：一切正常。所以最后一个建议是：你从http://www.ok-soft-gmbh.com/jqGrid/XmlTest/XmlTest.zip下载我使用的所有文件。然后解压缩，将所有内容放在网站上，例如，本地主机（IIS）。修复url到all.xml并从您的网站打开xmlorg.htm或xml.htm。它必须工作！

Answer 4

我正在使用jquery 1.5.2和jqgrid 4.0。类似的问题出现在Chrome 5.0.396.0上，但其他Chrome版本和IE / FF运行良好。

我也用jquery 1.4.4测试过，这个问题依然存在。但是当我用jquery 1.3.2测试时，问题就解决了。

为什么jqGrid最初不会在Chrome中填充

4 个答案: