Я пытаюсь выяснить как пользователю функциональность подкачки страниц jqGrid. В настоящее время я застреваю на Странице 1 4. Неважно, если я нажимаю кнопку Next или нет. Это просто остается на 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 = 2).В общем, возможно, что теперь у вас меньше данных, чем раньше, и вы возвращаете номер страницы 1 в запросе на получение страницы номер 2.
Поэтому я предлагаю, чтобы в настоящее время ваш серверный код не возвращает правильный значение страницы
на выходе.
ОБНОВЛЕНО : Хорошо, Джефф. Я продолжаю свой ответ в jqgrid setGridParam datatype: local и публикую обещанный код, как выполнять пейджинг, сортировку и поиск на стороне сервера (или расширенный поиск).
Прежде всего, в этом примере я не буду реализовывать сортировку и поиск, а буду моделировать разбиение на страницы там, где у вас возникла проблема. Реальный пейджинг, сортировка и поиск должны быть реализованы как соответствующие операторы 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<TableRow> gridRows = new List<TableRow> (rows);
for (int i = startIndex; i < endIndex; i++) {
gridRows.Add (new TableRow () {
id = i,
cell = new List<string> (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
};
}
где классы JqGridData
и TableRow
определяются следующим образом:
public class TableRow {
public int id { get; set; }
public List<string> cell { get; set; }
}
public class JqGridData {
public int total { get; set; }
public int page { get; set; }
public int records { get; set; }
public List<TableRow> 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)
, чтобы декодировать параметр , фильтры
, можно использовать такой простой код:
if (_search && !String.IsNullOrEmpty (filters)) {
JavaScriptSerializer serializer = new JavaScriptSerializer ();
jqGridSearchFilter searchFilter =
serializer.Deserialize<jqGridSearchFilter> (filters);
// use the searchFilter here
}
], где класс 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<jqGridSearchFilterItem> rules { get; set; }
}
Я надеюсь, что этой информации будет достаточно для реализации любого вида использования jqGrid в отношении веб-метода ASMX.
Здесь я использовал простейшую отправку данных с сервера клиенту с дополнительным id
вне основных данных. Если один из столбцов в таблице - это id
, вы можете немного уменьшить количество данных, отправляемых на сервер. См. Jqgrid 3.7 не показывает строки в Internet Explorer для получения дополнительных сведений.
Хорошо, я отвечаю на этот вопрос, так как я взял то, что Олег сказал выше, но понял, что именно он имел в виду.
Мой вызов .ajax обернут в функцию, которая передает постданные в качестве параметра. Я не смог найти никакой документации по этому параметру, но подумал, что, возможно, именно там содержится значение страницы. Как вы можете видеть, я сделал оповещение с postdata.page и, мало-помалу, получил значение (основанное на нажатии следующей кнопки).
Поэтому я создал параметр в своем веб-сервисе под названием page (целое число).
В качестве примечания, вы передаете целочисленное значение из 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");
}
}
});
}