javascript - 使用 jQuery 从 Kendo UI Grid 中删除行

Question

我使用的是 Kendo UI 网格，为了删除一行，我使用了带有 Bootstrap 的自定义按钮，当我点击它时，我使用 ajax 调用 web api 方法来删​​除该行，如果成功删除该行从 DOM 中删除它。 (我没有使用剑道的 destroy 命令)

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

这是我的 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

永远不要玩 Kendo 的小部件 DOM。始终使用它的方法。

使用网格的 removeRow() :

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

    grid.removeRow($tr);
});

Demo

---

使用数据源的 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