jqgrid Página 1 de x pager

Eu estou tentando descobrir como usuário a funcionalidade de paginação do jqGrid. Atualmente estou preso na página 1 de 4. Não importa se eu pressionar o botão Avançar ou não. Apenas fica em 1.

Eu estou usando o asp.net com um webservice para preencher meus dados JSON. Como capturar o evento do cliente para preencher a propriedade no serviço da web para trazer de volta o valor correto?

Qualquer ajuda é apreciada.

Se alguém pressionar o botão “Next”, uma nova solicitação será enviada ao servidor. A solicitação conterá page=2 e, por exemplo, rows=10 parâmetros como parte da URL (se alguém quiser obter as próximas 10 linhas da segunda página).

Seu código do servidor deve ler esses parâmetros e retornar as linhas de dados correspondentes. Os dados JSON enviados de volta do servidor devem se parecer com os seguintes

 { "total": "5", "page": "2", "records": "55", "rows" : [ {"id" :"21", "cell" :["cell11", "cell12", "cell13"]}, {"id" :"22", "cell" :["cell21", "cell22", "cell23"]}, ... {"id" :"30", "cell" :["cell31", "cell32", "cell33"]}, ] } 

(veja http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data ). Portanto, os dados devem conter o valor correto para a page (página = 2). Em geral, é possível que agora você tenha menos dados como antes e devolva o número de página 1 na solicitação para obter o número de página 2.

Por isso sugiro que atualmente o seu código do servidor não devolva o valor correto da page na saída.

ATUALIZADO : OK, Jeff. Eu continuo minha resposta em jqgrid setGridParam tipo de dados: local e postar como é prometido um código como fazer o paging do servidor, sorting e pesquisa (ou pesquisa avançada).

Em primeiro lugar, no exemplo, não implementarei realmente a sorting e a pesquisa e apenas simularão a paginação, onde você tem problemas agora. A paginação, ordenação e pesquisa reais devem ser implementadas como as instruções SELECT correspondentes ao database SQL onde os dados existem. A ordenação segue para o ORDER BY , pesquisando para WHERE e paginando para construções como TOP(x) , TOP(x) com LEFT OUTER JOIN ou o uso de ROW_NUMBER() OVER(...) constrói. Mas todos estes não são o assunto da sua pergunta. Então eu reduzo tudo para a simples simulação de paginação de dados.

Eu começo com o código do Método Web ASMX:

 public JqGridData TestMethod (int page, int rows, string sidx, string sord, bool _search, string searchField, string searchOper, string searchString) { // for advance search use "string filters" instead of the last three parameters int recordsCount = 205; int startIndex = (page - 1) * rows; int endIndex = (startIndex + rows < recordsCount) ? startIndex + rows : recordsCount; List gridRows = new List (rows); for (int i = startIndex; i < endIndex; i++) { gridRows.Add (new TableRow () { id = i, cell = new List (2) { string.Format("Name{0}", i), string.Format("Title{0}", i) } }); } return new JqGridData () { total = (recordsCount + rows - 1) / rows, page = page, records = recordsCount, rows = gridRows }; } 

onde as classs JqGridData e TableRow são definidas da seguinte forma:

 public class TableRow { public int id { get; set; } public List cell { get; set; } } public class JqGridData { public int total { get; set; } public int page { get; set; } public int records { get; set; } public List rows { get; set; } } 

TestMethod qualquer verificação de parâmetros de input do TestMethod para tornar o exemplo de código mais legível.

Agora o código do cliente:

 $("#list").jqGrid({ url: './MyTestWS.asmx/TestMethod', datatype: 'json', mtype: 'POST', ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, serializeGridData: function (postData) { if (postData.searchField === undefined) postData.searchField = null; if (postData.searchString === undefined) postData.searchString = null; if (postData.searchOper === undefined) postData.searchOper = null; //if (postData.filters === undefined) postData.filters = null; return JSON.stringify(postData); }, jsonReader: { root: function (obj) { return obj.d.rows; }, page: function (obj) { return obj.d.page; }, total: function (obj) { return obj.d.total; }, records: function (obj) { return obj.d.records; } }, // you can also use following more simple form of jsonReader instead: // jsonReader: { root: "d.rows", page: "d.page", total: "d.total", // records: "d.records", id: "d.names" } colModel: [ { name: 'name', label: 'Name', width: 250 }, { name: 'title', label: 'Title', width: 250 } ], rowNum: 10, rowList: [10, 20, 300], sortname: 'name', sortorder: "asc", pager: "#pager", viewrecords: true, gridview: true, rownumbers: true, height: 250, caption: 'My first grid' }).jqGrid('navGrid', '#pager', {edit: false, add: false, del: false, search: true}); // {}, // use default settings for edit // {}, // use default settings for add // {}, // delete instead that del:false we need this // {multipleSearch : true} // enable the advanced searching // ); 

No código eu uso a mesma técnica como no tipo de dados jGgrid setGridParam: local, mas o código da function serializeGridData é um pouco diferente. Como usamos o método POST e não o método GET para obter os dados do servidor, todos os parâmetros de input do método da Web devem ser sempre definidos . Por outro lado, o jqGrid nem sempre define os parâmetros searchField , searchOper e searchOper , mas apenas se _search=true . Por exemplo, no primeiro carregamento do jqGrid, o _search=false e o searchField , o searchOper e o searchOper não estão definidos no postData . Para corrigir o problema, inicializamos os parâmetros indefinidos com null .

Para implementar a sorting, é necessário usar os sidx (índice de sorting) e sord (direção de sorting: "asc" ou "desc" ).

Para implementar a pesquisa, é necessário usar outros parâmetros _search , searchField , searchOper , searchOper .

Durante a pesquisa avançada, em vez dos parâmetros searchField , searchOper , searchOper , os filters parâmetro devem ser usados ​​(consulte as linhas comentadas). Os dados devem ser decodificados em relação a um desserializador JSON. Portanto, deve ser definido como multipleSearch : true no jqgrid. A function serializeGridData deve ser substituída por

 serializeGridData: function (postData) { if (postData.filters === undefined) postData.filters = null; return JSON.stringify(postData); } 

e o protótipo do método web deve ser alterado para

 public JqGridData TestMethod (int page, int rows, string sidx, string sord, bool _search, string filters) 

para decodificar os filters parâmetro, é possível usar um código simples:

 if (_search && !String.IsNullOrEmpty (filters)) { JavaScriptSerializer serializer = new JavaScriptSerializer (); jqGridSearchFilter searchFilter = serializer.Deserialize (filters); // use the searchFilter here } 

onde a class jqGridSearchFilter pode ser definida da seguinte forma:

 public class jqGridSearchFilterItem { public string field { get; set; } public string op { get; set; } public string data { get; set; } } public class jqGridSearchFilter { public string groupOp { get; set; } public List rules { get; set; } } 

Espero que esta informação seja suficiente para você implementar qualquer tipo de uso do jqGrid com relação ao ASMX Web Method.

Eu usei aqui um simples envio de dados do servidor para o cliente com id adicional fora dos dados principais. Se uma das colunas que você tem na tabela for o id , você pode reduzir um pouco o envio de dados para o servidor. Veja o Jqgrid 3.7 não mostra linhas no Internet Explorer para mais detalhes.

Ok, estou respondendo a este, pois peguei o que Oleg havia dito acima, mas descobri exatamente o que ele queria dizer.

Minha chamada .ajax é envolvida em uma function que passa o postdata como um parâmetro. Não consegui encontrar nenhuma documentação sobre esse parâmetro, mas achei que talvez fosse onde o valor da página estava contido. Como você pode ver eu fiz um alerta com postdata.page e baixo e eis que eu tenho um valor (baseado fora do clique do botão seguinte).

Então eu criei um parâmetro no meu webservice chamado page (integer).

Apenas como uma nota lateral, você passa um valor inteiro de jQuery para seu webservice ASP.Net como este:

 data: "{'page':'" + postdata.page + "'}" 

Abaixo está a function completa:

 function processrequest(postdata) { alert(postdata.page); $(".loading").show(); $.ajax({ type: "POST", data: "{'page':'" + postdata.page + "'}", datatype: "json", url: "../webServices/myTestWS.asmx/testMethod", contentType: "application/json; charset-utf-8", complete: function (jsondata, stat) { if (stat == "success") { var thegrid = jQuery("#list")[0]; var jsonObject = (eval("(" + jsondata.responseText + ")")); thegrid.addJSONData(jsonObject.d); $(".loading").hide(); } else { $(".loading").hide(); alert("Error with AJAX callback"); } } }); 

}