jquery 让jqGrid与MVC一起工作所需的最小文件是多少?

cgyqldqp  于 2023-11-17  发布在  jQuery
关注(0)|答案(2)|浏览(91)

我下载了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之外还需要的文件。有人能确认这是所有需要的文件,并且顺序正确吗?或者建议我是否需要添加更多。例如,我需要到locale文件的链接吗?
我刚刚开始学习jqGrid。我环顾四周,还没有找到一个很好的例子,如何使用这个与MVC 3和剃刀。有没有人有链接到参考,他们已经发现非常有用的。只是真的需要一个好的链接,但大多数链接,我发现与谷歌是旧的,而不是使用剃刀。

juzqafwq

juzqafwq1#

需要包含的CSS和JavaScript文件的最小列表可以在jqGrid文档中找到。

<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>

字符串

slsn1g29

slsn1g292#

我认为这是一个规范的例子-一个代码片段,它代表了一个简单的,可运行的- 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("; "));
     
    }
  });
});

个字符
您可以将它与Oleg的答案一起用作您自己的MVC应用程序开发的工作起点(在这种情况下,使用上面答案中的@Url.Content语法)-最后但并非最不重要的是,作为与jqGrid相关的进一步StackOverflow问题的代码片段模板
我添加了一些代码来展示如何访问内部网格数据,它解决了诸如“如何访问特定行中的数据”之类的问题。
但是,如果您不需要在代码片段中使用该代码,您可以删除整个loadComplete部分,网格演示仍然可以工作。
如果您需要在片段中进行分页,请参阅**this answer.**

注意:我花了很多时间在jqQuery键(需要唯一地寻址一行)上,以了解它们是如何详细工作的。以下是我的一些经验:

  • 如果您没有在**colModel中显式指定键,则JQGrid会将"id"假定为键字段。**本示例是这样做的:数据填充id字段,并将其用作键
  • 否则,如果您需要不同的密钥,请在**colModel中指定{name: "myKey", hidden:true, key:true},并在colNames**中指定"myKey"(如果你忘记了这一点,你会得到一个计数不匹配的错误)。然后你可以在数据中填充"myKey"出现的顺序很重要!在本例中,没有"id",只有一个"myKey"字段。键字段不需要隐藏。如果省略hidden属性(或将false设置为value),则键在网格中显示为列。

请注意,在这种键重Map的情况下,jqGrid内部使用_id_作为属性来存储键。您可以看到,如果使用函数.jqGrid('getGridParam', 'data'),则每行都包含这样一个属性。

*多次重复指定key: true是没有用的,因为只有最后一个具有该属性的字段才被认为是key(即最右边的key列)。话虽如此,你不能这样指定复合键!如果你需要一个复合键,那么你必须将键连接到一个键字段中。

  • 如果您既没有自己指定键,也没有填充**id字段,则jqGrid会创建自己的值并将其分配给每行的id字段。它们通常命名为"jqg1"(第一行),"jqg2"**(第二行)等等。
  • 该示例还展示了如何更新行。有关详细信息,请参阅herethere。请注意,如果您以这种方式更新数据,则仅在客户端(在浏览器中)更新数据。如果您希望使更改永久化,则必须保存值(即通过AJAX将更新的数据发送到服务器,提供SAVE按钮等),否则将在重新加载时丢弃该值。
    栏目标题(即显示给用户的标题)由*colNames属性**定义,不要将它们与colModel中的name属性混淆。colModel中的name属性定义字段名称,colNamescolModel中的出现顺序很重要,因为它们相互关联(例如,colNames中的'Last Name'出现在第二个位置,相应的字段{colModel中的name: '"lastName"' ...}出现在位置2)。

如果你想在代码的后面修改列标题(例如,在定义后修改),请看这里:How to update column titles dynamically.
实用链接:jqGrid免费版-入门,jgGrid - colmodel options

相关问题