让 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

您可以在the jqGrid documentation 中找到需要包含的 CSS 和 JavaScript 文件的最小列表。在你的情况下，它会是

<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

我认为这是一个典型的例子 - 一个代码 sn-p 代表 一个简单、可运行 - 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>

您可以将它与 Oleg 的答案一起用作您在自己的 MVC 应用程序中开发的工作起点（在这种情况下，请使用上述答案中的 @Url.Content 语法） - 最后但并非最不重要的是作为 code sn-p 模板，了解更多与 jqGrid 相关的 StackOverflow 问题。

我添加了一些代码来展示如何访问内部网格数据。它解决了诸如“如何访问特定行中的数据？”之类的问题。
但是，如果您的 sn-p 中不需要该代码，您可以删除整个 loadComplete 部分，网格演示仍然可以工作。

如果您在 sn-p 中需要 分页，请参阅 this answer.

注意：我花了很多时间使用 jqQuery 键（需要唯一地寻址一行）来详细了解它们是如何工作的。简而言之，以下是我的经验中的一些信息：

• 如果您没有在 colModel 中明确指定键，则 JQGrid 假定 "id" 作为 键字段。 这就是这个例子的作用：数据填充 id 字段，并用作键

• 否则，如果您需要不同的密钥，请在 colModel 和 "myKey" 中指定 {name: "myKey", hidden:true, key:true}在 colNames 中也是如此（如果您忘记了这一点，您将收到计数不匹配错误）。然后您可以在数据中填充"myKey"。 发生的顺序很重要！在这种情况下，没有 "id" 而是一个 "myKey" 字段。不需要隐藏关键字段。如果省略 hidden 属性（或将 false 设置为值），则键在网格中显示为列。
  请注意，在这种密钥重新映射的情况下，jqGrid 在内部使用_id_ 作为属性来存储密钥。可以看到，如果使用函数.jqGrid('getGridParam', 'data')，那么每一行都包含这样一个属性。

• 多次指定key: true 是没有用的，因为只有具有该属性的最后一个字段被视为键（即最右边的键列）。话虽如此，您不能以这种方式指定复合键！如果您需要复合键，则必须将这些键连接到一个键域中。

• 如果您既没有自己指定键，也没有填充 id 字段，则 jqGrid 创建自己的值 并将它们分配给 id strong>id 每一行的字段。它们通常命名为 "jqg1"（用于第一行）、"jqg2"（用于第二行）等等。

• 该示例还显示了如何更新行。有关详细信息，请参阅 here 和 there。请注意，如果您以这种方式更新数据，它只会在客户端（在您的浏览器中）更新。如果要使更改永久化，则必须保存值（即通过 AJAX 将更新的数据发送到服务器，提供保存按钮等），否则在重新加载时将被丢弃。

• 列标题（即显示给用户的标题）由colNames属性定义，不要与@混淆colModel 内的 987654350@ 属性。 colModel 中的 name 属性定义了字段名称，这对于数据绑定很重要。 colNames 和 colModel 中出现的顺序很重要，因为它们相互关联（例如，colNames 中的 'Last Name' 出现在第二个位置，对应的字段 {name: '"lastName"' ...} 内部也是如此colModel 出现在位置 2)。
  如果您想稍后在代码中更改列标题（即在定义之后），请查看此处：How to update column titles dynamically.

---

^{有用的链接：jqGrid free edition - getting started、jgGrid - colmodel options}