Есть некоторые недоразумения. Если вы используете datatype: local
, то вам нужно заполнить jqGrid такими методами, как addRowData
, или один раз задать данные с параметром data
(для jqGrid версии 3.7 и выше). Таким образом, использование datatype: local
следует для jqGrid, не загружая никаких данных, и ваш параметр datatype: processrequest
будет игнорироваться.
Если вы хотите использовать параметр loadonce: true
, который поддерживается начиная с версии 3.7 jqGrid, у вас должны быть все параметры jqGrid для JSON или XML (например, datatype: json
в вашем случае) и дополнительный параметр loadonce: true
. Затем после первой загрузки данных jqGrid переключит тип данных на datatype: local
, после чего он будет работать независимо от сервера, но игнорирует некоторые параметры (например, datatype: processrequest
в вашем случае).
Еще одно маленькое замечание. Большинство свойств jsonReader
, которые вы используете в своем примере, являются настройками по умолчанию (см. this wiki ). Используемые вами параметры будут объединены со свойствами по умолчанию, поэтому достаточно использовать такой параметр, как
jsonReader: { repeatitems: false, id: "ID"}
ОБНОВЛЕНО : ОК, Джефф. Мне кажется, что для решения вашей проблемы вам нужно еще несколько примеров кода с обеих сторон: клиент и сервер. Вот небольшой пример, который я создал и протестировал для вас.
Прежде всего, на стороне сервера. В веб-сервисе ASMX мы определяем веб-метод, который генерирует тестовые данные для вашей таблицы:
public JqGridData TestMethod() {
int count = 200;
List<TableRow> gridRows = new List<TableRow> (count);
for (int i = 0; i < count; 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 = 1,
page = 1,
records = gridRows.Count,
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
не имеет параметров и отправляет полные данные обратно. Пейджинг, сортировка и поиск данных будут выполняться с помощью jqGrid (версия 3.7 или выше).
Чтобы прочитать такие данные и поместить в jqGrid, мы можем сделать следующее:
$("#list").jqGrid({
url: './MyTestWS.asmx/TestMethod',
datatype: 'json',
mtype: 'POST',
loadonce: true,
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
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; }
},
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},
{},{},{},{multipleSearch : true});
Некоторые комментарии по поводу определения jqGrid:
Для связи с веб-службой ASMX через JSON необходимо выполнить следующее в соответствующем запросе jQuery.ajax
:
dataType: 'json'
должен быть установлен.
contentType:'application/json; charset=utf-8'
должен быть установлен.
- данные, отправляемые на сервер, должны быть в кодировке JSON.
Чтобы сделать все это, я использую datatype
, ajaxGridOptions
и serializeGridData
параметры jqGrid. Я выполняю кодировку JSON с функцией JSON.stringify
(соответствующий JavaScript можно скачать с здесь ).
Затем полученные данные должны быть декодированы. Я делаю это с моей любимой функцией jqGrid - jsonReader
с функциями (см. этот пост и эту вики ).
В конце мы используем loadonce: true
, который изменяет datatype
jqGrid с 'json'
на 'local'
, и мы можем сразу использовать все преимущества локальной подкачки, сортировки и расширенного поиска, существующие с jqGrid версии 3.7.
Если вы хотите сделать пейджинг, сортировку и поиск на стороне сервера (или расширенный поиск) с помощью веб-службы ASMX, это также возможно. Чтобы сэкономить здесь немного места и разделить примеры кода, я опубликую соответствующий пример в другом вашем вопросе jqgrid Страница 1 из x pager (см. ОБНОВЛЕННАЯ часть).