如何从剑道网格中删除一行答案

【问题标题】：How do I remove a row from a Kendo Grid如何从剑道网格中删除一行
【发布时间】：2015-07-02 11:38:33
【问题描述】：

我有一个非常简单的设置，一个名为#list 的网格，其数据源填充了要显示的记录。

我在每一行都有一个按钮，带有一个调用此函数的 onClick 事件：

    // Soft-Delete person
    var processURL = crudServiceBaseUrl + '?method=deletePerson';
    function deletePerson(id){
        if (confirm('#getResource("person.detail.confirmdel")#')) {
            $.ajax({
                type: 'POST',
                url: processURL,
                data: {
                    PERS_KY: id
                },
                success: function (data){
                    var thingToDelete = "tr:eq("+id+")";
                    var grid = $("#list").data("kendoGrid");
                    grid.removeRow(thingToDelete);
                },
                error: function (xhr, textStatus, errorThrown){
                    alert("Error while deleting person"+ "\n"+ xhr + "\n"+ textStatus + "\n" + errorThrown);
                }
            });
        }
    }

The server-side stuff works fine, the interaction with the database is good. However, the row does not disappear from the grid.

Anyone?

==============================================================================

In answer to the comments below, here is the revised function:

var processURL = crudServiceBaseUrl + '?method=deletePerson';
function deletePerson(id, row){
    if (confirm('#getResource("person.detail.confirmdel")#')) {
        $.ajax({
            type: 'POST',
            url: processURL,
            data: {
                PERS_KY: id
            },
            success: function (data){
                var thingToDelete = row;
                var grid = $("#list").data("kendoGrid");
                grid.removeRow(thingToDelete);
            },
            error: function (xhr, textStatus, errorThrown){
                alert("Error while soft-deleting person"+ "\n"+ xhr + "\n"+ textStatus + "\n" + errorThrown);
            }
        });
    }
}

这一切都很好，数据库已填充并且 grid.removeRow() 使行淡出，但随后页面重新加载，这是我不想要的。

知道如何停止页面重新加载吗？

【问题讨论】：

您的代码似乎没问题，它应该可以工作。您是否尝试过调试 thingToDelete 是否包含正确的行/元素？
您是否尝试将类型从“POST”更改为“DELETE”？我们可能需要更多信息来解决这个问题，你能发布你的 processURL 函数和实现你的删除 api 的服务器端代码吗？
您也可以尝试使用提琴手来查看您的代码发送的内容以及来自您的 api 的任何错误消息。 Telerik 在这里有一个免费的提琴手telerik.com/fiddler
大家好。 @machun。是的，这是问题之一。我传入的“id”表示记录的数据库 id，而不是行元素。此后，我更改了函数以获取行的第二个参数，并将行更改为“grid.removeRow(row);”。这会使该行消失（耶！），但稍后会导致进一步的问题（嘘！）
@Padhraic, "此 URL 不支持 Http 方法 DELETE" :-(

标签： javascript jquery ajax kendo-ui

【解决方案1】：

下面的代码展示了如何使用自定义删除命令删除行。

  $("#grid").kendoGrid({
        columns: [
            {
                command: [{ name: "edit" }, {
                    name: "Delete", imageClass: "k-icon k-i-close", click: function (e) {
                        e.preventDefault();
                        var dataItem = this.dataItem($(e.target).closest("tr"));
                        if (confirm('Do you really want to delete this record?')) {
                            var dataSource = $("#grid").data("kendoGrid").dataSource;
                            dataSource.remove(dataItem);
                            dataSource.sync();
                        }
                    }
                }], title: "&nbsp;", width: "200px"
            }
        ]
    });

希望对你有帮助

【讨论】：

【解决方案2】：

网格已经支持创建、更新和删除记录。你不应该尝试自己实现它。

您需要在数据源上定义销毁，例如 here

transport: {
    read:  {
             url: crudServiceBaseUrl + "/Products",
    },
    destroy: {
               url: crudServiceBaseUrl + "/Products/Destroy",
    }
}

你也可以开启删除confirmation

    editable: {
     confirmation: "Are you sure that you want to delete this record?"
   }

编辑： 为了有条件地显示删除按钮，您可以连接网格的 DataBound-Event。您还需要一些指示是否显示按钮。在我的示例中，我使用了一个名为 HideButton 的属性。也许你必须调整类 .k-grid-delete 其余的应该可以工作。

$("#grid").kendoGrid({
         ... other configuration ...
         dataBound: onDataBound
});

function onDataBound(e) {
        var grid = this;
        var ds = grid.dataSource;
        var max = ds.data().length;
        for (var i = 0; i < max; i++) {
            var currentUid = ds.at([i]).uid;
            var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");
            if (ds.at(i).HideButton) {
                var editButton = $(currentRow).find(".k-grid-delete");
                editButton.hide();
            }
        }
    }

【讨论】：

感谢您的回答。事实上，我不能以正常方式使用“destroy”属性，因为“删除”按钮不能出现在每一行上。我必须首先运行一些条件逻辑，以允许按钮出现或不出现。我真的不确定如何使用 destroy 属性添加条件逻辑，尽管我愿意就此提出建议:-)

【解决方案3】：

使用 kendo ui 删除行的其他方法

    $("#grid").kendoGrid({
        columns: [
        {       
            command: [
            {
             name: "remove",
              text: '',
              iconClass : 'k-icon k-i-delete',
              
              click: (e) => {
                e.preventDefault();
                const row = $(e.target).closest('tr')[0];
    
                const grid = $(e.target).closest('#grid').data("kendoGrid");
                grid.removeRow(row);
                //grid.saveChanges(); //if you need to immediately push changes on the server 
              }
             },
         
    ]
    });

【讨论】：