2011-12-01 61 views
0

我必須在這裏丟失一些簡單的東西。我已經研究了所有的例子,並且複製了相關的代碼,但我無法獲得任何JSON數據顯示在jqGrid中 - 我只是得到一個帶有標題的空網格。我會欣賞別人的眼睛,幫助我找出什麼是錯的。謝謝。jqGrid和JSON - 空網格

這裏是我使用的HTML文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/redmond/jquery-ui.css" /> 
    <link rel="stylesheet" type="text/css" media="screen" href="/Styles/ui.jqgrid.css" /> 
    <script src="/Scripts/jquery-1.5.2.min.js" type="text/javascript"></script> 
    <script src="/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script> 
    <script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     jQuery(document).ready(function() { 
      $('#list').jqGrid({ 
       dataType: "jsonstring", 
       datastr: mydata1, 
       contentType: "application/json; charset=utf-8", 
       colNames: ['Id1', 'Name1', 'Values1'], 
       colModel: [ 
        { name: 'id1', index: 'id1', width: 55 }, 
        { name: 'name1', index: 'name1', width: 80, align: 'right', sorttype: 'string' }, 
        { name: 'values1', index: 'values1', width: 80, align: 'right', sorttype: 'string'}], 
       pager: jQuery('#pager'), 
       rowNum: 5, 
       rowList: [10, 20, 30], 
       viewrecords: true, 
       caption: 'jqGrid First Grid', 
       width: 300 
      }); 
     }); 
     var mydata1 = '{ "page": "1", "total": 1, "records": "4", "rows": [{ "id": 1, "cell": ["1", "cell11", "values1"] }, { "id": 2, "cell": ["2", "cell21", "values1"] }, { "id": 3, "cell": ["3", "cell21", "values1"] }, { "id": 4, "cell": ["4", "cell21", "values1"] } ]' 
    </script> 
</head> 
<body> 
    <table id="list" class="scroll" cellpadding="0" cellspacing="0"> 
    </table> 
    <div id="pager" class="scroll" style="text-align: center;"> 
    </div> 
</body> 
</html> 

回答

2

您的代碼至少有兩個錯誤:

  1. 您使用dataType選項,而不是datatype。所以未知的選項dataType: "jsonstring"將被忽略,並使用默認的datatype: "xml"選項和url: ""。所以沒有數據將被加載。
  2. 您的JSON數據在字符串末尾沒有'}'。所以你使用錯誤的JSON數據。

其他一些言論。

  • 目前不存在任何contentType參數。它會被忽略。
  • 最好定義mydata1(在jQuery(document).ready(function() {/*here*/});開頭)。在這種情況下,你將不會有全局變量很慢並且可能與其他全局變量發生衝突。
  • 這是更好地使用pager: '#pager'代替pager: jQuery('#pager')
  • 可以刪除<table>元素的class="scroll" cellpadding="0" cellspacing="0"屬性和的<div id="pager">

class="scroll" style="text-align: center;"屬性見the demo