如何使用jQuery滚动到剑道网格中的选定行？答案

【问题标题】：How to scroll to the selected row in Kendo grid using jQuery?如何使用jQuery滚动到剑道网格中的选定行？
【发布时间】：2014-01-29 03:57:22
【问题描述】：

我的问题可能类似于，

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 });
     }

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

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

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

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

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

【问题讨论】：

标签： jquery scroll kendo-grid selecteditem

【解决方案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 抓取网格表格正文内容的真实顶部高度（即使它被滚动到视图之外（并且这个值可以是负数）
distance是可滚动内容的真实滚动距离
我使用containsIgnoreCase 自定义过滤来自this solution

【讨论】：