让jqGrid使用MVC所需的最少文件是什么
What are the minimum files needed to get jqGrid working with MVC?
我下载了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。
您可以在jqGrid文档中找到需要包含的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>
我认为这是一个典型的例子-一个表示一个简单、可运行的-jqGrid,具有最小编码但仍然足够强大,可以显示最重要的功能(根据本文档):
// 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
部分,那么网格演示仍然可以工作。
如果您在代码段中需要分页,请参阅此答案
注意:我花了很多时间使用jqQuery键(唯一寻址一行所需)来详细了解它们的工作方式。以下是我的一些经验信息:
-
如果您没有在
colModel
中显式指定键,那么JQGrid将"id"
假定为键字段这个例子就是这样做的:数据填充id字段,这被用作密钥 -
否则,如果需要不同的键,请在
colModel
中指定{name: "myKey", hidden:true, key:true}
并在colNames
指定"myKey"
(如果忘记了这一点,则会出现计数不匹配错误)。然后可以在数据中填充"myKey"
。出现的顺序很重要!在这种情况下,不存在"id"
,而是存在"myKey"
字段。关键字段不需要隐藏。如果省略隐藏属性(或将false
设置为值),则键在网格中显示为列
注意,在这种密钥重映射的情况下,jqGrid内部使用_id_
作为属性来存储密钥。您可以看到,如果使用函数.jqGrid('getGridParam', 'data')
,那么每一行都包含这样的属性。 -
多次指定
key: true
是无用的,因为只有具有该属性的最后一个字段被视为键(即最右边的键列)。话虽如此,您不能以这种方式指定复合键!如果您需要一个复合键,那么您必须将这些键连接到一个单独的键字段中。 -
如果您既没有自己指定键,也没有填充
id
字段,则jqGrid会创建自己的值,并将其分配给每行的id
域。它们通常被命名为"jqg1"
(用于第一行)、"jqg2"
-
该示例还显示了如何更新行。有关更多详细信息,请参阅此处和那里。请注意,如果您以这种方式更新数据,则它仅在客户端(在浏览器中)上更新。如果你想使更改永久化,你必须保存值(即通过AJAX将更新的数据发送到服务器,提供save按钮等),否则在重新加载时会被丢弃。
-
列标题(即显示给用户的标题)由
colNames
属性定义,不要将它们与colModel
内的name
属性混淆。colModel
中的name
属性定义字段名,这对于数据绑定非常重要。colNames
和colModel
中的出现顺序很重要,因为它们相互关联(例如,colNames
中的'Last Name'
出现在第二位置,colModel
中的相应字段{name: '"lastName"' ...}
出现在位置2)。
如果您想在稍后的代码中更改列标题(即定义后的),请查看此处:如何动态更新列标题。
有用的链接:jqGrid免费版-入门,jgGrid-colmodel选项
- 将任何CDN配置为只传递一个文件,无论请求的url是什么
- 将JS文件解析为PHP的副作用是什么
- 将Rails后端添加到JS/HTML/CSS应用程序时,正确的文件位置是什么
- 在企业应用程序框架中包含js/css文件的最佳实践是什么
- 在d3.json中使用d3.csv组合多个csv文件数据输入的最佳方法是什么
- require('file_path')后面的后缀(模块)在javascript文件中是什么意思
- 在 Windows 现代(地铁)UI 应用中存储图像文件和音频文件的方法是什么?
- 究竟是什么'提供静态文件'意思是
- 在我的javascript文件中发现的这个奇怪的代码是什么
- Django项目中第三方静态文件的推荐目录布局是什么
- 淘汰js应用程序的正确文件结构是什么
- javascript文件不可用的可能原因是什么;t成功加载
- 将文件夹中的所有图像包括在阵列中的最佳方式是什么
- NodeJS:使用不同文件夹的正确方法是什么?
- 配置早午餐以从一个模板文件输出多个 HTML/JS 文件的正确方法是什么?
- 处理、解析和流式传输大型文本文件的实用方法是什么
- 这些缓存.js和编译映射文件是什么
- .NET 4.5 Web 窗体包含 Javascript - 这些文件是什么
- JavaScript生态系统中的.co文件是什么
- 让jqGrid使用MVC所需的最少文件是什么