jqGrid不填充数据 [英] jqGrid does not populate with data
问题描述
我正在尝试使用来自Web服务的数据填充jqGrid.我已经仔细阅读了jqGrid代码和文档.我需要另一双眼睛看下面的代码，并告诉我是否缺少某些内容.
I am trying to populate a jqGrid with data from a web service. I have looked at the jqGrid code and documentation thoroughly. I need another set of eyes to look at the code below and tell me if I'm missing something.
正如您将在代码中看到的那样，我将网格设置为在页面加载时或刷新期间加载.网格加载后，我再次进行Ajax调用以获取JSON数据并显示在网格下方的div中.
As you'll see in the code, I have the grid set up to load when the page loads or during a refresh. After the grid loads, I make an Ajax call to get the JSON data (again) and display in a div below the grid.
我看到了大多数预期的行为.页面加载后，网格显示加载指示器，然后启动Ajax调用，并且JSON数据显示在网格下方.问题在于网格完全是空的.列标题正确，但是网格主体中没有数据.
I see most of the expected behavior. After the page loads, the grid displays the loading indicator, then the Ajax call is initiated and the JSON data is shown below the grid. The problem is that the grid is completely empty. The column headers are correct, but no data appears in the body of the grid.
这是代码:
$(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数据:
Here is the JSON data from the web service:
{
"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.感谢您的关注.
For most of the columns the null values will result is empty cells. But I expect to see at least the StationIDs and StationNames. Thanks for taking a look.
推荐答案
首先，如果服务器发回您发布的数据，则jqGrid将显示结果(请参见
First of all if the server send back the data which you posted, the jqGrid will do displayed the results (see http://www.ok-soft-gmbh.com/jqGrid/jsonfromsvc.htm). Of cause jqGrid will works not really good, because you use StationId as the id, but all rows in your JSON data has the same value 50130 as the id. So, for example, if you select one row all rows will be selected.
DateTime不是标准的JSON类型，jqGrid当前不支持它(请参见此功能请求).要解决该问题，您必须至少在其中进行一些小更改数据和jqGrid都是如此.
The DateTime is not a standard JSON type and it is not supported currently by jqGrid (see this answer and this feature request). To fix the problem you have to make at least some small changes in both data and the jqGrid.
当前JSON数据中有很多数据为空值.为了减少从服务器发送的空数据的大小，请考虑使用
The current JSON data has a lot of data with null value. To reduce the size of empty data send from the server consider to use EmitDefaultValue attribute.
此外，我发现很奇怪，您没有使用类似的参数
Moreover I find strange, that you not use parameters like
ajaxGridOptions: { contentType: "application/json" },
serializeRowData: function (data) {return JSON.stringify(data);}
(请参见另一个旧答案).您的WFC可能当前未接收到任何输入参数，例如int page, int rows, string sidx, string sord等.如果您至少张贴了调用的服务器方法的原型.
(see another old answer). Probably your WFC don't receive currently any input parameters like int page, int rows, string sidx, string sord and so on). If you post at least prototype of your server method which you call.
更新:在创建一个小的WCF应用程序和一个调用WCF服务的HTML页面之前，我的承诺.
UPDATED: How I promised before I created a small WCF application and a HTML page which call the WCF service.
您当前的数据没有ID .字段StationId不是键，因为它在不同的数据行中是相同的.如果在数据中包含id，则可以在列定义中包括选项key:true，并且jqGrid将使用数据作为id.由于该示例仅用于显示数据而无需编辑数据，因此我在从服务器发送的数据中包括了 no id .在jqGrid的情况下，请使用以1开头的整数计数器作为行ID.如果您决定在网格中包括编辑功能，则必须在数据中包含id.
Your current data has no id. The field StationId along is not a key because it is the same in different data rows. If you include id in your data you can include in the column definition the option key:true and jqGrid will use the data as the id. Because the example will be used only to display the data without data editing I included no id in the data send from the server. In the case jqGrid use integer counter starting with 1 as the row ids. If you decide to include editing features in the grid you will have to include as id in the data.
现在我们去看代码.因为您写道您使用Visual Studio 2010，但对.NET的版本一无所获，所以我在.NET 4.0中创建了一个应用程序. web.config:
Now we go to the code. Because You wrote that you use Visual Studio 2010 and answer nothing about the version of .NET I created an application in .NET 4.0. The 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:
(read more about caching "jqGrid data stored in browser cache?")
and 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>
您可以在此处下载完整代码.
You can download the full code here.
这篇关于jqGrid不填充数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
