我的问题可能类似于,
和
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 中。
上述解决方案中的代码适合此标准。但是,现在,如果我再次尝试搜索与网格顶部的某些行匹配的内容,则不会从底部(先前选择的行)滚动到网格顶部新选择的行。
我如何修改上述代码以满足我的需要?
最佳答案
您使用的解决方案中的滚动逻辑不完整,因此滚动仅有时有效。此外,它不会精确滚动到所选行的顶部。我找到了一种每次都能准确可靠地滚动的解决方案。我的 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
自定义过滤
关于jquery - 如何使用 jQuery 滚动到 Kendo 网格中的选定行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21039889/