javascript - 如何根据列值删除 kendo ui 网格行

Question

在 asp.net mvc View 上，我有一个 Kendo UI TreeView 和一个 Kendo UI 网格。 TreeView 中的每个复选框在网格的 ID 列中具有相同的 id 值。每当我取消选中 TreeView 中的复选框时，我想删除网格中具有此 id 值的相应行。 ID 是网格中的列之一。以下是我的代码:

以下函数是通过 TreeView 上的取消选中操作执行的

function onCheck() {
                var checkedNodes = [],
                    treeView = $("#treeview").data("kendoTreeView"),

                var myNodes = treeView.dataSource.view();

                for (var i = 0; i < myNodes.length; i++) {
                    var children = myNodes[i].children.view();
                    if (children) {
                        for (var j = 0; j < children.length; j++) {

                            if ((typeof children[j].checked !== undefined)  && (!children[j].checked)) {
                                alert("You unchecked " + children[j].id); //This shows the correct id value
                                var dataItem = $("#grid").data("kendoGrid").dataSource.get(children[j].id);
                                $("#grid").data("kendoGrid").dataSource.remove(dataItem);
                            }
                        }
                    }
                }

下面是网格的代码:

      $("#grid").kendoGrid({
        pageable:true,
        dataSource: dataSource, //comes as json from a url
        schema: {
            model: {
                id: "ID"
            }
        },
        pageSize:3,


        columns: [
            {
                hidden: true,
                field: "ID"

            },
            {
                field: "MyFileName"
             },
      });

当我调试时，var dataItem = $("#grid").data("kendoGrid").dataSource.get(children[j].id); 中的dataItem未定义。然而， TreeView 检索到的 id 和网格中的 id 是匹配的。这是我看到的错误:0x800a138f - JavaScript 运行时错误:无法获取未定义或空引用的属性“uid”

显然没有删除网格行。

谢谢

Answer 1

在复选框的更改事件上尝试此操作:

var id = treeView.dataItem(this.closest("li")).id;
var gridDataItem = grid.dataSource.data().filter(function(item) {
    return item.id == id;
})[0];

grid.removeRow('tr[data-uid="' + gridDataItem.uid + '"]');

filter方法将通过当前id在网格中查找相关行。使用网格的removeRow()而不是直接从数据源中删除。

Demo