如何在jqGrid中添加更多行？

Question

I have the following grid:

 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 }
 });

When my page loads, I call a web service to get the first 15 rows and add it to a grid:

 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);

This works great. However, for users who have more than 15 rows of data, I have a "Show all..." link. This calls a web service again, but passes in a parameter to indicate I want all rows. This is hooked up as follows:

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();
});

In this case, results is an array of 18 rows, and this data is correct. However, what happens is the original 15 rows stick around, the 18 rows are added on, then I have 33 rows in total. In other words, the grid isn't being cleared first.

If I comment out the addJSONData line:

grid.clearGridData(true);
//grid[0].addJSONData({ rows: results });

Then, the grid will clear and I'll see zero rows. So, it's as if the grid is cleared, then the old data is resurrected like a bunch of undead zombie rows, and the duplicate rows are tacked on. I must be doing something wrong.

Update: Adding HTTP Traffic capture for Oleg

Initial Load:

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

Response:

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 ...}}

Show All Click:

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}

Response:

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 ...}}

Answer 1

I hope, I understand your problem correctly. The problem seems to me very easy. jqGrid send per default some parameters to the server ( page , rows , sidx , sord and so on). Because you implemented server side paging you use already the parameters. You wrote that you load the first 15 rows at the beginning. It means the the request to the server contains page=1 and rows=15 . The value 15 is the value of rowNum parameter of jqGrid.

To load all rows you can just change the value of rowNum parameter to some large value like 10000 and reload the grid. The corresponding code can be the following

$("#grid").jqGrid("setGridParam", {rowNum: 10000})
    .trigger("reloadGrid", [{page: 1, current: true}]);

See the answer for parameters of reloadGrid . I use page: 1 above to be sure that the use not chnage the current page in pager before clicking on "Show all..." link.