绑定jqGrid到JSON对象

Question

如何将一个简单的JSON对象绑定到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语法错误，无法识别的表达式:# jQuery 1.6.2

我也试过用json代替jsonstring，用数据代替datastr。这样就消除了错误，但是网格仍然是空的。在这两种情况下，undefined都会出现，或者在网格体中闪烁。

编辑

我也尝试过数据类型:"本地"与表作为数据。没有错误或未定义，但网格中仍然没有数据。

结束编辑

还有，这里是我引用的脚本/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

要使您的代码正常工作(参见这里的固定演示)需要进行三个更改:

1. 添加参数jsonReader: {repeatitems: false} '
2. 将id添加到<table>元素
3. 在 jquery.jqGrid.min.js
之前包含i18n/grid.locale-en.js

另外，我建议您始终使用gridview: true，并且在大多数情况下将height定义为height: 'auto'。

Answer 2

我想你是在找datatype: 'local'和data: tableSrc。

datatype:定义期望在网格中表示数据的信息类型。有效的选项是xml -我们期望xml数据;Xmlstring——我们期望XML数据是字符串;json -我们期望json数据;jsonstring——我们期望JSON数据是字符串;本地-我们期望在客户端定义的数据(数组数据);Javascript——我们期望Javascript作为数据;Function -用于检索数据的自定义函数。

data:存储传递给网格的本地数据的数组。如果想要加载数组数据，可以直接指向这个变量。它可以代替addRowData方法在相对大数据上速度较慢

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:选择