Jqgrid使用传递参数将删除按钮绑定到JavaScript函数

Question

我有一个jqgrid，我正在使用格式化程序作为列

{ name: 'Delete', width: 40, formatter: self.deleteBtnFormatter }

其中删除Btn格式化程序如下：

  deleteBtnFormatter: function (cellvalue, options, rowdata) {
    var self = this;        
    if (cellVale== "Yasser") {
        return "<div class='abc'>-</div>";
    }
    else {
        var deleteBtnId = // i am getting this from rowData
        var deleteButton = "<div class='xyz'" + "id='" + deleteBtnId + "' >Delete<div>";        
        return deleteButton;
    }
 },

现在我的问题是我应该如何将所有这些删除按钮绑定到另一个 javascript 方法，我将从那里进行 ajax 调用以删除此条目。

我还注意到我想将参数传递给 javascript 方法。

我知道这可以使用Url.Action或通过玩弄href属性来完成，但我想绑定它。

谢谢

Answer 1

您可以使用以下格式化程序JavaScript函数：

function deleteformatter(cellvalue, options, rowdata)
{
var id = // i am getting this from rowData
return "<input style='height:17px;width:17px;'  type='image' src='../Images/delete-icon.png' title='Remove' onclick="javascript:Delete_Click(this,id);"/>";
}
// you can use ajax call rather to use this jqgrid delete function.
function Delete_Click(imgbtn,id){        
    HideError();
    var url = ""//function that you want to call
    jQuery("#jqgridId").jqGrid('delGridRow', id, { top: 230, left: 350, height: 110, reloadAfterSubmit: true, url: url,
                afterComplete : function () {
                    $('#jqgridId').trigger('reloadGrid');                        
                }
            });
}

您可以将以下函数替换为 ajax 调用以删除网格的条目。

    jQuery("#jqgridId").jqGrid('delGridRow', id, { top: 230, left: 350, height: 110, reloadAfterSubmit: true, url: url,
                afterComplete : function () {
                    $('#jqgridId').trigger('reloadGrid');                        
                }
            });

以下是 AJAX 调用的示例：

        $.ajax({
            url: url,
            type: "POST",
            data: JSON.stringify({ ID: id }), 
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            error: function (xhr, status, error) {
                var error = extractError(xhr);
            },
            success: function (data) {
            }
        });