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>

这会产生错误：

未捕获的语法错误，无法识别的表达式：#jQuery 1.6.2内部

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

修改

我也尝试过数据类型：“local”with 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固定演示）：

添加参数jsonReader：{repeatitems：false}`
将id添加到<table>元素
包括i18n/grid.locale-en.js 之前 jquery.jqGrid.min.js

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

Answer 2

我认为您正在寻找datatype: 'local'和data: tableSrc。

datatype：定义期望在网格中表示数据的信息类型。有效的选项是xml - 我们期望xml数据; xmlstring - 我们希望xml数据为字符串; json - 我们期待JSON数据; jsonstring - 我们期望JSON数据为字符串; local - 我们期望在客户端定义数据（数组数据）; javascript - 我们希望javascript作为数据; function - 用于检索数据的自定义函数。

data：一个存储传递给网格的本地数据的数组。如果要加载数组数据，可以直接指向此变量。它可以取代相对大数据缓慢的addRowData方法

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

将jqGrid绑定到JSON对象

2 个答案: