【问题标题】:Custom delete button in jqGridjqGrid中的自定义删除按钮
【发布时间】:2011-01-22 13:33:33
【问题描述】:

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

我在API 中没有看到任何可以让我对服务器进行删除的内容——只有delRowData,它会在客户端上删除它。这个可以吗?

(我使用的是ASP.NET component,FWIW)。

【问题讨论】:

    标签: jquery jqgrid jqgrid-asp.net


    【解决方案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 的值。

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

    【讨论】:

    • @Erik - 感谢您为我指明正确的方向。如果您将 ASP.NET 组件连接到正确配置的 SqlDataSource(它还负责更新、插入和选择),那么 ASP.NET 组件实际上会为您执行删除操作。
    【解决方案2】:

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

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

    对我来说,这个缺失的部分是组件 CRUD 操作背后的机制。通过使用 Fiddler,我可以看到它将相关数据发布到同一页面,查询字符串中包含 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");
    };
    

    【讨论】:

      【解决方案3】:

      另一种解决方案是以编程方式单击删除图标(如果存在)。 删除图标(实际上是一个 div)的 id 是“del_[GridId]”。这可能不是一个完全可靠的解决方案,因为它们可能会更改该 id 命名。但是您会得到完全相同的行为(以及更好的确认模式)。

      例子:

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2011-10-30
        • 1970-01-01
        • 2011-04-23
        • 2012-04-10
        • 2014-05-28
        • 1970-01-01
        • 1970-01-01
        • 2011-01-28
        相关资源
        最近更新 更多