Question

我必须在这里遗漏一些简单的东西。我已经研究了所有的例子，并复制了相关的代码，但是我无法在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>

Answer 1

您的代码至少有两个错误：

您使用dataType选项而不是datatype。因此，将忽略未知选项dataType: "jsonstring"，并使用默认datatype: "xml"选项和url: ""。因此不会加载任何数据。
您的JSON数据在字符串末尾没有'}'。所以你使用了错误的JSON数据。

其他一些评论。

不存在任何contentType参数。它将被忽略。
最好在mydata1内（开头）定义jQuery(document).ready(function () {/*here*/});。在这种情况下，您将没有缓慢且可能与其他全局变量冲突的全局变量。
最好使用pager: '#pager'代替pager: jQuery('#pager')
您可以删除class="scroll" cellpadding="0" cellspacing="0"

<table>

class="scroll" style="text-align: center;"

<div id="pager">

请参阅the demo。

jqGrid和JSON - 空网格

1 个答案: