使jqGrid与MVC一起工作所需的最小文件是什么?

时间:2012-01-13 15:43:24

标签: javascript jquery asp.net-mvc jqgrid

我下载了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。

2 个答案:

答案 0 :(得分:3)

您可以在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>

答案 1 :(得分:1)

我认为这是一个规范示例 - 代表的代码片段 一个简单,可运行 - jqGrid 最小编码,但仍然足够强大,可以显示最重要的功能(根据this documentation):

&#13;
&#13;
// 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("; "));
     
    }
  });
});
&#13;
<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>
&#13;
&#13;
&#13;

您可以将它与Oleg的答案一起用作您在自己的MVC应用程序中进行开发的工作起点(在这种情况下,使用上面答案中的@Url.Content语法) - 并且最后但对于与jqGrid相关的更多StackOverflow问题,代码段模板并非最不重要。

我添加了一些代码来说明如何访问内部网格数据。它解决了诸如&#34之类的问题;如何从特定行访问数据?&#34;
但是,如果您在代码段中不需要该代码,则可以删除整个loadComplete部分,网格演示仍然有效。

如果您的代码段中需要分页,请参阅 this answer.

注意:我花了很多时间使用 jqQuery密钥(需要唯一地解决一行)来详细了解它们的工作原理。以下是我的经历中的一些信息:

  • 如果您未在 colModel 中明确指定密钥,则JQGrid会将 "id" 视为< strong> key field。这是这个例子的作用:数据填充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" (第二行)等等。

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

  • 列标题(即显示给用户的标题)由 colNames属性定义,不要混淆他们在name内有colModel属性。 name中的colModel属性定义了字段名称,这对数据绑定很重要。 colNamescolModel中的出现次序非常重要,因为它们相互关联(例如,'Last Name'中的colNames出现在第二个位置,所以name: '"lastName"' ...}内的相应字段{colModel出现在第2位)。
    如果您希望稍后在代码中更改列标题(例如定义之后),请查看此处:How to update column titles dynamically.

有用的链接:jqGrid free edition - getting startedjgGrid - colmodel options