Question

我正在使用Kendo UI网格并删除一行我正在使用带引导程序的自定义按钮当我点击它时，使用ajax我调用web api方法删除该行，如果它成功删除了该行将其从DOM中删除。（我没有使用命令毁灭剑道）

我遇到的问题是，如果我尝试过滤掉已移除的那一行，它会再次出现在网格中，而且似乎根本没有删除它。

这是我的Kendo UI网格：

var table = $("#grid").kendoGrid({                
    dataSource: {
        transport: {
            read: {
                url: "/api/customers",
                dataType: "json"
            }
        },
        pageSize: 10
    },               
    height: 550,
    filterable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    columns: [{
        template: "<a href='' class='btn-link glyphicon glyphicon-remove js-delete' title='Delete' data-customer-id= #: Id #></a>",
        field: "Id",
        title: "&nbsp;",
        filterable: false,
        sortable: false,
        width: 50,
        attributes: {
            style: "text-align: center" 
        }
    }, {
        field: "Name",
        title: "Name",
        width: 100,
    }, {
        field: "LastName",
        title: "LastName",
        width: 100,
    }, {
        field: "Email",
        title: "Email",
        width: 150
    }]
});

这是我用于删除行的jQuery代码：

$("#grid").on("click", ".js-delete", function () {
     var button = $(this);
     if (confirm("Are you sure you want to delete this customer?")) {
         $.ajax({
             url: "/api/customers/" + button.attr("data-customer-id"),
             method: "DELETE",
             success: function () {
                 button.parents("tr").remove();  //This part is removing the row but when i filtered it still there.
             }
         });
     }
 });

我知道在jQuery DataTables中什么时候可以这样做：

 table.row(button.parents("tr")).remove().draw();

如何使用jQuery使用Kendo UI做这样的事情？

Answer 1

不要玩剑道的小部件DOM。总是使用它的方法。

使用网格removeRow()：

$("#grid").on("click", "button.remove", function() {
    var $tr = $(this).closest("tr"),
        grid = $("#grid").data("kendoGrid");

    grid.removeRow($tr);
});

Demo

使用DataSource的remove()：

$("#grid").on("click", "button.remove", function() {
    var $tr = $(this).closest("tr"),
        grid = $("#grid").data("kendoGrid"),
        dataItem = grid.dataItem($tr);

    grid.dataSource.remove(dataItem);
});

Demo

Answer 2

我以为我会发表我的答案。我的用法有些不同。我有一个自定义删除按钮，因此我需要按ID（而不是UID）进行删除。好了，你去：您应该能够匹配任何字段值而不是ID。

    var grid = $("#grid").data("kendoGrid");
    var dataItem = grid.dataSource.get(ID);
    var row = grid.tbody.find("tr[data-uid='" + dataItem.uid + "']");
    grid.removeRow(row);

我们试图防止与控制器发生混乱，这会调用现有的删除功能。

Answer 3

删除的行将出现在 kendo ui 中，直到您将更改推送到服务器。要完全删除该行，您需要使用 grid.saveChanges()

所以下面的代码将从服务器以及ui中删除行

const row = $(e.target).closest('tr')[0];
const grid = $(e.target).closest('#grid').data("kendoGrid");
grid.removeRow(row);
grid.saveChanges() //comment out if you need to remove only from ui

使用jQuery从Kendo UI Grid中删除行

3 个答案: