Каковы минимальные файлы, необходимые для работы jqGrid с MVC?

Question

Я загрузил файлы для jqGrid, но я не совсем уверен, какие файлы мне нужно ссылаться. До сих пор у меня есть эти файлы:

<link href='@Url.Content("~/Content/themes/base/jquery-ui.css")' ... /> 
<link href='@Url.Content("~/Content/themes/redmond/jquery-ui-1.8.custom.css")' ... /> 
<link href='@Url.Content("~/Content/themes/redmond/ui.jqgrid.css")' ... /> 
<link href='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/css/ui.jqgrid.css")' ... />    

<script src='@Url.Content("~/Scripts/jquery-1.7.1.min.js")' ...></script> 
<script src='@Url.Content("~/Scripts/jquery-ui-1.8.16.min.js")' ...></script> 

<script src='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js")' ...></script> 
<script src='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/js/jquery.jqGrid.min.js")' ...></script>  

я увидел еще один пример предполагая, что это были файлы, необходимые в дополнение к JQuery. Может кто-то подтвердить это все, что необходимо и в правильном порядке, или посоветуйте, если мне нужно добавить больше. Например, нужна ли мне ссылка на файл локали?

Я только начинаю узнавать о jqGrid. Я огляделся и еще не нашел хорошего примера того, как использовать это с MVC3 и Razor. Кто-нибудь имеет ссылки на ссылки, которые они нашли очень полезными. Просто нужна одна хорошая ссылка, но большинство ссылок, которые я нашел с Google, были старыми и не использовали Razor.

Answer 1

Минимальный список файлов CSS и JavaScript, которые необходимо включить, можно найти в the jqGrid documentation. В вашем случае это будет

<link href='@Url.Content("~/Content/themes/redmond/jquery-ui-1.8.custom.css")' rel='stylesheet' type='text/css' /> 
<link href='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/css/ui.jqgrid.css")' rel='stylesheet' type='text/css' /> 

<script src='@Url.Content("~/Scripts/jquery-1.7.1.min.js")' type='text/javascript'></script> 
<script src='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js")' type='text/javascript'></script> 
<script src='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/js/jquery.jqGrid.min.js")' type='text/javascript'></script> 

Answer 2

я бы рассматривать это как канонический пример - это фрагмент кода, который представляет простой, работоспособной - jqGrid с минимальным кодированием, но все еще достаточно силен, чтобы показать наиболее важные особенности (по this documentation):

// 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, как в ответе выше), - и последнее, но не менее важное, как фрагмент кода template для дальнейших вопросов StackOverflow, связанных с jqGrid.

Я добавил код, чтобы показать, как вы можете получить доступ к данным внутренней сетки. В нем рассматриваются такие вопросы, как «как я могу получить доступ к данным из определенной строки?»
Однако, если вам не нужен этот код в вашем фрагменте, вы можете просто удалить весь раздел loadComplete, демонстрация сетки по-прежнему будет работать.

Если вам требуется подкачки в вашем фрагменте кода, см this answer.

Примечание: Я провел много времени с jqQuery ключей (необходимых для однозначного решения ряд), и как они работают. Вот некоторая информация из моего опыта в двух словах:

• Если вы явно не указать ключ в colModel, то JQGrid предполагает "id" в качестве ключевого поля . Это то, что этот пример делает: Данные заполнит поле идентификатора, и это используется в качестве ключа

• В противном случае, если вы нужен другой ключ, указать {name: "myKey", hidden:true, key:true} в colModel и "myKey" в colNames также (если вы забудете это, вы получите ошибку несоответствия счетчика). Затем вы можете заполнить "myKey" в данных. порядок действия важен! В этом случае нет "id", но поле "myKey". Ключевые поля не обязательно должны быть скрыты. Если вы опускаете скрытый атрибут (или задаете false как значение), тогда ключ отображается как столбец в сетке.
  Обратите внимание, что в случае такого переопределения ключей jqGrid внутренне использует _id_ как свойство для хранения ключа. Вы можете видеть, что если вы используете функцию .jqGrid('getGridParam', 'data'), то каждая строка содержит такое свойство.

• Задание key: true нескольких раз бесполезно, потому что только последнее поле с этим атрибутом рассматриваются в качестве ключа (т.е. ключевого столбца крайнего права). Сказав это, вы не можете указывать составные ключи таким образом! Если вам нужен сложный ключ, вам необходимо объединить ключи в одно ключевое поле.

• Если ни указать ключ по своему усмотрению, ни заполнить поле id, то jqGrid создает свои собственные ценности и присваивает им поле каждой строки id. Их обычно называют "jqg1" (для первого ряда), "jqg2" (для второго) и т. Д.

• В примере также показано, как обновить строку. Для получения дополнительной информации см. here и there. Обратите внимание: если вы обновляете данные таким образом, они обновляются только на клиенте (в вашем браузере). Вы должны сохранить значение (т. Е. Отправить обновленные данные на сервер через AJAX, предоставить кнопку SAVE и т. Д.), Если вы хотите сделать изменение постоянным, иначе оно будет сброшено при повторной загрузке.

• заголовки столбцов (то есть названия, которые отображаются для пользователя) определяются colNames собственности, не путайте их с name собственности внутри colModel. Свойство name внутри colModel определяет имена полей, что важно для привязки данных. Порядок появления в обоих colNames и colModel важен, поскольку они коррелируют друг с другом (например, 'Last Name' в colNames появляется во втором положении, и соответствующее поле {name: '"lastName"' ...} внутри colModel появляется в позиции 2).
  Если вы хотите изменить названия столбцов позже в своем коде (т.после определение), посмотрите здесь: How to update column titles dynamically.

---

^{Полезная ссылка: jqGrid free edition - getting started}