如何使用jQuery滚动到Kendo网格中的选定行？
如何使用jQuery滚动到Kendo网格中的选定行？
提问于 2014-01-10 08:59:35
我的问题可能和，
和
$("#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/。
当我试图获得行的视图时，解决方案工作得很好，它位于行表的某个位置。但是，在此之后，(即，在从网格底部获得某一行的焦点后)，当我尝试从顶部选择某一行时，控件仍然向下滚动，因此滚动函数的目的在那里变得毫无意义。
我有一个搜索框，在该框中，我可以键入与行数据匹配的内容，如果匹配，则应触发滚动，以便将选定的行发送到用户视图。
以上解决方案中的代码适合此标准。但是，现在，再一次，如果我试图搜索与网格顶部的某一行相匹配的内容，滚动将不会从底部(先前选定的行)到网格顶部的新狭缝行发生。
如何修改上述代码以满足我的需要？
回答 1
Stack Overflow用户
发布于 2014-01-13 16:02:03
您使用的解决方案中的滚动逻辑没有完成，因此滚动只会在某些时候起作用。此外，它不会准确地滚动到所选行的顶部。我找到了一个解决方案，每一次都能准确可靠地滚动。我的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 + "')");
});看这里的小提琴。
Note：
scrollContentOffset获取网格表主体内容的真正高度(即使它是从视图中滚动出来的(并且这个值可以是负值)。distance是可滚动内容的真实滚动距离。- 我使用了来自
containsIgnoreCase的这个解决方案自定义过滤
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21039889
复制相关文章
相似问题
腾讯云开发者
