jquery - 将 jqGrid 绑定(bind)到 JSON 对象

Question

如何将简单的 JSON 对象绑定(bind)到 jqGrid？

这是我所拥有的:

    var tableSrc = { "page":"1", "total":1, "records":"3", "rows": [
        { "title": "Title1", "subtitle": "subTitle", "authors": ["a1", "a2", "a3"] },
        { "title": "Title2", "subtitle": "subtitle", "authors": ["X", "Y"] },
        { "title": "Title3", "subtitle": "subTitle", "authors": ["1", "2", "3", "4"]}]
    };

    $(".jqGridTarget").jqGrid({
        datastr: tableSrc,
        datatype: "jsonstring",
        colNames: ['title', 'subtitle'],
        colModel: [
            { name: 'title', index: 'title', width: 55 },
            { name: 'subtitle', index: 'subtitle', width: 90}]
    });

然后:

<table class="jqGridTarget">
</table>

这会产生错误:

Uncaught Syntax error, unrecognized expression: # inside of jQuery 1.6.2

我还尝试使用 json 而不是 jsonstring，并用 data 替换 datastr。这消除了错误，但网格仍然是空的。在这两种情况下都会出现未定义的情况，或者在网格体中闪烁。

编辑

我还尝试了 datatype: "local"并使用 tableSrc 作为数据。没有错误或未定义，但网格中仍然没有数据。

结束编辑

此外，这是我引用的脚本/css 文件:

<script type='text/javascript' src='jquery.min.js'></script>
<script type='text/javascript' src='jquery.tmpl.js'></script>
<script type='text/javascript' src='jquery.jqGrid.min.js'></script>
<script type='text/javascript' src='knockout-1.2.1.js'></script>
<link rel="Stylesheet" type="text/css" href="ui.jqgrid.css" />

Answer 1

需要进行三处更改才能使您的代码正常运行(请参阅 here 修复的演示):

1. 添加参数 jsonReader: { Repeatitems: false }`
2. 添加和 id到<table>元素
3. 包括i18n/grid.locale-en.js 之前 jquery.jqGrid.min.js

此外，我建议您始终使用 gridview: true在大多数情况下定义 height如height: 'auto' .