Question

我正在创建jqgrid但是json加载显示未定义的区域。

我无法弄清楚数据显示为未定义的原因。以下是我的代码：

$(document).ready(function(){
    $.ajax({
        type : "POST",
        url : "../ShowUploadedCSVFile",
        success : function(response) {
            showJQgrid(response);
        },
        error : function() {
            alert("Failure");
        }
    });
    function showJQgrid(Data)
    {
        $("#showCSVList").jqGrid("clearGridData");
        var grid = $('#showCSVList');
        if (grid[0].grid == undefined) 
        {
        } 
        else 
        {
            delete grid;
            $('#showCSVList').GridUnload('#showCSVList');
        }
        var parse = Data;
        global = parse;
        var Jsj = eval('(' + parse + ')');
        var colNames = new Array();
        var colModel = new Array();
        var j = 0;
        for ( var i = 0; i < Jsj.Header.length; i++) 
        {
            colNames.push(Jsj.Header[i]);
            colModel.push({
                name : Jsj.Header[i],
                index : Jsj.Header[i],
                width : '75%',
                align : 'left',
                editable : true
            });
        }
        $('#showCSVList').jqGrid({
            datatype : 'local',
            colNames : colNames,
            colModel : colModel,
            scrollOffset : 0,
            pager : '#showCSVPager',
            rowNum : 5,
            loadonce : true,
            multiselect : true,
            rowList : [ 5, 10, 20, 50 ],
            viewrecords : true

        });
        for ( var i = 0; i < Jsj.data.length; i++) 
        {
            jQuery("#showCSVList").jqGrid('addRowData', i+1, Jsj.data[i]);
        }
        $("#showCSVList").jqGrid('setGridHeight', $("#center").height());
        $("#showCSVList").navGrid("#showCSVPager", {
            edit : false,
            add : false,
            del : true
        });
        $("#showCSVList").jqGrid('inlineNav', "#showCSVPager");
    }
});

我的Json文件是：

{
    "Header": ["Name", "Party", "Province", "Age", "Gender"],
    "data": [{
        "Name": "Mourani, Maria",
        "Age": "43",
        "Gender": "Female",
        "Party": "BlocQuebecois",
        "Province": "Quebec"
    }, {
        "Name": "Sellah,Djaouida",
        "Age": "30",
        "Gender": "Female",
        "Party": "NDP",
        "Province": "Quebec"
    }, {
        "Name": "St-Denis,Lise",
        "Age": "72",
        "Gender": "Female",
        "Party": "NDP",
        "Province": "Quebec"
    }]
}

由此产生的输出：

enter image description here

Answer 1

问题在于以下几行;

var parse = Data;
global = parse;
var Jsj = eval('(' + parse + ')');

由于你正在使用json数据，所以你不需要评估它，如果你传入一个字符串，你应该使用JSON.parse()。将上述内容更改为：

var Jsj = Data;

页脚显示周围还有一些其他问题不正确，遗憾的是我之前没有使用过jqGrid（我更喜欢datatables.net plugin）。我还建议你远离变量名称，如parse，而严格来说，它不是一个令人困惑的保留字

jsFiddle Demo

json数据未显示在jqgrid中

1 个答案: