Mac版Chromeでflexigridが正常に動かない？

jQueryにFlexigridというグリッド表示のライブラリがあります。

大変便利なので、ちょっといじってみようと思い、まずは下記のようにサンプルコードを用意しました。
sample-grid.html と grid.data を同じフォルダに置いて、sample-grid.htmlをブラウザで開けばササッと表示されるはず。

sample-grid.html



<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css" />

  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>

  <script type="text/javascript" src="js/flexigrid.js"></script>

  <script type="text/javascript">

    $(function() {

      $("#listbox").flexigrid({

        url: 'grid.data',

        dataType: 'json',

        colModel:[

          {display:'カラム1',name:'col1',width:300},

          {display:'カラム2',name:'col2',width:300},

          {display:'カラム3',name:'col3',width:300}

        ],

        usepager:true,

        width:'auto',

        height:'auto',

        onError: function(res,status,e) {

          alert('err: ' + e + '\n' + 'status: ' + status + '\n' + res.responseText);

        }

      });

    });

  </script>

</head>

<body>

  <table id="listbox"></table>

</body>

</html>

grid.data



{page:"1",total:"1000",rows:[

  {id:"1",cell:["row1-1","row1-2","row1-3"]},

  {id:"2",cell:["row2-1","row2-2","row2-3"]},

  {id:"3",cell:["row3-1","row3-2","row3-3"]},

  {id:"4",cell:["row4-1","row4-2","row4-3"]},

  {id:"5",cell:["row5-1","row5-2","row5-3"]},

  {id:"6",cell:["row6-1","row6-2","row6-3"]},

  {id:"7",cell:["row7-1","row7-2","row7-3"]},

  {id:"8",cell:["row8-1","row8-2","row8-3"]},

  {id:"9",cell:["row9-1","row9-2","row9-3"]},

  {id:"10",cell:["row10-1","row10-2","row10-3"]}

]}

Chromeで開いてみたところ、グリッドの中身に何も表示されません。
最初はエラー処理を入れていなかったのですが、上記ソースのように onError で処理を指定すればエラーが表示されるのでやってみました。