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 (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。因此，例如，如果选择一行，则将选择所有行。
这DateTime不是标准的JSON类型，并且jqGrid当前不支持它和此功能请求）。要解决该问题，您必须对数据和jqGrid 进行至少一些小的更改。
当前的JSON数据中有很多数据为null值。为了减少从服务器发送的空数据的大小，请考虑使用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。如果决定在网格中包括编辑功能，则必须在数据中包含id。
现在我们去看代码。因为您写道您使用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>
您可以在此处下载完整代码。
类似资料：
-
本文向大家介绍jQGrid动态填充select下拉框的选项值(动态填充)，包括了jQGrid动态填充select下拉框的选项值(动态填充)的使用技巧和注意事项，需要的朋友参考一下 本文给大家分享一段代码关于技巧jqgrid动态填充select 下拉框的选项值，非常不多说了，直接给大家贴代码了，具体代码如下所示： 注意：要return以及async:false否则没有效果 在colModel:中设置
-
series(string $value,[ string $categories]) string $value $config = ['path' => './tests']; $fileObject = new \Vtiful\Kernel\Excel($config); $fileObject = $fileObject->fileName('tutorial.xlsx'); $
-
factory 辅助函数 必须 使用 factory 方法来做数据填充，因为是框架提倡的，并且可以同时为测试代码服务。 运行效率 开发数据填充时，必须 特别注意 php artisan db:seed 的运行效率，否则随着项目的代码量越来越大，db:seed 的运行时间会变得越来越长，有些项目多达几分钟甚至几十分钟。 原则是： Keep it lighting speed. 只有当 db:seed
-
我正在制作一个使用tableView的程序。一切都进行得很顺利，只是由于某些原因，我无法获得要填充到表中的整数值。下面是我在主程序中的代码，当我运行程序时，字符串和Double填充，但整数没有。在我的产品类中，sku是int。不太确定哪里出了问题，寻找一些洞察力！ 这里是发票对象和添加产品。
-
简介 Laravel 可以用 seed 类轻松地为数据库填充测试数据。所有的 seed 类都存放在 database/seeds 目录下。你可以任意为 seed 类命名，但是更应该遵守类似 UsersTableSeeder 的命名规范。Laravel 默认定义的一个 DatabaseSeeder 类。可以在这个类中使用 call 方法来运行其它的 seed 类从而控制数据填充的顺序。 编写 See
-
Arrays 类提供了一个 fill() 方法，可以在指定位置进行数值填充。fill() 方法虽然可以填充数组，但是它的功能有限制， 只能使用同一个数值进行填充。语法如下： 其中，array 表示数组，value 表示填充的值。 例 1 声明一个 int 类型的 number 数组，然后通过 for 语句进行遍历，在该语句中调用 Arrays 类的 fill() 方法来填充数组，并输出数组中元素的