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

我的问题可能类似于

及

我也试过：

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

但是，上述问题的解决方案确实帮助了我，我对第二链接提供的小提琴链接有一个问题：

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

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

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

---

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

您使用的解决方案中的滚动逻辑不完整，因此滚动只能在某些情况下工作。此外，它不会精确滚动到选定行的顶部。我找到了一个解决方案，每次都能准确可靠地滚动。我的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 + "')");
});

请参见此处的

注意：

• scrollContentOffset

  获取网格表体内容的真实顶部高度（即使它已被滚动到视图之外（该值可以为负值）

• distance

  是可滚动内容的真实滚动距离
• 我使用了

  containsIgnoreCase

  从

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