jquery - 如何使用 jQuery 滚动到 Kendo 网格中的选定行？

Question

我的问题可能类似于，

jQuery scroll to element

和

Kendo Grid scroll to selected row

    $("#button").click(function() {
    $('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
     }, 2000);
    });

我也尝试过这个:

     this.element.find(".k-grid-content").animate({
     scrollTop: this.select().offset().top });
     }

但是，为上述问题提供的解决方案确实对我有帮助，我对第二个链接提供的 fiddle 链接有问题:http://jsfiddle.net/blackjim/9GCYE/5/

当我尝试获取行表下方某处的行的 View 时，该解决方案工作正常。但是，在那之后(即，从网格底部获得其中一行的焦点后)，当我尝试从顶部选择某一行时，控件仍然向下滚动，因此滚动功能的目的变得毫无意义那里。

我有一个搜索框，我可以在其中键入与行数据匹配的内容，如果匹配，则应触发滚动，以便我将所选行显示到用户 View 中。

上述解决方案中的代码适合此标准。但是，现在，如果我再次尝试搜索与网格顶部的某些行匹配的内容，则不会从底部(先前选择的行)滚动到网格顶部新选择的行。

我如何修改上述代码以满足我的需要？

Answer 1

您使用的解决方案中的滚动逻辑不完整，因此滚动仅有时有效。此外，它不会精确滚动到所选行的顶部。我找到了一种每次都能准确可靠地滚动的解决方案。我的 onChangeSelection 函数如下所示:

function onChangeSelection(e) {
    //calculate scrollTop distance
    var scrollContentOffset = this.element.find("tbody").offset().top;
    var selectContentOffset = this.select().offset().top;
    var distance = selectContentOffset - scrollContentOffset;

    //animate our scroll
    this.element.find(".k-grid-content").animate({
        scrollTop: distance 
    }, 400);
}

这会自动滚动，以便所选行位于网格的最顶部(第一个可见行)。我还添加了您想要的搜索逻辑，并且它能够不区分大小写地搜索项目。搜索功能如下所示:

$("#searchbtn").click(function () {
    var searchval = $("#searchbox").val();
    //...unimportant code omitted
    var grid = $("#grid").data("kendoGrid");
    grid.select("tr:containsIgnoreCase('" + searchval + "')");
});

参见jsfiddle 在这里。

注意:

• scrollContentOffset 获取网格表主体内容的真实顶部高度(即使它滚动到 View 之外(并且该值可以为负数)
• distance是可滚动内容的真实滚动距离
• 我使用了来自 this solution 的 containsIgnoreCase 自定义过滤