jqGrid中的自定义删除按钮 [英] Custom delete button in jqGrid

问题描述

我想在jqGrid中实现自己的删除功能.我目前正在使用内置的UI(选择行，在页脚中按垃圾桶按钮，确认)，但我希望每行都有一个删除按钮，并实现自己的UI进行确认.

I'd like to implement my own delete functionality in jqGrid. I'm currently using the built-in UI (select row, press trashcan button in footer, confirm) but I'd prefer to have a delete button in each row and implement my own UI for confirmation.

在 API 中没有看到任何内容使我可以对服务器执行删除操作-仅delRowData即可在客户端上将其删除.能做到吗?

I don't see anything in the API that allows me to fire off a delete to the server - just delRowData, which deletes it on the client. Can this be done?

(我正在使用FWIW的 ASP.NET组件).

(I'm using the ASP.NET component, FWIW).

推荐答案

@Erik使我走上了正确的道路.他的解决方案有效，但保留了我想避免的现有伪模式弹出式确认UI.

@Erik got me on the right path on this one. His solution works, but preserves the existing pseudo-modal popup confirmation UI, which I wanted to avoid.

它也没有利用 JqGrid ASP.NET组件提供的服务.只要将组件连接到正确配置的数据源(ObjectDataSource，SqlDataSource等)，该组件实际上就会执行所有CRUD操作.

It also doesn't capitalize on the services the JqGrid ASP.NET component provides. The component actually takes care of all CRUD operations as long as it's wired up to a properly configured data source (ObjectDataSource, SqlDataSource, etc).

对我来说，缺少的部分是组件的CRUD操作背后的机制.通过拨弄Fiddler，我可以看到它将相关数据过帐到同一页面，并且在查询字符串中带有JqGrid对象的ClientID:

This missing piece for me was the mechanics behind the component's CRUD operations. By poking around with Fiddler I was able to see that it POSTs the relevant data to the same page, with the ClientID of the JqGrid object in the querystring:

MyPage.aspx?jqGridID=ctl00_ctl00_Content_Content_MyJqGrid

要删除，POST的内容如@Erik所述:

For deleting, the contents of the POST are as @Erik describes:

oper=del&id=18

因此，我能够自己复制该操作，从而使我可以完全控制整个过程:

So I've been able to duplicate the operation on my own so that I retain complete control of the whole process:

$(".DeleteButton", grid).click(function(e) {
    var rowID = getRowID(this);
    $(grid).setSelection(rowID, false);
    if (confirm('Are you sure you want to delete this row?')) {
        var url = window.location + '?jqGridID=' + grid[0].id;
        var data = { oper: 'del', id: rowID };
        $.post(url, data, function(data, textStatus, XMLHttpRequest) {
            $(grid).trigger("reloadGrid");
        });
    } else {
        $(grid).resetSelection();
    } // if
}); // click

getRowID = function(el) {
    return $(el).parents("tr").attr("id");
};

这篇关于jqGrid中的自定义删除按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！