jqGrid不会填充数据

我正在尝试使用来自Web服务的数据填充jqGrid。 我已经彻底查看了jqGrid代码和文档。 我需要另一组眼睛来查看下面的代码并告诉我我是否遗漏了一些东西。

正如您在代码中看到的那样，我将网格设置为在页面加载或刷新期间加载。 网格加载后，我进行Ajax调用以获取JSON数据（再次）并显示在网格下方的div中。

我看到了大部分预期的行为。 页面加载后，网格显示加载指示符，然后启动Ajax调用，并在网格下方显示JSON数据。 问题是网格完全是空的。 列标题是正确的，但网格正文中没有数据。

这是代码：

$(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); } }); } }); }); 

以下是来自Web服务的JSON数据：

 { "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 } 

对于大多数列，空值将导致空单元格。 但我希望至少看到StationID和StationNames。 谢谢参观。

Answer 1

首先，如果服务器发回您发布的数据，jqGrid将显示结果（请参阅http://www.ok-soft-gmbh.com/jqGrid/jsonfromsvc​​.htm ）。 因为jqGrid工作效果不太好，因为你使用StationId作为id，但是你的JSON数据中的所有行都具有与 id 相同的值50130。 因此，例如，如果选择一行，则将选择所有行。

DateTime不是标准的JSON类型，jqGrid目前不支持它（请参阅此答案和此function请求 ）。 要解决此问题，您必须在数据和jqGrid中至少进行一些小的更改 。

当前的JSON数据有很多具有空值的数据。 要减少从服务器发送的空数据的大小，请考虑使用EmitDefaultValue属性。

而且我觉得很奇怪，你不要使用像这样的参数

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

（见另一个老答案 ）。 可能你的WFC目前没有收到任何输入参数，如int page, int rows, string sidx, string sord等）。 如果您至少发布您调用的服务器方法的原型。

更新：我在创建一个小型WCF应用程序和一个调用WCF服务的HTML页面之前的承诺。

您当前的数据没有ID 。 字段StationId不是键，因为它在不同的数据行中是相同的。 如果在数据中包含id，则可以在列定义中包含选项key:true ，jqGrid将使用数据作为id。 因为该示例仅用于显示没有数据编辑的数据，所以我在服务器发送的数据中不包含id 。 在jqGrid的情况下，使用以1开头的整数计数器作为行ID。 如果您决定在网格中包含编辑function，则必须在数据中包含id。

现在我们转到代码。 因为您写道您使用Visual Studio 2010并且没有回答关于.NET的版本，所以我在.NET 4.0中创建了一个应用程序。 web.config ：

文件WeatherDataService.svc ：

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

文件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; } } } 

文件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 }; } } } 

（阅读更多关于缓存“存储在浏览器缓存中的jqGrid数据？” ）和default.htm ：

您可以在此处下载完整代码。