我从以下位置下载了这个 jqgrid 示例:http://tpeczek.codeplex.com/releases/view/61796
我更新了“基础”网格,每行上都会显示一个编辑按钮。我想在单击此页面并传入产品ID 时转到另一个编辑页面。但是没有回发?另外,我怎样才能使productID显示正确的值,因为现在它显示产品名称(ev向左移动)
网格
<script type="text/javascript">
$(document).ready(function () {
$('#jqgProducts').jqGrid({
//url from wich data should be requested
url: '@Url.Action("Products")',
//type of data
datatype: 'json',
//url access method type
mtype: 'POST',
//columns names
colNames: ['Actions', 'ProductID', 'ProductName', 'SupplierID', 'CategoryID', 'QuantityPerUnit', 'UnitPrice', 'UnitsInStock'],
//columns model
colModel: [
{ name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions' },
{ name: 'ProductID', index: 'ProductID', align: 'left' },
{ name: 'ProductName', index: 'ProductName', align: 'left' },
{ name: 'SupplierID', index: 'SupplierID', align: 'left' },
{ name: 'CategoryID', index: 'CategoryID', align: 'left' },
{ name: 'QuantityPerUnit', index: 'QuantityPerUnit', align: 'left' },
{ name: 'UnitPrice', index: 'UnitPrice', align: 'left' },
{ name: 'UnitsInStock', index: 'UnitsInStock', align: 'left' }
],
//pager for grid
pager: $('#jqgpProducts'),
//number of rows per page
rowNum: 10,
//initial sorting column
sortname: 'ProductID',
//initial sorting direction
sortorder: 'asc',
//we want to display total records count
viewrecords: true,
//grid height
height: '100%',
editurl: '/Edit'
});
$('#jqgProducts').navGrid('#pagerComponents', { edit: false }).
navButtonAdd('#pagerComponents', {
caption: "fdsfsdf",
title: "Edit Component",
buttonicon: "ui-icon-pencil",
onClickButton: function () {
var id = jQuery("#listComponents").getGridParam('selrow');
if (id) {
var data = jQuery("#listComponents").getRowData(id);
window.location = '/Edit/' + data.COMPONENTID;
}
else {
alert("Please select a row to edit.");
}
}
});
});
</script>
最佳答案
因此,对于问题的第一部分,如果您想在单击该行中的编辑按钮时重定向到特定的网址,那么您将需要使用操作格式化程序指定一些内容。我告诉你怎么做
http://www.ok-soft-gmbh.com/jqGrid/ActionButtons41WithoutMultiedit.htm
在这里检查这个示例,我们使用操作格式化程序提供deloptions,您可以像这样指定进行编辑的url
editOptions:{url: '@Url.Action("EditAction")', RestoreAfterError: false}
默认情况下,可编辑的行的数据将发送到服务器,您需要指定 editable:true 以及您想要可编辑的列,例如这样
{ name: '产品名称', 索引: '产品名称', 对齐: '左', editable:true },
现在,如果您单击操作格式化程序的编辑,它将带您进入包含可编辑列数据的“EditAction”,您可以在那里使用它。
对于第二部分,我觉得一切都很好。您可以检查从加载到 jqgrid 的服务器获取的数据是否按字母顺序与 jqgrid 中的列名称相同,否则检查 fiddler 或开发人员工具中的响应。
关于jquery - 单击行上的编辑不会回发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11740865/