jqGrid中的自定义删除按钮

Question

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

我没有在API中看到任何允许我触发对服务器的删除的内容 - 只是delRowData在客户端删除它.可以这样做吗？

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

Answer 1

基本的jqGrid组件没有任何部分可以处理服务器端删除 - 即使你使用内置删除,它也没有为你删除服务器端,你必须自己处理.但是这里是如何进行设置,以便在有人点击您的自定义删除按钮时调用您的脚本:

// your custom button is #bDelete
$("#bDelete").click(function(){ 

    // Get the currently selected row
    toDelete = $("#mygrid").jqGrid('getGridParam','selrow');

    // You'll get a pop-up confirmation dialog, and if you say yes,
    // it will call "delete.php" on your server.
    $("#mygrid").jqGrid(
        'delGridRow',
        toDelete,
          { url: 'delete.php', 
            reloadAfterSubmit:false}
    );
});

以下信息通过POST过去到您的删除URL

Array
(
    [oper] => del
    [id] => 88
)

其中id显然是你在这种情况下传递给函数的id,值是toDelete.

我实际上只是为自己的项目做了这个,以回答你的问题 - 尽管在看到这个问题之前我对如何做到这一点有一个模糊的想法.所以......谢谢你让我明白了!

Answer 2

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

它也没有利用JqGrid ASP.NET 组件提供的服务。该组件实际上负责所有 CRUD 操作，只要它连接到正确配置的数据源（ObjectDataSource、SqlDataSource 等）即可。

对我来说，缺少的部分是组件 CRUD 操作背后的机制。通过使用 Fiddler，我发现它将相关数据 POST 到同一页面，并在查询字符串中包含 JqGrid 对象的 ClientID：

MyPage.aspx?jqGridID=ctl00_ctl00_Content_Content_MyJqGrid

对于删除，POST 的内容如@Erik 描述：

操作=删除&id=18

因此，我能够自己重复该操作，以便保留对整个过程的完全控制：

$(".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");
};