Question

我的问题可能类似于，

和

    $("#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/

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

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

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

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

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抓取网格表正文内容的真正顶部高度（即使它已滚出视图（此值可能为负数）
distance是可滚动内容的真实滚动距离
我使用了来自this solution

containsIgnoreCase

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

1 个答案: