简体   繁体   English

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

[英]How do I remove a row from a Kendo Grid

I have a very simple setup, a grid called #list with a datasource populated with records to display.我有一个非常简单的设置,一个名为#list 的网格,其中包含一个填充了要显示的记录的数据源。

I have a button on each row with an onClick event that calls this function:我在每一行上都有一个按钮,带有一个调用此函数的 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);
            }
        });
    }
}

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.这一切正常,数据库已填充并且 grid.removeRow() 使行淡出,但随后页面重新加载,这是我不想要的。

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"
            }
        ]
    });

Hope this may help 希望这可能有所帮助

The grid already supports create, update and deleting of records. 网格已经支持创建,更新和删除记录。 You should not try to implement it on your own. 你不应该试图自己实现它。

You need to define destroy on your datasource like here 您需要像这里一样数据源上定义destroy

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

Also you can turn on a delete confirmation 您也可以打开删除确认

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

EDIT: In order to conditionally show delete buttons you can hook up the DataBound-Event of the grid. 编辑:为了有条件地显示删除按钮,您可以连接网格的DataBound-Event。 You also need some indication wheter or not to show the button. 您还需要一些指示或不显示按钮。 I used a property called HideButton in my example. 我在我的例子中使用了一个名为HideButton的属性。 Maybe you have to adjust the class .k-grid-delete the rest should work. 也许你必须调整类.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();
            }
        }
    }

Other way to remove row with kendo ui使用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 
              }
             },
         
    ]
    });

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM