我想为我的 jqGrid 分配内联编辑功能,即当用户单击特定行时,他应该能够编辑..
我正在关注这个 jQuery 代码的 url,但它不起作用,我也无法进行编辑
http://www.trirand.com/blog/jqgrid/jqgrid.html#
这是我的观点
<table id="list"></table>
</table>
JavaScript 代码:
<script type="text/javascript">
$(function () {
var lastsel;
jQuery("#list").jqGrid({
url: '/Home/GetStudents/',
datatype: 'json',
mtype: 'POST',
colNames: ['StudentID', 'FirstName', 'LastName', 'Email'],
colModel: [
{ name: 'StudentID',sortable: false,key:true },
{ name: 'FirstName' },
{ name: 'LastName', sortable: false},
{ name: 'Email', width: 200, sortable: false}],
cmTemplate: {align: 'center', editable: true},
pager: '#pager',
width: 750,
rowNum: 15,
rowList: [5, 10, 20, 50],
sortname: 'StudentID',
sortorder: "asc",
viewrecords: true,
caption: ' My First JQgrid',
onSelectRow: function (StudentID) {
if (StudentID != lastsel) {
lastsel = StudentID;
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', StudentID, true);
}
},
editurl: '/Home/GetStudents/',
caption: "Using events example"
});
jQuery("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del: false });
});
</script>
这些是我添加的脚本
<link href="/Content/jquery-ui-1.8.7.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="/Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="/Scripts/rowedex3.js" type="text/javascript"></script>
最佳答案
首先你必须定义editurl
jqGrid的选项将负责在服务器端保存行的处理。
下一个问题:你应该定义lastsel
如果在 onSelectRow
中使用的变量回调。
我建议您另外添加默认属性 colModel
类似 width: 150
的项目或sortable: true
(参见the documentation)。如果您需要重新定义网格列的一些默认设置,您可以使用 cmTemplate
(请参阅 here )了解更多信息。您可以减少colModel
从您的网格到以下网格
colModel: [
{ name: 'StudentID', sortable: false, key: true },
{ name: 'FirstName' },
{ name: 'LastName', sortable: false },
{ name: 'Email', width: 200, sortable: false}],
cmTemplate: {align: 'center', editable: true}
此类更改将使代码更具可读性且易于维护。我添加了key: true
确保 jqGrid 使用列中的值作为 rowid。取决于您返回的 JSON 数据的格式,它可能不是必需的,但在我看来,它使代码也更具可读性和更易于维护。
您还可以删除 <table>
的所有属性用于网格的元素。
此外,由于性能原因,我建议您始终使用 gridview: true
jqGrid 的选项并替换 pager: jQuery('#pager')
至pager: '#pager'
.
关于jquery - jqGrid内联编辑功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13194600/