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

时间:2016-03-24 06:29:03

标签: javascript jquery jqgrid getjson

数据未显示在网格中。如何将cells.value映射到每列?

Json输出:

[
    {"UserName":"8125579231","RoleId":1,"Name":"Sreekanth","RoleName":"Administrator"},
    {"UserName":"9676078986","RoleId":1,"Name":"Karteek","RoleName":"Administrator"},
    {"UserName":"9703804807","RoleId":1,"Name":"Kiran","RoleName":"Administrator"},    
    {"UserName":"9177458358","RoleId":1,"Name":"Venkat","RoleName":"Administrator"},
    {"UserName":"7760699118","RoleId":2,"Name":"RAM","RoleName":"Sales"}
]

代码:

 $j('#list2').jqGrid({
            caption: "Employee Details",
            url: "http://localhost:9611/api/Master/GetBackendUsersList",
            data: "{}",
            datatype: "json",
            //contentType: "application/json; charset-utf-8",
            mtype: "GET",
            colNames: ["UserName", "RoleId", "Name", "RoleName"],
            colModel: [
                  { name: "UserName", index: 'UserName', width: 150 },
                  { name: 'RoleId', index: "RoleId", width: 150 },
                  { name: "Name", index: "Name", width: 150 },
                  { name: "RoleName", index: "RoleName", width: 150 }
            ],
            rowNum: 10,
            loadonce:true,
            //rowList: [10, 20, 30],
            //pager: '#jQGridDemoPager',
            sortname: "UserName",
            viewrecords: true,
            sortorder: "desc",
});

1 个答案:

答案 0 :(得分:1)

我已根据json数据更新了代码中的一些内容,现在看起来不错。

var $j = $.noConflict(true);

//Updated with format how you're getting from web service.
var mydata = [
  {"UserName":"asda","RoleId":1,"Name":"Sreekanth","RoleName":"Administrator"},
    {"UserName":"sa","RoleId":1,"Name":"Karteek","RoleName":"Administrator"},
    {"UserName":"asda","RoleId":1,"Name":"Kiran","RoleName":"Administrator"},    
    {"UserName":"asda","RoleId":1,"Name":"Venkat","RoleName":"Administrator"},
    {"UserName":"asdas","RoleId":2,"Name":"RAM","RoleName":"Sales"}
];
 //Updated with no conflict variable
 $j('#list2').jqGrid({
        caption: "Employee Details",
        data: mydata, // Given local data
        datatype: "local", // Changed to local sice loading local data.
        colNames: ["UserName", "RoleId", "Name", "RoleName"],
        colModel: [
              { name: "UserName", index: 'UserName', width: 150 },
              { name: 'RoleId', index: "RoleId", width: 150 },
              { name: "Name", index: "Name", width: 150 },
              { name: "RoleName", index: "RoleName", width: 150 }
        ],
        rowNum: 10,
        pager: '#jQGridDemoPager',
        sortname: "UserName",
        viewrecords: true,
        sortorder: "desc",
 });

这是HTML部分,

<table id="list2">
   <tr>
       <td />
   </tr>
</table>
<div id="jQGridDemoPager"></div>

请参阅Demo