我在这里使用basicsgrid示例:http://tpeczek.codeplex.com/releases/view/61796
尝试为每一行添加一个编辑按钮,以便我可以打开我的编辑页面但不起作用?我错过了什么?
我在网格定义的末尾添加了这个:
editurl:'/ Home / Edit'
网格:
<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: '@Url.Action("Edit")'
});
});
答案 0 :(得分:1)
如果你想要默认的编辑和删除按钮,那么你可以使用动作格式化器。
只需使用colName
colNames:['Actions', ... ]
这样的事情和colModal
{
name:'act', index:'act', width:55, align:'center', sortable: false,
formatter: 'actions'
}
这样现在这里只有你可以指定你的编辑和删除选项
像这样{
name: 'act', index: 'act', width: 75, align: 'center', sortable: false,
formatter: 'actions',
formatoptions: {
keys: true, restoreAfterError: false, onError: callyourErrorFunction,
afterSave://if you wanto reload ur grid here, reload it,
onEdit: function (id) {
if (typeof (lastSel) !== "undefined" && id !== lastSel) {
var grid=$("#grid");
cancelEditing(grid);
}
lastSel = id;
},
editOptions: {
url: '@Url.Action("EditAction")',
restoreAfterError: false
},
delOptions: {
url: '@Url.Action("DeleteAction")'
}
}
}
检查此答案:jqgrid EditActionIconsColumn Events
如果您想要自定义按钮,那么您可以这样做
loadComplete: function () {
var iCol = getColumnIndexByName(grid, 'act');
$(this).find(">tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")")
.each(function() {
$("<div>", {
title: "Custom",
mouseover: function() {
$(this).addClass('ui-state-hover');
},
mouseout: function() {
$(this).removeClass('ui-state-hover');
},
click: function(e) {
alert("'Custom' button is clicked in the rowis="+
$(e.target).closest("tr.jqgrow").attr("id") +" !");
}
}
).css({"margin-right": "5px", float: "left", cursor: "pointer"})
.addClass("ui-pg-div ui-inline-custom")
.append('<span class="ui-icon ui-icon-document"></span>')
.prependTo($(this).children("div"));
});
}
这将与动作格式化程序一起应用。如果您不需要编辑和删除按钮,只需在formatoptions中将editbutton和delbutton设为false。
答案 1 :(得分:1)
我使用了格式化程序功能来添加可以引导您进入其他页面的按钮。 这就是我做的方式
function PKId_formatter(cellvalue, options, rowObject) {
return '<a href="yourEditUrl?id=' + cellvalue + '"><img src="pencil.png" border=0 /></a>';
}
然后将formatter: PKId_formatter
添加到列定义
colModel : [
...
{ name: '...', index: '...', formatter: PKId_formatter , ...},
...
]
注意:PKId_formatter
是用于格式化按钮列内容的函数名称,您可以使用任何您喜欢的名称
这是对wiki文档的引用:Custom Formatter