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

如果在我看来你犯了同样的错误，比如here。

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

我建议您也不要使用$.ajaxSetup、$.ajax 和$("#orders").jqGrid 的复杂构造，并将datatype 作为函数。在引入 ajaxGridOptions 和 serializeGridData 选项之前，它对 jqGrid 是有益的。在 jqGrid 3.6 及更高版本中，jqGrid 可以直接从几乎任何数据源加载数据。有关更多详细信息和代码示例，请参阅来自the answer（this、this）的链接。也可以搜索ajaxGridOptionsandserializeGridData`。