0

在使用 kendo ui - grid 控件时，我发现重置数据源并不会自动将网格滚动位置重新定位到顶部。

这可能是预期的行为，因此在刷新数据源后，我添加了一个调用 jquery scrollTop(0)。这适用于桌面浏览器，但不适用于 iPad。

$("#switch-data-btn").on("click", function(){ 
    grid.dataSource.data(currentData);
    grid.dataSource.transport.data = currentData;
    grid.content.scrollTop(0);
    grid.refresh();
});

http://jsfiddle.net/BFAnK/6/

然后我决定去核，而不是刷新网格数据，我破坏并重建网格。这样做时，我不再需要 scrollTop(0) 调用，一切都很好。

$("#switch-data-btn").on("click", function() {
  buildGrid(currentData); 
  // buildGrid() destroys the grid, empties the dom element and recreates it.
});

http://jsfiddle.net/BFAnK/11/

上述解决方案并不理想，但适用于有限的场景。但是，一旦您引入了一个场景，您希望网格使用 scrollTop() 向下滚动到特定位置，iPad 行为就会滚动到该位置，但会阻止您向上滚动以查看并粘贴较早的结果（但适用于桌面浏览器）。

$("#switch-data-btn").on("click", function() {
  buildGrid(currentData);
  grid.content.scrollTop(50);
});

http://jsfiddle.net/BFAnK/12/

关于如何有效地将数据重新加载到现有的 kendo gri 并滚动到适用于 IE9+、Chrome、Firefox 和 iOS 和 Android 浏览器的所需位置的任何想法？

4

1 回答 1

1

剑道将网格包裹在滚动包装器中。您可以使用此代码将其滚动到顶部：

grid.wrapper.find(".km-scroll-container").css("-webkit-transform", "");

升级版：

剑道支持的官方回答：

scrollTop 方法不起作用，因为在触摸屏设备上 Grid 使用移动滚动器。您可以使用重置方法重置它。例如：

var grid = $("#grid").data("kendoGrid");
grid.content.data("kendoMobileScroller").reset();

请注意，在桌面浏览器上执行此代码会产生错误。如果您想同时支持这两种情况，您可以使用 kendo.support.mobileOS - 如果未定义，则在应使用 scrollTop 的桌面浏览器上打开 Grid。

于 2013-11-19T11:44:22.957 回答