我正在尝试使用来自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 (e.g. 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和StationName。谢谢参观。
首先,如果服务器发回您发布的数据,则jqGrid将显示结果(请参阅http://www.ok-soft- gmbh.com/jqGrid/jsonfromsvc.htm)。原因是jqGrid不能很好地工作,因为您将其StationId用作id,但是JSON数据中 的 所有行都具有 与 id 相同的 值50130。因此,例如,如果选择一行,则将选择所有行。
StationId
这DateTime不是标准的JSON类型,并且jqGrid当前不支持它和此功能请求)。要解决该问题,您必须对数据和jqGrid 进行至少一些小的更改。
DateTime
当前的JSON数据中有很多数据为null值。为了减少从服务器发送的空数据的大小,请考虑使用EmitDefaultValue属性。
而且我觉得很奇怪,你不使用像
ajaxGridOptions: { contentType: "application/json" }, serializeRowData: function (data) {return JSON.stringify(data);}
可能您的WFC当前未接收到任何输入参数,诸如此类int page, int rows, string sidx, string sord。如果您至少张贴了调用的服务器方法的原型。
int page, int rows, string sidx, string sord
更新: 在创建一个小的WCF应用程序和一个调用WCF服务的HTML页面之前,我的承诺。
您当前的数据 没有id 。StationId沿着的字段不是关键,因为它在不同的数据行中是相同的。如果在数据中包含id,则可以在列定义中包括该选项,key:true并且jqGrid将使用数据作为id。因为该示例将仅用于显示数据而无需进行数据编辑,所以我在从服务器发送的数据中未包含 任何ID 。在jqGrid的情况下,请使用以1开头的整数计数器作为行ID。如果决定在网格中包括编辑功能,则必须在数据中包含id。
key:true
现在我们去看代码。因为您写道您使用Visual Studio 2010,但对.NET版本一无所获,所以我在.NET 4.0中创建了一个应用程序。的web.config:
web.config
<?xml version="1.0"?> <configuration> <system.web> <compilation debug="true" targetFramework="4.0" /> </system.web> <system.serviceModel> <standardEndpoints> <webHttpEndpoint> <standardEndpoint helpEnabled="true" automaticFormatSelectionEnabled="true"/> </webHttpEndpoint> </standardEndpoints> <behaviors> <serviceBehaviors> <behavior name=""> <serviceMetadata httpGetEnabled="true" /> <serviceDebug includeExceptionDetailInFaults="false" /> </behavior> </serviceBehaviors> </behaviors> <serviceHostingEnvironment multipleSiteBindingsEnabled="true" /> </system.serviceModel> </configuration>
档案WeatherDataService.svc:
WeatherDataService.svc
<%@ ServiceHost Factory="System.ServiceModel.Activation.WebServiceHostFactory" Service="WfcToJqGrid.WeatherDataService" %>
档案IWeatherDataService.cs:
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<WeatherData> 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:
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<WeatherData> _repository = new List<WeatherData>{ 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<WeatherData> 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<WeatherData> 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:
default.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Demonstration how use jqGrid to call WFC service</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/redmond/jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8/css/ui.jqgrid.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8/js/i18n/grid.locale-en.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8/js/jquery.jqGrid.min.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/json2.js"></script> <script type="text/javascript"> //<![CDATA[ jQuery(document).ready(function () { $("#list").jqGrid({ datatype: 'json', url: 'WeatherDataService.svc/GetWeatherData', jsonReader: { repeatitems: false }, loadui: "block", mtype: 'GET', rowNum: 5, rowList: [5, 10, 20, 30], viewrecords: true, colNames: ['Station ID', 'Station Name', 'Timestamp', 'Max Temp', 'Min Temp', 'Precipitation', 'Snowfall', 'SnowDepth'], colModel: [ { name: 'StationId', index: 'StationId', width: 100 }, { name: 'StationName', index: 'StationName', width: 150 }, { name: 'Timestamp', index: 'Timestamp', align: 'right', width: 250, formatter: function (cellvalue, options, rowObject) { // possible characters like "+0100" at the end of string will be ignored return new Date(parseInt(cellvalue.substr(6, cellvalue.length - 8), 10)); } }, { name: 'MaxTemperature', index: 'MaxTemperature', align: 'right', width: 100 }, { name: 'MinTemperature', index: 'MinTemperature', align: 'right', width: 100 }, { name: 'Precipitation', index: 'Precipitation', align: 'right', width: 100 }, { name: 'Snowfall', index: 'Snowfall', align: 'right', width: 100 }, { name: 'SnowDepth', index: 'SnowDepth', align: 'right', width: 100 }, ], pager: '#pager', sortname: 'Timestamp', sortorder: 'asc', height: "100%", width: "100%", prmNames: { nd: null, search: null }, // we switch of data caching on the server // and not use _search parameter caption: 'Weather Records' }); }); //]]> </script> </head> <body> <table id="list"><tr><td/></tr></table> <div id="pager"></div> </body> </html>
您可以在此处下载完整代码。