Я бы расценил это как канонический пример - фрагмент кода, представляющий простой, выполнимый - jqGrid с минимальным кодированием , но все еще достаточно мощный, чтобыпоказать наиболее важные функции (согласно этой документации ):
// see: https://free-jqgrid.github.io/getting-started/
// CDN used: https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid
$(function() {
$("#grid").jqGrid({
autowidth: true, height: 45,
colNames: ['First name', 'Last name', 'Updated?'],
colModel: [{name: "firstName"}, {name: "lastName"}, {name: "updated"}],
data: [
{ id: 10, firstName: "Jane", lastName: "Doe", updated: "no"},
{ id: 20, firstName: "Justin", lastName: "Time", updated: "no" }
],
loadComplete: function() {
// demo - how to access grid data
var ids = $(this).jqGrid('getDataIDs'); // ids for each row
var gridData = $(this).jqGrid('getGridParam', 'data'); // all rows
var gridLen = gridData.length; // number of rows
// now get a list from the data
var nameList = [];
for(var i=0; i<gridLen; i++) {
nameList.push(gridData[i].firstName+' [id:'+ ids[i] +']');
}
var strList = nameList.join(", ");
$("#nameList").html(strList);
var rowKey = ids[1]; // rowKey for the operations below
// get data from the 2nd row
var secondRow=$(this).jqGrid('getRowData', rowKey);
$("#getRowData").html(secondRow.firstName + ', ' + secondRow.lastName
+ ', updated:' + secondRow.updated);
// set update flag by modifying row data
secondRow.updated = "yes";
$(this).jqGrid('setRowData', rowKey, secondRow);
// update single cell (read, modify, write)
var lastName=$(this).jqGrid('getCell', rowKey, "lastName");
lastName=lastName.toUpperCase();
// first change the cell in the visible part of grid
$(this).jqGrid('setCell', rowKey, "lastName", lastName);
// now change the internal local data
$(this).jqGrid('getLocalRow', rowKey).lastName = lastName;
// make column label of "Updated?" column larger
$(this).jqGrid('setLabel', 2, '<h3>Updated?</h3>');
// --- now verify the changes ---
gridData = $(this).jqGrid('getGridParam', 'data'); // get rows again
var rowList = [];
for(var i=0; i<gridLen; i++) {
rowList.push(gridData[i].firstName + ', ' + gridData[i].lastName
+ ', updated:' + gridData[i].updated);
}
$("#showGridData").html(rowList.join("; "));
}
});
});
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Canonical jqGrid example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>
<table id="grid"></table>
<br/><b>First names list:</b><div id="nameList"></div>
<br/><b>Get data from row#1 (before update):</b><div id="getRowData"></div>
<br/><b>Verify changes (after update):</b><div id="showGridData"></div>
Вы можете использовать его вместе с ответом Олега в качестве рабочей отправной точки для разработки в своем собственном приложении MVC (в этом случае используйте синтаксис @Url.Contentкак в ответе выше) - и, что не менее важно, в виде шаблона фрагмента кода для дальнейших вопросов StackOverflow, связанных с jqGrid.
Я добавил некоторый код, чтобы показать, как вы можете получить доступ к внутреннемуданные сетки.В нем рассматриваются такие вопросы, как «как я могу получить доступ к данным из определенной строки?»Однако, если вам не нужен этот код в вашем фрагменте, вы можете просто удалить весь раздел loadComplete, демонстрация сетки все равно будет работать.
Если вам требуется пейджинг в вашем фрагменте, см. этот ответ.
Примечание: Я потратил много времени с jqQuery keys (необходим для уникальной адресации строки), чтобы выяснить, как они работают в деталях.Вот некоторая информация из моего опыта в двух словах:
Если вы не указали явно ключ в colModel, тогда JQGrid предполагает "id" в качестве поля ключа . Вот что делает этот пример: данные заполняют поле id и используются в качестве ключа
В противном случае,если вам нужен другой ключ , укажите {name: "myKey", hidden:true, key:true} в colModel и "myKey" в colNamesтакже (если вы забудете об этом, вы получите ошибку несоответствия счетчика).Затем вы можете заполнить "myKey" в данных. порядок появления важен!В этом случае нет "id", но есть поле "myKey".Ключевые поля не должны быть скрыты.Если вы пропустите скрытый атрибут (или установите false в качестве значения), то ключ будет показан в виде столбца в сетке.Обратите внимание, что в случае такого переназначения ключа jqGrid внутренне использует _id_ как свойство для хранения ключа.Вы можете видеть, что если вы используете функцию .jqGrid('getGridParam', 'data'), то каждая строка содержит такое свойство.
Задание key: true несколько раз бесполезно , потому что толькопоследнее поле с этим атрибутом считается ключевым (т. е. крайний правый ключевой столбец).Сказав это, вы не можете указать составные ключи таким образом!Если вам нужен составной ключ, вам нужно объединить ключи в одно поле ключа.
Если вы не указали ключ самостоятельно или не заполнили * 1085Поле *, затем jqGrid создает свои собственные значения и присваивает их полю id каждой строки.Их обычно называют "jqg1" (для первого ряда), "jqg2" (для второго) и т. Д.
В примере также показано, как обновить строку.Для получения более подробной информации см. здесь и там .Обратите внимание, что если вы обновляете данные таким образом, они обновляются только на клиенте (в вашем браузере).Вы должны сохранить значение (т.е. отправить обновленные данные на сервер через AJAX, предоставить кнопку SAVE и т. Д.), Если хотите сделать изменение постоянным, в противном случае оно сбрасывается при повторной загрузке.
Заголовки столбцов (т. Е. Заголовки, отображаемые для пользователя) определяются свойством colNames , не путайте их со свойством name внутриcolModel.Свойство name внутри colModel определяет имена полей, что важно для привязки данных.Порядок появления в colNames и colModel важен, потому что они коррелируют друг с другом (например, 'Last Name' в colNames появляется во второй позиции, как и соответствующее поле {name: '"lastName"' ...} внутриcolModel появляются в позиции 2).
Если вы хотите изменить заголовки столбцов позже в своем коде (например, после определения), посмотрите здесь: Как динамически обновлять заголовки столбцов.
Полезные ссылки: Бесплатная версия jqGrid - начало работы , jgGrid - параметры colmodel