Jqgrid 不显示来自 json 的数据

Posted 2023-05-08

【中文标题】Jqgrid 不显示来自 json 的数据

【英文标题】：Jqgrid does not show data from json

【发布时间】：2018-05-09 06:58:33

【问题描述】：

我正在开发一个 codeigniter 项目。我正在尝试在 jqgrid 中显示来自带有 jquery 的 json 的一些数据。 Jqgrid 显示除数据之外的所有内容。没有错误或异常。

$(document).ready(function()

    $("#company").click(function ()

      $("#ortable").hide();
      $("#grid").show();

        var url = "http://www.***.com";
        $.post(url,,function (response) 
            var rows = JSON.parse(response);

            $.each(rows,function (key,row) 
                var mydata = row;
                console.log(mydata); //This is for checking data
            // Configuration for jqGrid Example 1
                $("#table_list_1").jqGrid(
                    datastr: mydata,
                    datatype: "json",
                    autoheight: true,
                    width: 320,
                    shrinkToFit: true,
                    rowNum: 5,
                    rowList: [5, 10, 15],
                    colNames: ['Id', 'Code', 'Name'],
                    colModel: [
                        name: 'Id', index: 'Id', width: 30,
                        name: 'Code', index: 'Code', width: 50,
                        name: 'Name', index: 'Name', width: 50, sortable: false
                    ],
                    pager: "#pager_list_1",
                    viewrecords: true,
                    caption: "Example jqGrid 1",
                    gridview: true,
                    autoencode: true,
                    hidegrid: false,
                    jsonReader: 
                        repeatitems: false,
                        id: "Id",
                        root: function (obj)  return obj; ,
                        page: function (obj)  return 1; ,
                        total: function (obj)  return 1; ,
                        records: function (obj)  return obj.length; 
                    

                );

            // Add responsive to jqGrid
                $(window).bind('resize', function () 
                    var width = $('.jqGrid_wrapper').width();
                    $('#table_list_1').setGridWidth(width);
                );
            )
        );

    );

    $("#group").click(function ()

        $("#grid").hide();
        $("#ortable").show();
    )

    $("#menu").click(function ()
        $("#myModal").modal("show");

    );
);

这段代码工作得很好：

var mydata = [
    Id: "1", Code: "test", Name: "note"  ,
    Id: "2", Code: "test2", Name: "note2" ];

但不是这个：JSON：

["Id":1,"Code":"ASC","Name":"Aslan \u00c7imento","Address1":"Konya","Address2":" ","City":"Konya","Town":" ","PostCode":"123","Tel1":" ","Tel2":"32434","ContactName":"ASC","ContactTel1":"423432","Email":"[e-mail]","TaxNumber":"2342423","TaxAdministration":"ddsef","IBAN1":"21321312","IBAN2":" ","TCNo":" ","Kep":"[e-mail]","SskNo":"2324234234","Bank1":"safsefes","Bank2":" ","Id":2,"Code":"OYT","Name":"Oyta\u015f A.\u015e.","Address1":"Ankara","Address2":"Ankara","City":"Ankara","Town":" ","PostCode":" ","Tel1":"Ankara","Tel2":"32424","ContactName":"oyt","ContactTel1":"345345","Email":"[e-mail]","TaxNumber":"43543","TaxAdministration":"5435","IBAN1":"453453454","IBAN2":" ","TCNo":" ","Kep":"[e-mail]","SskNo":"345","Bank1":"sadfds","Bank2":"dsfsdf"]

我可以从控制台读取我的数据，但不能在 jqgrid 中读取。我做错了什么？

【参考方案1】：

请始终写下您使用的 jqGrid 的 version 以及 jqGrid 的 fork（free jqGrid、商业 Guriddo jqGrid JS 或版本

选项datatype: "json" 与datastr: mydata 结合使用。您可以将datastr 与datatype: "jsonstring" 结合使用，或者将data: mydata 与datatype: "local" 结合使用。如果您不需要明确阻止数据的本地排序，那么您应该使用datatype: "local" 并通过data 参数指定输入数据。如果使用“free jqGrid”fork，可以跳过datatype: "local"：

 colModel: [
    name: 'Id', key: true, width: 30,
    name: 'Code', width: 50,
    name: 'Name', width: 100, sortable: false
],
data: mydata

见https://jsfiddle.net/OlegKi/vc2v9aLw/。你也可以使用datatype: "jsonstring"：

colModel: [
    name: 'Id', key: true, width: 30,
    name: 'Code', width: 50,
    name: 'Name', width: 100, sortable: false
],
datatype: "jsonstring",
datastr: mydata,
jsonReader:  id: "Id" 

见https://jsfiddle.net/OlegKi/stvsxsts/。有关免费 jqGrid 使用的更多基础信息可以找到here。两个网格都显示

【讨论】：

这比我想象的要快。工作得很好，谢谢。