[英]How do I add more rows in jqGrid?
我有以下网格:
var gridMyTasks = $('#gridMyTasks').jqGrid({
jsonReader: { root: 'rows', repeatitems: false, id: 'ID' },
datatype: 'json',
colNames: ['Task ID', 'Task Name', 'Project Name', 'Task Stage', 'Doc Type', 'Due Date'],
colModel: [
{ name: 'ShortCode', width: 70, jsonmap: 'ShortCode', sortable: false },
{ name: 'TaskName', width: 200, jsonmap: 'TaskName', formatter: 'fmtTaskName', sortable: false },
{ name: 'ProjName', width: 200, jsonmap: 'ProjName', formatter: 'fmtName', sortable: false },
{ name: 'TaskStage', width: 100, jsonmap: 'TaskStage', sortable: false },
{ name: 'DocType', width: 130, jsonmap: 'DocType', sortable: false },
{ name: 'DueDate', width: 70, jsonmap: 'DueDate', sortable: false }
],
rowNum: 0,
height: 'auto',
autowidth: true,
forceFit: true,
multiselect: false,
caption: '',
altclass: 'zebra',
altRows: true,
hoverrows: false,
gridview: true,
sortable: false,
grouping: true,
groupingView: { groupField: ['ProjName'], groupDataSorted: true }
});
当页面加载时,我调用Web服务以获取前15行并将其添加到网格中:
TPM.GetHomepageData(function (results) // AJAX web service to load data
{
gridMyTasks[0].addJSONData({ rows: results.Tasks });
if (results.Tasks.length >= 15) $('#divTaskFooter').show(); // Enable "Show All" link
gridMyTasks.show();
}, null);
这很好。 然而,对于谁拥有超过 15行数据的用户,我有一个“显示所有...”链接。 这将再次调用Web服务,但是传入一个参数以指示我想要所有行。 连接方式如下:
var loadGrid = function (limit)
{
TPM.GetMyTasks(limit, curSort, curDir, function (results)
{
grid.clearGridData(true); // should clear the existing rows first?
grid[0].addJSONData({ rows: results }); // *all* rows, not sure new ones
link.html(expanded ? 'Show less...' : 'Show all...');
}, null);
};
moreLink.click(function (event) // When user clicks "Show All", load all the data
{
expanded = !expanded;
loadGrid(expanded ? null : 15);
event.preventDefault();
});
在这种情况下, results
是18行的数组,并且此数据正确。 但是,发生的事情是原始的15行紧紧围绕着,添加了18行,然后我总共有33行。 换句话说,不会首先清除网格。
如果我注释掉addJSONData
行:
grid.clearGridData(true);
//grid[0].addJSONData({ rows: results });
然后,网格将清除,我将看到零行。 因此,就好像清除了网格一样,然后像一堆不死的僵尸行一样恢复了旧数据,并且重复的行被粘贴了。 我一定做错了什么。
更新:为Oleg添加HTTP流量捕获
初始负荷:
POST http://oursite.com/TPM.svc/GetHomepageData HTTP/1.1
Accept: */*
Accept-Language: en-us
Referer: oursite.com
x-requested-with: XMLHttpRequest
Content-Type: application/json; charset=utf-8
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET CLR 1.1.4322; .NET4.0C; .NET4.0E)
Host: oursite.com
Content-Length: 0
Connection: Keep-Alive
Pragma: no-cache
Cookie: SMSESSION=Unimportant
响应:
HTTP/1.1 200 OK
Cache-Control: private
Content-Length: 893
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/7.5
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Thu, 25 Jul 2013 16:57:43 GMT
{"d":{ ... A bunch of JSON here ...}}
显示全部点击:
POST http://oursite.com/TPM.svc/GetMyTasks HTTP/1.1
Accept: */*
Accept-Language: en-us
Referer: oursite.com
x-requested-with: XMLHttpRequest
Content-Type: application/json; charset=utf-8
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET CLR 1.1.4322; .NET4.0C; .NET4.0E)
Host: oursite.com
Content-Length: 42
Connection: Keep-Alive
Pragma: no-cache
Cookie: SMSESSION=Unimportant
{"limit":null,"orderBy":null,"desc":false}
响应:
HTTP/1.1 200 OK
Cache-Control: private
Content-Length: 1762
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/7.5
set-cookie: SMSESSION=...
Set-Cookie: SMSESSION=...
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Thu, 25 Jul 2013 17:01:55 GMT
{"d":{ ... A bunch of JSON here ...}}
希望我能正确理解您的问题。 在我看来,这个问题非常容易。 jqGrid默认将一些参数发送到服务器( page
, rows
, sidx
, sord
等)。 因为您实现了服务器端分页,所以已经使用了参数。 您写道,您从头开始加载前15行。 这意味着对服务器的请求包含page=1
和rows=15
。 值15
是jqGrid的rowNum
参数的值。
要加载所有行,您只需将rowNum
参数的值更改为某个较大的值(例如10000),然后重新加载网格即可。 对应的代码可以如下
$("#grid").jqGrid("setGridParam", {rowNum: 10000})
.trigger("reloadGrid", [{page: 1, current: true}]);
有关reloadGrid
参数,请参见答案 。 我使用上面的page: 1
,以确保在单击“显示全部...”链接之前,使用者不会在分页器中更改当前页面。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.