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

时间:2017-02-14 12:34:36

标签: javascript jquery jqgrid jqgrid-formatter

我的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":""}]}

问题是我面临的是我的网格显示为空,是否是我错过的任何形式我的代码?

1 个答案:

答案 0 :(得分:0)

由于"JoinDate": new Date(1487058713667)等使用字段,输入数据不是JSON格式。您可以在此处验证JSON数据:http://jsonlint.com/。问题的解决方案取决于您使用的jqGrid的版本以及jqGrid(free jqGrid,商业Guriddo jqGrid JS的分支或版本&lt; = 4.7中的旧jqGrid)。例如,免费的jqGrid允许使用formatoptions: { srcformat: "u1000", newformat: "d-M-Y H:i:s" }来解析从"JoinDate": 148705871366714-Feb-2017 08:51:53的数据。您可以使用其他newformat

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

相关问题