无法使用 JSON 将数据绑定到 JQGrid

Question

以下是用于显示的 JSON 数据和 JQGrid 代码。请帮助

JSON 数据* [{"Id":1,"Name":"番茄汤","Category":"杂货","Price":1.0},{"Id":2,"Name":"Yo-yo","类别":"玩具","价格":3.75},{"Id":3,"名称":"锤子","类别":"硬件","价格":16.99}]

**JQGrid Code**
function getData() {
            $.ajax({
                //url: 'api/products',
                data:'{}',
                dataType: "json",
                complete: function (jsondata, stat) {
                    if (stat == "success") {
                        var thegrid = jQuery("#gdCustomers")[0];
                        //var jdata = JSON.parse(eval("(" + jsondata.responseText + ")"));
                        thegrid.addJSONData(JSON.parse('[{"Id":1,"Name":"Tomato Soup","Category":"Groceries","Price":1.0},{"Id":2,"Name":"Yo-yo","Category":"Toys","Price":3.75},{"Id":3,"Name":"Hammer","Category":"Hardware","Price":16.99}]'));
                    }
                }
            });
        }
        'use strict';
        gdCustomers.jqGrid({
            //url: 'api/products',
            datatype: getData,
            mtype: 'GET',
            loadError: function (xhr, status, error) { alert(status + " " + error); },
            //ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            //serializeGridData: function (postData) {
            //    return JSON.stringify(postData);
            //},
            //jsonReader: {
            //    //root: '',
            //    //page: 1,//obj.d.page; },
            //    //total: 1,//obj.d.total; },
            //    //records: 3,//; }
            //    //rows: [],
            //    id: '0',
            //    cell:'',
            //    //repeatitems: true
            //},
            colNames: ["Id", "Name", "Category", "Price"],
            colModel: [
                         { name: "Id", index: "Id",key:true, width: 50 },
                         { name: "Name", index: "Name", width: 200},
                         { name: "Category", index: "Category", width: 75 },
                         { name: "Price", index: "Price", width: 75}
            ],
            rowNum:10,
            rowList:[10,20,30],
            pager: '#gdCustomersPager',
            //sortname: 'id',
            viewrecords: true,
            //sortorder: "desc",
            width:500,
            height: 200,
            caption: "JSON Example",
            onCellSelect: function (rowid, index, contents, event) {
                alert('onCellSelect: ' + index + ' : ' + contents);
            }

        });
        jQuery("#gdCustomers").jqGrid('navGrid','#gdCustomersPager',{edit:false,add:false,del:false});
    });

服务器端代码 我正在使用带有 Web API 的 asp.net

公共类 ProductsController : ApiController {

    Product[] products = new Product[] 
    { 
        new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1}, 
        new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M}, 
        new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M} 
    };

    public dynamic GetAllProducts()
    {

        return JsonConvert.SerializeObject(products);

    }

Answer 1

如果您使用的是本地数据（不是从服务器检索的），那么您需要将loadonce 设置为 true 并使用以下代码：

var gridData = '[{"Id":1,"Name":"Tomato Soup","Category":"Groceries","Price":1.0},{"Id":2,"Name":"Yo-yo","Category":"Toys","Price":3.75},{"Id":3,"Name":"Hammer","Category":"Hardware","Price":16.99}]'

            $("#gdCustomers").jqGrid({
                loadError: function (xhr, status, error) {
                    alert('load error: ' + error);
                },
                datatype: "local",
                data: gridData,

                colNames: ["Id", "Name", "Category", "Price"],
                colModel: [
                         { name: "Id", index: "Id",key:true, width: 50 },
                         { name: "Name", index: "Name", width: 200},
                         { name: "Category", index: "Category", width: 75 },
                         { name: "Price", index: "Price", width: 75}
                ],

                gridview: true,
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: '#gdCustomersPager',
                viewrecords: true,
                width:500,
                height: 200,
                caption: "JSON Example",
                loadonce: true
            }).navGrid("#gdCustomersPager", { edit: false, add: false, del: false });
            $("#gdCustomers").jqGrid('setGridParam', { datatype: 'local', data: gridData }).trigger('reloadGrid');

如果您想使用来自服务器的数据来填充网格，请使用以下内容：

$("#gdCustomers").jqGrid({
                loadError: function (xhr, status, error) {
                    alert('load error: ' + error);
                },
                mtype: 'GET',
                ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                url: 'api/products',
                datatype: "json",

                colNames: ["Id", "Name", "Category", "Price"],
                colModel: [
                         { name: "Id", index: "Id",key:true, width: 50 },
                         { name: "Name", index: "Name", width: 200},
                         { name: "Category", index: "Category", width: 75 },
                         { name: "Price", index: "Price", width: 75}
                ],

                gridview: true,
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: '#gdCustomersPager',
                viewrecords: true,
                width:500,
                height: 200,
                caption: "JSON Example",
            }).navGrid("#gdCustomersPager", { edit: false, add: false, del: false });
            $("#gdCustomers").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');