使用 AngularJs 删除 Kendo UI 网格中的单个项目

Question

我在一个带有 AngularJs 的站点上有一个 Kendo UI 网格。我如何 update/add/delete DataSource 中的一个数组项并在不刷新整个网格的情况下更新网格？

如果我尝试只替换 DataSource 对象，网格肯定会更新，但所有分组、列排序和排序都会重置。

更新 #1 - 永久滚动位置

我通过阅读此 post 实现了此目的：http://www.telerik.com/forums/kendo-grid-how-to-keep-scoll-position-after-calling-sync-(with-batch-property-set-to-true) 以此代码结尾：

$scope.activityGridOptions = {
  scrollable: true,
  dataBound: function(e) {
    restoreScrollState();
  },
  dataBinding: function(e) {
    saveScrollState();
  }
  // ...
}

function saveScrollState() {
  $("#kendogrid .k-grid-content").scroll(function () {
    webStorage.local.add("gridScrollTop", $(this).scrollTop());
    webStorage.local.add("gridScrollLeft", $(this).scrollLeft());
  });
}

function restoreScrollState() {
  // Restore scroll state
  $("#kendogrid .k-grid-content").scrollTop(webStorage.local.get("gridScrollTop"));
  $("#kendogrid .k-grid-content").scrollLeft(webStorage.local.get("gridScrollLeft"));
}

更新#2：Angular ui-grid

在Kendo UI Grid 苦苦挣扎了两个星期后，我终于在昨天晚上放弃了整个框架。然后我选择了其他最重要的网格之一 - 最后得到了 Angular ui-grid，经过大约 7 个小时的工作，我能够对其进行编程以替换 Kendo UI 网格。

我并不是说 Kendo UI 是个糟糕的软件，但对我来说它似乎并没有说 Angular 好。至少不符合我的具体要求ui。

Answer 1

DataSource 公开了您可以使用的以下方法： - add - at - get - insert - remove

有了这些，您可以 update/add/delete DataSource 中的项目，而无需完全替换它。所有这些方法都将 DataSource 设置为 "dirty"，因此 UI 会自动更新。

使用 AngularJs 删除 Kendo UI 网格中的单个项目

Remove single item in Kendo UI Grid using AngularJs

kendo-ui

angularjs