jqGrid no se llena con datos

Estoy intentando llenar un jqGrid con datos de un servicio web. He revisado a fondo el código jqGrid y la documentación. Necesito otro par de ojos para mirar el siguiente código y decirme si me falta algo.

Como verá en el código, configuro la grilla para que se cargue cuando la página se carga o durante una actualización. Después de cargar la grilla, hago una llamada Ajax para obtener los datos JSON (nuevamente) y mostrarlos en un div debajo de la grilla.

Veo la mayor parte del comportamiento esperado. Después de cargar la página, la cuadrícula muestra el indicador de carga, luego se inicia la llamada Ajax y los datos JSON se muestran debajo de la cuadrícula. El problema es que la grilla está completamente vacía. Los encabezados de las columnas son correctos, pero no aparecen datos en el cuerpo de la cuadrícula.

Aquí está el código:

$(document).ready(function () { $('#resultDiv').html(''); $('#waitIndicator').hide(); $("#list").jqGrid({ datatype: 'json', url: 'WeatherDataService.svc/GetWeatherData', jsonReader: { root: "Rows", page: "Page", total: "Total", records: "Records", repeatitems: false, userdata: "UserData", id: "StationId" }, loadui: "block", mtype: 'GET', rowNum: 10, rowList: [10, 20, 30], viewrecords: true, colNames: ['Station ID', 'Station Name', 'Timestamp', 'Max Temp', 'Min Temp', 'Precipitation', 'Snowfall', 'SnowDepth'], colModel: [ { name: 'StationId', index: 'StationId' }, { name: 'StationName', index: 'StationName' }, { name: 'Timestamp', index: 'Timestamp', align: 'right' }, { name: 'MaxTemperature', index:'MaxTemperature',align:'right'}, { name: 'MinTemperature', index:'MinTemperature',align:'right'}, { name: 'Precipitation', index: 'Precipitation', align:'right'}, { name: 'Snowfall', index: 'Snowfall', align: 'right' }, { name: 'SnowDepth', index: 'SnowDepth', align: 'right' }, ], pager: '#pager', sortname: 'StationId', sortorder: 'asc', caption: 'Weather Records', loadComplete: function () { // if the page index is not set (eg page index = 0), // force the page index to first page var pageIndex = $('#list').jqGrid('getGridParam', 'page'); if (pageIndex == 0) pageIndex = 1; $('#waitIndicator').show(); $.ajax({ url: 'WeatherDataService.svc/GetWeatherData', type: "GET", data: ({ page: pageIndex, rows: 10, sidx: 'StationId', sord: 'asc' }), dataType: "json", success: function (response) { $('#resultDiv').html(response); $('#waitIndicator').hide(); }, error: function (xmlHttpRequest, textStatus, errorThrown) { $('#resultDiv').html('textStatus: ' + textStatus + ', errorThrown: ' + errorThrown); } }); } }); }); 

Aquí están los datos JSON del servicio web:

 { "Total": 14975, "Page": 1, "Records": 149746, "Rows": [ { "StationId": 50130, "StationName": "ALAMOSA WSO AP", "Timestamp": "\/Date(725871600000)\/", "MaxTemperature": null, "MinTemperature": null, "Precipitation": null, "Snowfall": null, "SnowDepth": null }, { "StationId": 50130, "StationName": "ALAMOSA WSO AP", "Timestamp": "\/Date(725958000000)\/", "MaxTemperature": null, "MinTemperature": null, "Precipitation": null, "Snowfall": null, "SnowDepth": null }, { "StationId": 50130, "StationName": "ALAMOSA WSO AP", "Timestamp": "\/Date(726044400000)\/", "MaxTemperature": null, "MinTemperature": null, "Precipitation": null, "Snowfall": null, "SnowDepth": null }, { "StationId": 50130, "StationName": "ALAMOSA WSO AP", "Timestamp": "\/Date(726130800000)\/", "MaxTemperature": null, "MinTemperature": null, "Precipitation": null, "Snowfall": null, "SnowDepth": null }, { "StationId": 50130, "StationName": "ALAMOSA WSO AP", "Timestamp": "\/Date(726217200000)\/", "MaxTemperature": null, "MinTemperature": null, "Precipitation": null, "Snowfall": null, "SnowDepth": null }, { "StationId": 50130, "StationName": "ALAMOSA WSO AP", "Timestamp": "\/Date(726303600000)\/", "MaxTemperature": null, "MinTemperature": null, "Precipitation": null, "Snowfall": null, "SnowDepth": null }, { "StationId": 50130, "StationName": "ALAMOSA WSO AP", "Timestamp": "\/Date(726390000000)\/", "MaxTemperature": null, "MinTemperature": null, "Precipitation": null, "Snowfall": null, "SnowDepth": null }, { "StationId": 50130, "StationName": "ALAMOSA WSO AP", "Timestamp": "\/Date(726476400000)\/", "MaxTemperature": null, "MinTemperature": null, "Precipitation": null, "Snowfall": null, "SnowDepth": null }, { "StationId": 50130, "StationName": "ALAMOSA WSO AP", "Timestamp": "\/Date(726562800000)\/", "MaxTemperature": null, "MinTemperature": null, "Precipitation": null, "Snowfall": null, "SnowDepth": null }, { "StationId": 50130, "StationName": "ALAMOSA WSO AP", "Timestamp": "\/Date(726649200000)\/", "MaxTemperature": null, "MinTemperature": null, "Precipitation": null, "Snowfall": null, "SnowDepth": null } ], "UserData": null } 

Para la mayoría de las columnas, los valores nulos darán como resultado celdas vacías. Pero espero ver al menos los StationID y StationNames. Gracias por echar un vistazo.

En primer lugar, si el servidor envía los datos que ha publicado, el jqGrid mostrará los resultados (consulte http://www.ok-soft-gmbh.com/jqGrid/jsonfromsvc.htm ). De la causa, jqGrid no funcionará realmente bien, porque usted usa StationId como id, pero todas las filas en sus datos JSON tienen el mismo valor 50130 que el id. Entonces, por ejemplo, si selecciona una fila, se seleccionarán todas las filas.

DateTime no es un tipo JSON estándar y no es compatible actualmente con jqGrid (consulte esta respuesta y esta solicitud de funciones ). Para solucionar el problema, debe realizar al menos algunos pequeños cambios tanto en los datos como en jqGrid.

Los datos JSON actuales tienen una gran cantidad de datos con valor nulo. Para reducir el tamaño del envío de datos vacíos desde el servidor, considere usar el atributo EmitDefaultValue .

Además, me parece extraño que no uses parámetros como

 ajaxGridOptions: { contentType: "application/json" }, serializeRowData: function (data) {return JSON.stringify(data);} 

(ver otra respuesta anterior ). Probablemente su WFC no reciba actualmente ningún parámetro de entrada como la int page, int rows, string sidx, string sord etc. Si publica al menos prototipo de su método de servidor al que llama.

ACTUALIZADO: Cómo prometí antes de crear una pequeña aplicación WCF y una página HTML que llama al servicio WCF.

Sus datos actuales no tienen identificación . El campo StationId along no es una clave porque es el mismo en diferentes filas de datos. Si incluye la identificación en sus datos, puede incluir en la definición de la columna la key:true opción key:true y jqGrid usará los datos como id. Como el ejemplo se usará solo para mostrar los datos sin edición de datos, no incluí una identificación en el envío de datos desde el servidor. En el caso jqGrid use un contador entero que comience con 1 como ID de fila. Si decide incluir funciones de edición en la grilla, deberá incluir como id en los datos.

Ahora vamos al código. Como escribió que usa Visual Studio 2010 y no responde nada sobre la versión de .NET, creé una aplicación en .NET 4.0. El web.config :

                       

Archivo WeatherDataService.svc :

 <%@ ServiceHost Factory="System.ServiceModel.Activation.WebServiceHostFactory" Service="WfcToJqGrid.WeatherDataService" %> 

Archivo IWeatherDataService.cs :

 using System; using System.Collections.Generic; using System.Runtime.Serialization; using System.ServiceModel; using System.ServiceModel.Web; namespace WfcToJqGrid { [ServiceContract] public interface IWeatherDataService { [OperationContract, WebGet (RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "GetWeatherData?page={page}&rows={rows}" + "&sidx={sortIndex}&sord={sortDirection}")] WeatherDataForJqGrid GetDataForjqGrid (int page, int rows, string sortIndex, SortDirection sortDirection); } [DataContract] public enum SortDirection { [EnumMember (Value = "asc")] Asc, [EnumMember (Value = "desc")] Desc } // jsonReader: { repeatitems: false } [DataContract] public class WeatherDataForJqGrid { [DataMember (Order=0, Name = "total")] public int Total { get; set; } // total number of pages [DataMember (Order = 1, Name = "page")] public int Page { get; set; } // current zero based page number [DataMember (Order = 2, Name = "records")] public int Records { get; set; } // total number of records [DataMember (Order = 3, Name = "rows")] public IEnumerable Rows { get; set; } } [DataContract] public class WeatherData { [DataMember (Order=0)] public int StationId { get; set; } [DataMember (Order = 1)] public string StationName { get; set; } [DataMember (Order = 2)] public DateTime Timestamp { get; set; } [DataMember (Order = 3, EmitDefaultValue = false)] public string MaxTemperature { get; set; } [DataMember (Order = 4, EmitDefaultValue = false)] public string MinTemperature { get; set; } [DataMember (Order = 5, EmitDefaultValue = false)] public string Precipitation { get; set; } [DataMember (Order = 6, EmitDefaultValue = false)] public string Snowfall { get; set; } [DataMember (Order = 7, EmitDefaultValue = false)] public string SnowDepth { get; set; } } } 

Archivo WeatherDataService.svc.sc :

 using System; using System.Collections.Generic; using System.Linq; using System.ServiceModel.Web; using System.Net; namespace WfcToJqGrid { public class WeatherDataService : IWeatherDataService { // we use very simple database model to simulate a real data private static IQueryable _repository = new List{ new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP", Timestamp = new DateTime(1993,1,1,8,0,0)}, new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP", Timestamp = new DateTime(1993,1,2,8,0,0)}, new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP", Timestamp = new DateTime(1993,1,3,8,0,0)}, new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP", Timestamp = new DateTime(1993,1,4,8,0,0)}, new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP", Timestamp = new DateTime(1993,1,5,8,0,0)}, new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP", Timestamp = new DateTime(1993,1,6,8,0,0)}, new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP", Timestamp = new DateTime(1993,1,7,8,0,0)}, new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP", Timestamp = new DateTime(1993,1,8,8,0,0)}, new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP", Timestamp = new DateTime(1993,1,9,8,0,0)}, new WeatherData { StationId = 50130, StationName = "ALAMOSA WSO AP", Timestamp = new DateTime(1993,1,10,8,0,0)} }.AsQueryable (); public WeatherDataForJqGrid GetDataForjqGrid (int page, int rows, string sortIndex, SortDirection sortDirection){ int totalRecords = _repository.Count(); // sorting of data IQueryable orderdData = _repository; System.Reflection.PropertyInfo propertyInfo = typeof(WeatherData).GetProperty (sortIndex); if (propertyInfo != null) { orderdData = sortDirection == SortDirection.Desc ? (from x in _repository orderby propertyInfo.GetValue (x, null) descending select x) : (from x in _repository orderby propertyInfo.GetValue (x, null) select x); } // paging of the results IEnumerable pagedData = orderdData .Skip ((page > 0? page - 1: 0) * rows) .Take (rows); // force revalidate data on the server on every request if (WebOperationContext.Current != null) WebOperationContext.Current.OutgoingResponse.Headers.Set ( HttpResponseHeader.CacheControl, "max-age=0"); return new WeatherDataForJqGrid { Page = page, Records = totalRecords, Total = (totalRecords + rows - 1) / rows, Rows = pagedData }; } } } 

(Lea más sobre el almacenamiento en caché de “datos jqGrid almacenados en el caché del navegador” ) y default.htm :

    Demonstration how use jqGrid to call WFC service           

Puedes descargar el código completo aquí .