jqgrid表显示空白

时间:2013-06-24 11:50:58

标签: jquery jqgrid

jqgrid显示黑色表,即使它正确显示记录数,我正在使用返回json字符串的webservice我可以看到它从ajax调用返回的数据但它没有显示在表,我从webservice获得的json数据是:

Json:
 [{"profile_id":"413a75c9-03b4-4660-841b-2d213a2e2b95", "id":"313","first_name":"abc", "email":"abc@gmail.com"} , {"profile_id":"498fa726-0a34-4bbd-baab-6b4f2eb13bcf" , "id":"308" , "first_name":"xyz" , "email":"xyz@gmail.com"}]

    $.ajax({
            url:'rest/WebService/Getdata',
            dataType:'json', 
            success: function (data_response) {
                jqgrid(JSON.stringify(data_response));
            },
            error: function (error) {
                alert("error");
                alert(JSON.stringify(error));
            }
            });

    function jqgrid(jsondata){
        $("#list3").jqGrid({
        datatype:"jsonstring",
        datastr:jsondata,
        colNames:['Profile_id','id', 'Name', 'Email'],
        colModel:[
            {name:'Profile_id',index:'profile_id', width:500},
            {name:'id',index:'id', width:250},
            {name:'Name',index:'first_name', width:300},
            {name:'Email',index:'email', width:240} 
        ],
        jsonReader: {
            id: "1",
            cell: "",
            root: "root",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false
        },      
        emptyrecords: "Nothing to display",
        rowNum:10,
        rowList:[10,20,30],
        pager: $('#pager3'),
        viewrecords: true,
        sortorder: "desc",
        caption: "Data table"
    });
    }

1 个答案:

答案 0 :(得分:1)

输入您使用的JSON数据

{
    [
        {
            "profile_id": "413a75c9-03b4-4660-841b-2d213a2e2b95",
            "id": "313",
            "first_name": "abc",
            "email": "abc@gmail.com"
        },
        {
            "user_profile_id": "498fa726-0a34-4bbd-baab-6b4f2eb13bcf",
            "id": "308",
            "first_name": "xyz",
            "email": "xyz@gmail.com"
        }
    ]
}

错了。您应该将其修复为此示例,例如使用数组作为答案

[
    {
        "profile_id": "413a75c9-03b4-4660-841b-2d213a2e2b95",
        "id": "313",
        "first_name": "abc",
        "email": "abc@gmail.com"
    },
    {
        "user_profile_id": "498fa726-0a34-4bbd-baab-6b4f2eb13bcf",
        "id": "308",
        "first_name": "xyz",
        "email": "xyz@gmail.com"
    }
]

或类似

{
    "result": [
        {
            "profile_id": "413a75c9-03b4-4660-841b-2d213a2e2b95",
            "id": "313",
            "first_name": "abc",
            "email": "abc@gmail.com"
        },
        {
            "user_profile_id": "498fa726-0a34-4bbd-baab-6b4f2eb13bcf",
            "id": "308",
            "first_name": "xyz",
            "email": "xyz@gmail.com"
        }
    ]
}

我严格建议您手动使用datatype: "json"代替使用$.ajax

如果使用当前版本的jqGrid(4.5.2),则只需删除jsonReader即可。您当前的jsonReader错误至少是因为使用id: "1"。我建议您另外将pager: $('#pager3')替换为pager: '#pager3'并添加gridview: true, autoencode: true, height: "auto"选项。