Прежде всего, если сервер отправит обратно отправленные вами данные, jqGrid отобразит результаты (см. http://www.ok -soft-gmbh.com / jqGrid / jsonfromsvc.htm ).Конечно, jqGrid будет работать не очень хорошо, потому что вы используете StationId в качестве идентификатора, но все строки в ваших данных JSON имеют такое же значение 50130, что и идентификатор.Так, например, если вы выберете одну строку, будут выбраны все строки.
DateTime не является стандартным типом JSON и в настоящее время не поддерживается jqGrid (см. этот ответ и запрос этой функции ).Чтобы решить эту проблему, вы должны сделать хотя бы несколько небольших изменений как в данных, так и в jqGrid.
Текущие данные JSON содержат много данных с нулевым значением.Чтобы уменьшить размер пустых данных, отправляемых с сервера, рассмотрите возможность использования атрибута EmitDefaultValue .
Более того, я нахожу странным, что вы не используете такие параметры, как
ajaxGridOptions: { contentType: "application/json" },
serializeRowData: function (data) {return JSON.stringify(data);}
(см. другой старый ответ ).Возможно, ваш WFC в настоящее время не получает никаких входных параметров, таких как int page, int rows, string sidx, string sord и т. Д.).Если вы разместите хотя бы прототип вашего серверного метода, который вы вызываете.
ОБНОВЛЕНО: Как я и обещал, прежде чем создал небольшое приложение WCF и HTML-страницу, которая вызывает службу WCF.
Ваши текущие данные не имеют идентификатора .Поле StationId вдоль не является ключом, поскольку оно одинаково в разных строках данных.Если вы включите идентификатор в свои данные, вы можете включить в определение столбца параметр key:true, и jqGrid будет использовать данные в качестве идентификатора.Поскольку пример будет использоваться только для отображения данных без редактирования данных, я включил без идентификатора в данные, отправленные с сервера.В случае jqGrid используйте счетчик целых чисел, начинающийся с 1 в качестве идентификатора строки.Если вы решите включить функции редактирования в сетку, вам придется включить в данные идентификатор в качестве идентификатора.
Теперь перейдем к коду.Вы написали, что используете Visual Studio 2010 и ничего не отвечаете о версии .NET. Я создал приложение в .NET 4.0.Файл 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:
<%@ 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<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:
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:
<!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>
Вы можете загрузить полный код здесь .