如何从剑道网格中删除一行 [英] How do I remove a row from a Kendo Grid

问题描述

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

I have a very simple setup, a grid called #list with a datasource populated with records to display.

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

I have a button on each row with an onClick event that calls this function:

    // 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"+ "
"+ xhr + "
"+ textStatus + "
" + 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"+ "
"+ xhr + "
"+ textStatus + "
" + errorThrown);
            }
        });
    }
}

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

This all works fine, the database is populated and grid.removeRow() makes the row fade out, but then the page reloads, which I don't want.

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

Any idea how to stop the page reloading?

推荐答案

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

below code show how to delete rows using custom delete command.

  $("#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: " ", width: "200px"
            }
        ]
    });

希望可以帮到你

这篇关于如何从剑道网格中删除一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！