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

时间:2011-03-07 18:57:30

标签: jquery asp.net json jqgrid asmx

我现在空白,回答为什么这不起作用。 基本上,最终结果是一个没有抛出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\":\"\"}]"}

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

任何帮助解决此问题的人都将不胜感激!

谢谢,

特里

1 个答案:

答案 0 :(得分:0)

如果我觉得你犯了同样的错误,比如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。在引入ajaxGridOptionsserializeGridData选项之前,这对jqGrid很有用。在jqGrid 3.6及更高版本中,jqGrid可以直接从几乎任何数据源加载数据。有关详细信息和代码示例,请参阅the answerthisthis)中的链接。您还可以搜索ajaxGridOptions and serializeGridData`。

相关问题