jquery - Kendo Grid 滚动到选定的行

Question

我希望能够调用一个将 Kendo 网格滚动到所选行的函数。我已经尝试过一些方法，但没有一个有效，

例如我尝试过这个:

var grid = $("#Grid").data("kendoGrid"),
    content = $(".k-grid-content");
content.scrollTop(grid.select());

我也尝试过这个:

var gr = $("#Grid").data("kendoGrid");
var dataItem = gr.dataSource.view()[gr.select().closest("tr").index()];
var material = dataItem.id;
var row = grid.tbody.find(">tr:not(.k-grouping-row)").filter(function (i) {
    return (this.dataset.id == material);
});
content.scrollTop(row);

有人能给我指出正确的方向吗？ :)

--- 已编辑 ---

由于其他原因，我无法绑定(bind)到更改事件，因此我必须能够调用将列表滚动到所选行的函数。这就是我尝试使用 @Antonis 为我提供的答案。

var grid = $("#Grid").data("kendoGrid")
grid.element.find(".k-grid-content").animate({  
    scrollTop: this.select().offset().top  
 }, 400);

当我尝试此操作时，它会稍微向下滚动列表，但不会滚动到所选行。我是否通过调用scrollTop以错误的方式使用网格对象？

这也是:

var grid = $("#ItemGrid").data("kendoGrid");
grid.scrollToSelectedRow = function () {
    var selectedRow = this.select();
    if (!selectedRow) {    
        return false;    
    }
    this.element.find(".k-grid-content").animate({
        scrollTop: selectedRow.offset().top  
    }, 400);
    return true;
    };

grid.scrollToSelectedRow();

Answer 1

所以这里的大多数答案都犯了两个错误，一个只是效率问题，另一个是实际的错误。

1. 使用element.find(".k-grid-content")。这是完全没有必要的。 grid.content为您提供完全相同的事情更容易(而且更快)。

2. 使用.offset()找到该行的位置。 这是不正确的:这会告诉您该行相对于文档本身的位置。如果您的页面允许您滚动整个页面(而不仅仅是网格)，则此数字将不正确。

   而是使用 .position() – 这为您提供了相对于偏移父级的位置。 为了让 .position() 为您提供正确的数字，grid.content 中的表格必须具有 position:relative .这最好通过 CSS 样式表来应用:

   .k-grid-content table {  position: relative;}

Anyway, assuming you already have a reference, which I'll call grid, to the grid itself, and you have your content pane set to relative position, all you have to do is this:

grid.content.scrollTop(grid.select().position().top);

或者，对于动画，

grid.content.animate({ scrollTop: grid.select().position().top }, 400);

正如已经讨论过的，grid.content 为您提供内容 Pane ，即您想要实际滚动的部分。它是一个 jQuery 对象。

jQuery 对象有一个 .scrollTop方法，所以这部分非常简单。 .animate当您使用其 scrollTop 属性时，该方法的工作原理类似。现在我们只需要知道滚动到哪里。

为此，grid.select()返回与所选行对应的 jQuery 对象。这就是您想要滚动到的位置。。为了获取它的位置，我们使用 jQuery .position() 方法。返回值是一个带有 top 和 left 字段的对象；我们想要滚动到其垂直位置，因此我们使用 top。

当然，这在 change 回调中最容易使用；其中，grid 只是 this(因为回调是在网格本身上调用的)，并且当选择更改时，会自动调用 change。但是您可以在任何时候想要滚动到所选内容时调用此代码；您可以使用以下方式获取网格:

grid = $('#theGridsId').data('kendoGrid');