使用 jQuery 從 Kendo UI Grid 中刪除行

Question

我正在使用 Kendo UI 網格並刪除一行我正在使用帶有引導程序的自定義按鈕，當我單擊它時，使用 ajax 我調用 web api 方法來刪​​除該行，如果成功刪除該行，則將其從DOM。 （我沒有使用劍道的銷毀命令）

我遇到的問題是，如果我嘗試過濾被刪除的那一行，它會再次出現在網格中，而且似乎根本沒有被刪除。

這是我的劍道 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。 始終使用它的方法。

使用 Grid 的removeRow() ：

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

    grid.removeRow($tr);
});

演示

---

使用數據源的remove() ：

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

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

演示

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