在jqGrid中创建自定义删除按钮

Question

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

我没有看到API中任何允许我向服务器发送删除请求的内容 - 只有delRowData，它在客户端上删除数据。这可以实现吗？

（顺便说一句，我正在使用ASP.NET组件。）

- Herb Caudill

Answer 1

基本的jqGrid组件中没有处理服务端删除的部分-即使使用内置的delete，它也不会为您删除服务器上的内容，您必须自己处理。但是以下是设置方式，使得当有人点击您的自定义删除按钮时，可以调用您的脚本：

// 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 的值。

实际上，我刚刚在我的项目中完成了这个操作，作为对你问题的回应 - 尽管在看到问题之前我对如何执行此操作有一个模糊的想法。所以...谢谢你让我去做它！

- Erik

---

@Erik - 感谢您指引我正确的方向。如果您将ASP.NET组件连接到正确配置的SqlDataSource上，它实际上会为您执行删除操作（它还会处理更新、插入和选择）。 - Herb Caudill

Answer 2

@Erik让我找对了方向。他的解决方案可行，但保留了现有的伪模态弹出确认UI，而我想避免这种情况。

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

对我来说，缺失的部分是组件的CRUD操作机制。通过使用Fiddler进行探索，我能够看到它将相关数据POST到同一页面，并在查询字符串中使用JqGrid对象的ClientID：

MyPage.aspx?jqGridID=ctl00_ctl00_Content_Content_MyJqGrid

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

oper=del&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");
};

- Herb Caudill

Answer 3

另一个解决方案是通过编程方式单击删除图标（如果存在）。 删除图标（实际上是一个div）的ID为“del_[GridId]”。这可能不是完全可靠的解决方案，因为他们可能会更改该ID命名。但您将获得完全相同的行为（以及更好的确认模态框）。

示例：

$('#MyButton').click(function() { $('#del_' + gridId).click(); });

- henebb