jqGrid - ASP.NET WebService JSON 数据源显示为空白

Question

我对为什么这不起作用的答案一片空白。 本质上，最终结果是一个空白网格，没有抛出 Javascript 或 XHR 错误。

Javascript 代码：

var MyServiceURL = "MyService.asmx/";

function getOrders() {
    $.ajax({
        type: "POST",
        dataType: "json",
        url: MyServiceURL + 'GetOrders',
        success: function(data) {
            var thegrid = $("#orders")[0];
            thegrid.addJSONData(data);
        },
        error: function(e) {
            var error = $.parseJSON(e.responseText);
            $('#msg').html(error.Message);
        }
    });
}

function bindGrid() {
    $("#orders").jqGrid({
        datatype: getOrders,
        colNames: ['CO_ODNO', 'CO_STATUS', 'ROUTE_CODE', 'ROUTE_STOP', 'PRIOR_NAME', 'CU_NO'],
        colModel: [{ name: 'CO_ODNO', index: 'CO_ODNO', width: 200, align: 'left' },
                   { name: 'CO_STATUS', index: 'CO_STATUS', width: 200, align: 'left' },
                   { name: 'ROUTE_CODE', index: 'ROUTE_CODE', width: 200, align: 'left' },
                   { name: 'ROUTE_STOP', index: 'ROUTE_STOP', width: 200, align: 'left' },
                   { name: 'PRIOR_NAME', index: 'PRIOR_NAME', width: 200, align: 'left' },
                   { name: 'CU_NO', index: 'CU_NO', width: 200, align: 'left' }
                   ],
        rowNum: 10,
        rowList: [5, 10, 20, 50, 100],
        sortname: 'CO_ODNO',
        pager: $('#pager'),
        sortorder: "desc",
        viewrecords: true
    });


}

$(document).ready(function() {

    $.ajaxSetup({
        type: "POST",
        cache: false,
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataFilter: function(data) {
            var msg;

            if (typeof (JSON) !== 'undefined' &&
            typeof (JSON.parse) === 'function')
                msg = JSON.parse(data);
            else
                msg = eval('(' + data + ')');

            if (msg.hasOwnProperty('d'))
                return msg.d;
            else
                return msg;
        }
    });

    $('#btnGetOrders').click(function() {
        bindGrid();
    });

});

从服务器返回的数据（使用 JSON Lint 验证）：

{"d":"[{\"CO_ODNO\":\"1               \",\"CO_STATUS\":\"D\",\"ROUTE_CODE\":\"K&H \",\"ROUTE_STOP\":0,\"PRIOR_NAME\":\"\",\"CU_NO\":\"24105     \",\"SHIP_TO\":\"24105     \",\"ORDER_DT_TM\":\"\\/Date(1044635082000)\\/\",\"ORDER_REQD_DT\":\"\\/Date(1059624060000)\\/\",\"SHIP_REQD_DT\":\"\\/Date(1059624060000)\\/\",\"ORDER_TYPE\":\"LIC\",\"CARRIER\":\"\",\"TIMESTAMP\":\"\\/Date(1059572051000)\\/\",\"ORDER_DEL_DT\":\"\\/Date(1044635105000)\\/\",\"TRAFFIC_REF_NO\":\"\",\"SITE\":3,\"PALLET_CUBE\":-1,\"HOST_ODNO\":\"1\",\"CLI_NO\":\"\",\"SERVICE_LEVEL\":\"\",\"EMPLOYEE_NUMBER\":\"\",\"PAY_METHOD\":\"                \",\"CU_NAME\":\"\",\"PU_ORDER_FL\":\"Y\",\"DELIVERY_FL\":\"\",\"ENTRY_FL\":\"\"},{\"CO_ODNO\":\"100056          \",\"CO_STATUS\":\"D\",\"ROUTE_CODE\":\"\",\"ROUTE_STOP\":0,\"PRIOR_NAME\":\"\",\"CU_NO\":\"802977    \",\"SHIP_TO\":\"802977    \",\"ORDER_DT_TM\":\"\\/Date(1045755045000)\\/\",\"ORDER_REQD_DT\":\"\\/Date(1045803660000)\\/\",\"SHIP_REQD_DT\":\"\\/Date(1045803660000)\\/\",\"ORDER_TYPE\":\"LIC\",\"CARRIER\":\"\",\"TIMESTAMP\":\"\\/Date(1144859314000)\\/\",\"ORDER_DEL_DT\":\"\\/Date(1045777318000)\\/\",\"TRAFFIC_REF_NO\":\"\",\"SITE\":3,\"PALLET_CUBE\":-1,\"HOST_ODNO\":\"\",\"CLI_NO\":\"\",\"SERVICE_LEVEL\":\"\",\"EMPLOYEE_NUMBER\":\"\",\"PAY_METHOD\":\"                \",\"CU_NAME\":\"\",\"PU_ORDER_FL\":\"N\",\"DELIVERY_FL\":\"\",\"ENTRY_FL\":\"\"},{\"CO_ODNO\":\"100101          \",\"CO_STATUS\":\"D\",\"ROUTE_CODE\":\"\",\"ROUTE_STOP\":0,\"PRIOR_NAME\":\"\",\"CU_NO\":\"806821    \",\"SHIP_TO\":\"806821    \",\"ORDER_DT_TM\":\"\\/Date(1045760795000)\\/\",\"ORDER_REQD_DT\":\"\\/Date(1045803660000)\\/\",\"SHIP_REQD_DT\":\"\\/Date(1045803660000)\\/\",\"ORDER_TYPE\":\"LIC\",\"CARRIER\":\"\",\"TIMESTAMP\":\"\\/Date(1144859314000)\\/\",\"ORDER_DEL_DT\":\"\\/Date(1045777603000)\\/\",\"TRAFFIC_REF_NO\":\"\",\"SITE\":3,\"PALLET_CUBE\":-1,\"HOST_ODNO\":\"100101\",\"CLI_NO\":\"\",\"SERVICE_LEVEL\":\"\",\"EMPLOYEE_NUMBER\":\"\",\"PAY_METHOD\":\"                \",\"CU_NAME\":\"\",\"PU_ORDER_FL\":\"Y\",\"DELIVERY_FL\":\"\",\"ENTRY_FL\":\"\"},{\"CO_ODNO\":\"100165          \",\"CO_STATUS\":\"D\",\"ROUTE_CODE\":\"3   \",\"ROUTE_STOP\":0,\"PRIOR_NAME\":\"\",\"CU_NO\":\"21046     \",\"SHIP_TO\":\"21046     \",\"ORDER_DT_TM\":\"\\/Date(1045771536000)\\/\",\"ORDER_REQD_DT\":\"\\/Date(1043125260000)\\/\",\"SHIP_REQD_DT\":\"\\/Date(1043125260000)\\/\",\"ORDER_TYPE\":\"LIC\",\"CARRIER\":\"\",\"TIMESTAMP\":\"\\/Date(1138107143000)\\/\",\"ORDER_DEL_DT\":\"\\/Date(1138107143000)\\/\",\"TRAFFIC_REF_NO\":\"\",\"SITE\":3,\"PALLET_CUBE\":-1,\"HOST_ODNO\":\"100165\",\"CLI_NO\":\"\",\"SERVICE_LEVEL\":\"\",\"EMPLOYEE_NUMBER\":\"\",\"PAY_METHOD\":\"                \",\"CU_NAME\":\"\",\"PU_ORDER_FL\":\"N\",\"DELIVERY_FL\":\"\",\"ENTRY_FL\":\"\"},{\"CO_ODNO\":\"100192          \",\"CO_STATUS\":\"D\",\"ROUTE_CODE\":\"\",\"ROUTE_STOP\":0,\"PRIOR_NAME\":\"\",\"CU_NO\":\"91163     \",\"SHIP_TO\":\"91163     \",\"ORDER_DT_TM\":\"\\/Date(1045775053000)\\/\",\"ORDER_REQD_DT\":\"\\/Date(1045803660000)\\/\",\"SHIP_REQD_DT\":\"\\/Date(1045803660000)\\/\",\"ORDER_TYPE\":\"LIC\",\"CARRIER\":\"\",\"TIMESTAMP\":\"\\/Date(1144859314000)\\/\",\"ORDER_DEL_DT\":\"\\/Date(1045777813000)\\/\",\"TRAFFIC_REF_NO\":\"\",\"SITE\":3,\"PALLET_CUBE\":-1,\"HOST_ODNO\":\"100192\",\"CLI_NO\":\"\",\"SERVICE_LEVEL\":\"\",\"EMPLOYEE_NUMBER\":\"\",\"PAY_METHOD\":\"                \",\"CU_NAME\":\"\",\"PU_ORDER_FL\":\"Y\",\"DELIVERY_FL\":\"\",\"ENTRY_FL\":\"\"}]"}

我无法作为新用户发布屏幕截图，但列已正确创建并显示为空白。

任何解决此问题的帮助将不胜感激！

谢谢，

特里

Answer 1

如果在我看来，您犯了同样的错误，例如这里。

首先，我假设在 Web 方法 GetOrders 中，您使用 JavaScriptSerializer 来序列化代表网格行的对象，并且您的服务返回 string< /代码>。结果，数据（字符串）的 JSON 表示形式将被添加到具有 d 属性 {d:result} 的对象中，并且所有内容都将是 one more时间转换为 JSON。相反，您的 Web 方法应该只返回 List 类型。您可以验证这一点，您将使用 thegrid.addJSONData(jQuery.parseJSON(data.d)) 而不是 thegrid.addJSONData(data)

我建议您也不要将 $.ajaxSetup、$.ajax 和 $("#orders").jqGrid 与数据类型结合使用代码> 作为函数。在引入 ajaxGridOptions 和 serializeGridData 选项之前，这对于 jqGrid 来说是很好的。在 jqGrid 3.6 及更高版本中，jqGrid 可以直接从几乎任何数据源加载数据。请参阅答案中的链接（这个，此）了解更多详细信息和代码示例。您还可以搜索 ajaxGridOptions和serializeGridData`。