获取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中使用它。有没有人有链接引用，他们发现非常有用。只需要一个很好的链接，但我发现与谷歌的大多数链接都是旧的，而不是使用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>

您可以将它与Oleg的答案一起用作您自己的MVC应用程序开发的工作起点（在这种情况下，使用@Url.Content语法，如上面的答案） - 最后但并非最不重要的一个代码片段：为与jqGrid相关的进一步StackOverflow问题提供模板。

我已经添加了一些代码来显示如何访问内部网格数据。它解决了诸如“我如何从特定行访问数据？”等问题。
但是，如果您不需要代码段中的代码，则可以删除整个loadComplete部分，但网格演示仍然可以工作。

如果您需要分页在你的代码片段，看到this answer.

注：我花了很多时间与jqQuery键以及它们如何工作的（唯一解决行需要）。下面是我的经验，概括地说一些信息：

• 如果没有明确的colModel指定一个键，然后jqGrid的假设"id"为关键领域。这是这个例子做什么：数据填充id字段，这是作为一个关键

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

• 指定key: true多次是无用，因为只有与该属性的最后场被视为密钥（即最右边的键列）。话虽如此，你不能用这种方式指定复合键！如果你需要一个复合键，那么你必须将这些键连接成一个单一的键字段。

• 如果没有指定你自己的关键，也不填充id字段，然后的jqGrid创建自己的价值观，并将它们分配到每一行的id场。它们通常被命名为"jqg1"（对于第一行），"jqg2"（对于第二行）等等。

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

• 列标题（即被显示给用户的标题）由colNames属性定义，不与colModel内的name属性混淆。 colModel中的name属性定义了字段名称，这对数据绑定很重要。在colNames和colModel中的出现顺序都很重要，因为它们彼此相关（例如，'Last Name',colNames出现在第二位置，colModel内部的相应字段出现在位置2）。
  如果您希望稍后在代码中更改列标题（即，定义）后，看看这里：How to update column titles dynamically.

---

^{有用的链接：jqGrid free edition - getting started}