Я изо всех сил пытаюсь настроить jqGrid после простых постраничных примеров, приведенных в демонстрационном коде.
Мои потребности такие:
1) не нужно разбивать на страницы, я хочу, чтобы сетка была областью просмотра и прокручивала все элементы (которые уже ограничены до 400 строк)
2) использовать ответ от вызова ajax для загрузки данных json.
3) Google как единое текстовое поле, которое я могу использовать для фильтрации данных.
Все сэмплы, с которыми я сталкиваюсь, всегда используют пейджинг, и я знаю, что это наиболее распространенный вариант использования.
С уважением,
Стивен
КСТАТИ
jqGrid - это самая задокументированная сетка, с которой я когда-либо сталкивался, она входит в мою книгу, и тот факт, что Олег и Ко очень агрессивны в получении ответов на вопросы, делает кривую обучения и, следовательно, принятие довольно плавным.
РЕДАКТИРОВАТЬ 1
var myGrid = $('#favoriteGrid'),
decodeErrorMessage = function (jqXHR, textStatus, errorThrown) {
var html, errorInfo, i, errorText = textStatus + '\n' + errorThrown;
if (jqXHR.responseText.charAt(0) === '[') {
try {
errorInfo = $.parseJSON(jqXHR.responseText);
errorText = "";
for (i = 0; i < errorInfo.length; i++) {
if (errorText.length !== 0) {
errorText += "<hr/>";
}
errorText += errorInfo[i].Source + ": " + errorInfo[i].Message;
}
}
catch (e) { }
} else {
html = /<body.*?>([\s\S]*)<\/body>/.exec(jqXHR.responseText);
if (html !== null && html.length > 1) {
errorText = html[1];
}
}
return errorText;
};
myGrid.jqGrid({
url: '/Buyer/Favorite/ProductGroupService/2976171424',
datatype: 'json',
mtype: 'GET',
height: '100%',
colNames: ['Row No', 'Qty', 'Features', 'Item Nbr', 'Brand', 'Product', 'Supplier', 'Price', 'UOM', 'Case Pack', 'Remarks', 'Ave Weight', 'Par', 'Last Purchase', 'Sort'],
colModel: [
{ name: 'Id', index: 'Id', hidden: true },
{ name: 'Quantity', index: 'Quantity', width: 20, editable: true, edittype: 'text', editoptions: { size: 10, maxlength: 15} },
{ name: 'ProductAttributes', index: 'ProductAttributes', width: 50 },
{ name: 'ItemNum', index: 'ItemNum', width: 60, align: "right" },
{ name: 'BrandName', index: 'BrandName', width: 100, align: "left" },
{ name: 'ProducName', index: 'ProducName', width: 150, align: "left" },
{ name: 'SupplierName', index: 'SupplierName', width: 100, align: "left" },
{ name: 'Price', index: 'Price', width: 80, align: "right" },
{ name: 'UOM', index: 'UOM', width: 80, align: "left" },
{ name: 'CasePack', index: 'CasePack', width: 80, align: "left" },
{ name: 'PackageRemarks', index: 'PackageRemarks', width: 80, align: "left" },
{ name: 'AveWeight', index: 'AveWeight', width: 80, align: "right" },
{ name: 'Par', index: 'Par', width: 80, align: "right" },
{ name: 'LastPurchaseDate', index: 'LastPurchaseDate', width: 80, align: "right" },
{ name: 'SortPriority', index: 'SortPriority', hidden: true }
],
multiselect: true,
// cellEdit : true,
// cellsubmit : 'remote',
pager: '#favoritePager',
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: 'desc',
rownumbers: true,
viewrecords: true,
altRows: true,
altclass: 'myAltRowClass',
height: '100%',
gridview: true,
jsonReader: { cell: "" },
loadonce: true,
caption: "Products List",
loadError: function (jqXHR, textStatus, errorThrown) {
// remove error div if exist
$('#' + this.id + '_err').remove();
// insert div with the error description before the grid
myGrid.closest('div.ui-jqgrid').before(
'<div id="' + this.id + '_err" style="max-width:' + this.style.width +
';"><div class="ui-state-error ui-corner-all" style="padding:0.7em;float:left;"><span class="ui-icon ui-icon-alert" style="float:left; margin-right: .3em;"></span><span style="clear:left">' +
decodeErrorMessage(jqXHR, textStatus, errorThrown) + '</span></div><div style="clear:left"/></div>')
},
loadComplete: function () {
// remove error div if exist
$('#' + this.id + '_err').remove();
},
ondblClickRow: function (rowid, ri, ci) {
//
},
gridComplete: function () {
$("#favoriteGrid").addClass("nodrag nodrop");
$("#favoriteGrid").tableDnDUpdate();
}
});
РЕДАКТИРОВАТЬ 2
Реализованы рекомендации от Олега: URL JSON и удаление drag n drop
РЕДАКТИРОВАТЬ 3
Добавлен ответ JSON с сервера
{
"total":321,
"page":1,
"records":1000,
"rows":[
{"Id":0,"Selected":false,"Quantity":1,"ProductAttributes":null,"ItemNum":"6199335","BrandName":"KELLOGG","ProducName":"CEREAL ASST FAMILY PACK","SupplierName":"SYSCO","Price":33.89,"UOM":"CA","CasePack":"72 PK","PackageRemarks":"INDIV","AveWeight":"4.59 LB","Par":null,"SortPriority":19,"LastPurchaseDate":null,"GLCode":"7115-10","OldProductId":null,"CategoryName":"Food-Canned Goods","ProductID":2285668889,"ImageInfo":null},
{"Id":1,"Selected":false,"Quantity":1,"ProductAttributes":null,"ItemNum":"6199335","BrandName":"KELLOGG","ProducName":"CEREAL ASST FAMILY PACK","SupplierName":"SYSCO","Price":34.19,"UOM":"CA","CasePack":"72 PK","PackageRemarks":"INDIV","AveWeight":"4.59 LB","Par":null,"SortPriority":19,"LastPurchaseDate":null,"GLCode":"7115-10","OldProductId":null,"CategoryName":"Food-Canned Goods","ProductID":2285668889,"ImageInfo":null}
]}