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

Question

我在一个带有 AngularJs 的网站上有一个 Kendo UI Grid。如何更新/添加/删除 DataSource 中的单个数组项并在不刷新整个网格的情况下更新网格？

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

更新 #1 - 持久滚动位置

我通过阅读这篇文章实现了这一点：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 Grid。

我并不是说 Kendo UI 是糟糕的软件，但对我来说它似乎并不能很好地说明 Angular。至少不符合我的具体要求。

Answer 1

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

使用这些，您可以更新/添加/删除数据源中的项目，而无需完全替换它。 所有这些方法都将 DataSource 设置为“脏”，因此 UI 会自动更新。