JQGrid显示列但没有行数据

时间:2012-11-23 15:33:12

标签: jquery jqgrid

是的,请有人帮助我。我试图使用JQGrid使用json动态呈现列和数据。列似乎正在出现,但没有行数据。

以下是我从服务中返回的JSON:

{
    "total": 1,
    "page": 1,
    "records": 1,
    "rows": [
        {
            "id": 29291,
            "cell": [
                "Jim",
                "1",
                "2"
            ]
        }
    ],
    "columns": [
        "Name",
        "30/10/2012",
        "23/10/2012"
    ],
    "columnmodel": [
        {
            "name": "Name",
            "index": "Name",
            "align": "left",
            "width": 25
        },
        {
            "name": "30/10/2012",
            "index": "30/10/2012",
            "align": "left",
            "width": 25
        },
        {
            "name": "23/10/2012",
            "index": "23/10/2012",
            "align": "left",
            "width": 25
        }
    ]
}

我正在使用的javascript是:

$.ajax({
    type: "GET",
    url: "ListData?ID=1",
    datatype: "json",
    success: function(result){
        $("#customgrid").jqGrid({
                datatype: "json",
                colNames: result.columns,
                colModel: result.columnmodel,
                data: result.rows,
                width: 800,
                pager: "#customgridpager",
                viewrecords: true,
                sortable: true,
                gridview: true,
        });
    },
});

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:2)

您只需在代码中进行一些小的更改即可。您需要先在$.ajax来电中更改输入错误:将datatype更改为dataType。然后,您需要将datatype: "json"更改为datatype: "jsonstring",将data: result.rows更改为datastr: result。我建议你的完整代码如下:

$.ajax({
    type: "GET",
    url: "NiallGray.json",
    dataType: "json",
    success: function (result) {
        $("#customgrid").jqGrid({
            datatype: "jsonstring",
            colNames: result.columns,
            colModel: result.columnmodel,
            datastr: result,
            width: 800,
            pager: "#customgridpager",
            viewrecords: true,
            sortable: true,
            gridview: true,
            rowNum: 10000,
            height: "auto"
        });
    }
});

演示的修改版本为here

enter image description here