jqgrid Страница 1 из x pager

Я пытаюсь выяснить, как пользователь работает подкачки jqGrid. В настоящее время я застрял на странице 1 из 4. Независимо от того, нажимаю ли кнопку «Далее» или нет. Он просто остается на 1.

Я использую ASP.Net с веб-сервисом для заполнения данных JSON. Как захватить событие от клиента, чтобы заполнить свойство в веб-сервисе, чтобы вернуть правильное значение?

Любая помощь приветствуется.

Если нажать «Далее», новый запрос будет отправлен на сервер. Запрос будет содержать page=2 и, например, rows=10 параметров как часть URL (если вы хотите получить следующие 10 строк второй страницы).

Код сервера должен прочитать эти параметры и отправить обратно соответствующие строки данных. Данные JSON, отправляемые с сервера, должны выглядеть следующим образом:

 { "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"]}, ] } 

(см. http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data ). Поэтому данные должны содержать правильное значение для page (page = 2). В общем, возможно, что теперь у вас меньше данных по-прежнему, и вы возвращаете номер страницы 1 по запросу, чтобы получить номер страницы 2.

Поэтому я предлагаю, чтобы в настоящее время ваш код сервера не возвращает правильное значение page на выходе.

ОБНОВЛЕНО : ОК Джефф. Я продолжаю свой ответ в jqgrid setGridParam datatype: local и post, как обещанный код, как на страничном сервере, сортировке и поиске на стороне сервера (или расширенном поиске).

Прежде всего, в этом примере я не буду реализовывать сортировку и поиск и только имитировать подкачку, где у вас есть проблема. Реальный поисковый вызов, сортировка и поиск должны быть реализованы как соответствующие SELECT для базы данных SQL, где эти данные существуют. Сортировка выполняется для ORDER BY , поиск WHERE и пейджинга для конструкций, таких как TOP(x) , TOP(x) с LEFT OUTER JOIN или использования конструкций ROW_NUMBER() OVER(...) . Но все это не вопрос вашего вопроса. Поэтому я свожу все к простому моделированию подкачки данных.

Я начинаю с кода веб-метода 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 }; } 

где classы JqGridData и TableRow определены следующим образом:

 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 чтобы сделать пример кода более читаемым.

Теперь код клиента:

 $("#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 // ); 

В коде я использую тот же метод, что и в jqgrid setGridParam datatype: local, но код функции serializeGridData немного отличается. Поскольку мы используем метод POST, а не GET для получения данных с сервера, все входные параметры веб-метода должны всегда устанавливаться . С другой стороны jqGrid устанавливает не всегда параметры searchField , searchOper и searchString , но только если _search=true . Например, при первом загрузке jqGrid, _search=false и searchField , searchOper и searchString не определены в postData . Чтобы исправить проблему, мы инициализируем неопределенные параметры с null .

Для реализации сортировки необходимо использовать параметры sidx (сортировка индекса) и sord (сортировка: "asc" или "desc" ).

Для реализации поиска нужно использовать другие параметры _search , searchField , searchOper , searchString .

Во время расширенного поиска вместо параметров searchField , searchOper , searchString необходимо использовать filters параметров (см. Пронумерованные строки). Данные должны быть декодированы в отношении десериализатора JSON. Поэтому должен быть установлен multipleSearch : true в jqgrid. Функция serializeGridData должна быть заменена на

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

и прототип веб-метода следует изменить на

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

для декодирования filters параметров можно использовать такой простой код:

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

где class jqGridSearchFilter может быть определен следующим образом:

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

Я надеюсь, что этой информации будет достаточно для вас, чтобы реализовать любое использование jqGrid в отношении веб-метода ASMX.

Я использовал здесь простейшую передачу данных с сервера клиенту с дополнительным id за пределами основных данных. Если один из столбцов, которые у вас есть в таблице, является id , вы можете немного уменьшить отправку данных на сервер. См. Jqgrid 3.7 не показывает строки в Internet Explorer для получения более подробной информации.

Хорошо, я отвечаю на это, когда я взял то, что сказал Олег, но понял, что он имел в виду.

Мой вызов .ajax завернут в функцию, которая передает postdata в качестве параметра. Я не мог найти документацию по этому параметру, но я подумал, что, возможно, именно там и содержалось значение страницы. Как вы можете видеть, я сделал предупреждение с postdata.page и low and behold. Я получил значение (основанное на щелчке следующей кнопки).

Поэтому я создал параметр в моей веб-службе, называемой страницей (integer).

Как примечание, вы передаете целочисленное значение из jQuery в ваш веб-сервис ASP.Net следующим образом:

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

Ниже приведена полная функция:

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

}

  • Как добавить пользовательский заголовок Http для веб-службы C #, использующий веб-службу Axis 1.4
  • Как использовать параметры с HttpPost
  • Как вызвать веб-службу SOAP на Android
  • JDBC против веб-сервиса для Android
  • Как вызвать веб-службу из jQuery
  • Как я могу отправить данные POST на URL-адрес с помощью QNetworkAccessManager
  • Обход неверных ошибок сертификата SSL при вызове веб-служб в .Net
  • Как использовать jQuery для вызова веб-службы ASP.NET?
  • jQuery Call to WebService возвращает ошибку «Нет транспорта»
  • Загрузите данные из Webservice (asmx) в jqgrid. пожалуйста, помогите мне
  • Как запросить веб-сервис через запрос POST в Android?
  • Давайте будем гением компьютера.