JQGrid 无法从显示空网格的 JSON 加载数据

Question

我的 JQGrid 代码如下

jQuery("#jqgrid").jqGrid({

mtype: 'GET',
datatype: "json",
height: '350',
colNames: ['<%=Resources.Resource.Action%>','uid', '<%=Resources.Resource.Fullname%>', '<%=Resources.Resource.Username%>', '<%=Resources.Resource.Group%>', '<%=Resources.Resource.Status%>', '<%=Resources.Resource.JoinedDate%>', '<%=Resources.Resource.LastLoginDate%>', '<%=Resources.Resource.LastLoginIp%>'],
colModel: [
    { name: 'act', index: 'act', sortable: false },
    { name: 'uid', index: 'uid' },
    { name: 'userfullname', index: 'userfullname' },
    { name: 'username', index: 'username' },
    { name: 'MemberGroup', index: 'MemberGroup', editable: true },
    { name: 'Status', index: 'Status', align: "right", editable: true },
    { name: 'JoinDate', index: 'JoinDate', align: "right", editable: true, editable: true, sorttype: "date", unformat: pickDate },
    { name: 'LastLoginDate', index: 'LastLoginDate', align: "right", editable: true, editable: true, sorttype: "date", unformat: pickDate },
    { name: 'LoginIp', index: 'LoginIp', sortable: false, editable: true }],
jsonreader: {
    repeatitems: false, root: 'rootUser',
    id: 'uid',
    page:  function(obj) { return 1; },
    total: function(obj) { return 1; },
    records: function (obj) { return obj.rootUser.length; },

},
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager_jqgrid',
sortname: 'uid',
rownumbers: true,
toolbarfilter: true,
viewrecords: true,
sortorder: "asc",
gridComplete: function () {
    var ids = jQuery("#jqgrid").jqGrid('getDataIDs');
    for (var i = 0; i < ids.length; i++) {
        var cl = ids[i];
        be = "<button class='btn btn-xs btn-default btn-quick' title='Edit Row' onclick=\"showPanelPlayer()\"><i class='fa fa-pencil'></i></button>";
        //se = "<button class='btn btn-xs btn-default btn-quick' title='Save Row' onclick=\"jQuery('#jqgrid').saveRow('" + cl + "');\"><i class='fa fa-save'></i></button>";
        //ca = "<button class='btn btn-xs btn-default btn-quick' title='Cancel' onclick=\"jQuery('#jqgrid').restoreRow('" + cl + "');\"><i class='fa fa-times'></i></button>";
        //jQuery("#jqgrid").jqGrid('setRowData', ids[i], { act: be + se + ca });
        jQuery("#jqgrid").jqGrid('setRowData', ids[i], { act: be });
    }
},
editurl: "ajax/dummy-jqtable.html",
caption: "<%=Resources.Resource.MemberListing%>",
multiselect: true,
autowidth: true,

});

当我点击提交按钮时，它会调用我的后端页面并生成 Json。

我的提交按钮代码是

function showPanel() {                    
   var UserName = document.getElementById('txtUser').value;                   
    $('#jqgrid').setGridParam({ url: 'ListUser.aspx?cmd=LoadUser&UN=' + UserName  }).trigger('reloadGrid');
}

从后端返回的 Json 是

{"rootUser":[{"uid":1,"userfullname":"Johnson","username":"Deng","MemberGroup":0,"Status":1,"JoinDate":new Date(1487058713667),"LastLoginDate":new Date(1487058713667),"LoginIp":""},{"uid":2,"userfullname":"James Abb","username":"James","MemberGroup":0,"Status":1,"JoinDate":new Date(1487058713667),"LastLoginDate":new Date(1487058713667),"LoginIp":""}]}

我面临的问题是我的网格显示为空，我的代码中是否遗漏了什么？

Answer 1

由于"JoinDate": new Date(1487058713667) 等使用字段，输入数据不是 JSON 格式。您可以在此处验证 JSON 数据：http://jsonlint.com/。问题的修复取决于您使用的 jqGrid 版本以及来自 jqGrid 的分支（free jqGrid、商业Guriddo jqGrid JS 或版本 formatoptions: { srcformat: "u1000", newformat: "d-M-Y H:i:s" } 来解析从"JoinDate": 1487058713667 到14-Feb-2017 08:51:53 的数据。当然，您可以使用其他 newformat。

我建议你另外不要在循环中使用gridComplete，你调用setRowData。使用自定义格式化程序或formatter: actions 更有效。