jQuery 剑道网格滚动到选定的行

Kendo Grid scroll to selected row

提问by gardarvalur

I want to be able to call a function that scrolls the Kendo grid to the selected row. I′ve already tried some methods but none of them worked,

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

for instance I tried this:

例如我试过这个：

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

I′ve also tried this:

我也试过这个：

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);

Can anyone point me in the right direction please? :)

任何人都可以指出我正确的方向吗？:)

--- EDITED ---

--- 编辑 ---

For other reasons I can not bind to the change event so I have to be able to call a function the scrolls the list to the selected row. This is what I tried with the answer @Antonis provided for me.

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

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

When I tried this it scrolled somewhat down the list but not to the selected row. Am I use the grid object in a wrong way by calling scrollTop on it?

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

This too:

这个也是：

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();

采纳答案by AntouanK

You can do it automatically when a row is selected. Bind a function to the 'change' event, and in there, you can scroll to the selected row. ( assuming you can select only one row, which is given by the 'this.select()' )

您可以在选择一行时自动执行此操作。将函数绑定到 'change' 事件，在那里，您可以滚动到选定的行。（假设您只能选择一行，由 'this.select()' 给出）

JSFiddle example

JSFiddle 示例

the 'change' handler

“更改”处理程序

//    bind to 'change' event
function onChangeSelection(e) {

    //    animate our scroll
    this.element.find(".k-grid-content").animate({  // use $('html, body') if you want to scroll the body and not the k-grid-content div
        scrollTop: this.select().offset().top  //  scroll to the selected row given by 'this.select()'
     }, 400);
}

回答by KRyan

So most of the answers here are making two mistakes, one just a matter of efficiency, the other an actual bug.

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

1. Using element.find(".k-grid-content"). This is just massively unnecessary. grid.contentgives you the exact same thing much more easily (and more quickly).

2. Using .offset()to find the position of the row. This is incorrect:that will tell you the row's position relative to the document itself. If your page allows you to scroll the entire page (not just the grid), this number will be incorrect.

   Instead use .position()– this gives you the position relative to an offset parent. In order for .position()to give you the correct numbers, the table in your grid.contentmust have position: relative.This is best applied through a CSS style sheet:

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

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 relativeposition, all you have to do is this:

无论如何，假设您已经有了grid对网格本身的引用（我将称之为 ），并且您已将内容窗格设置为relative定位，您所要做的就是：

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

Or, for animation,

或者，对于动画，

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

As already discussed, grid.contentgets you the content pane, the part you want to actually scroll. It is a jQuery object.

如前所述，为grid.content您提供内容窗格，即您要实际滚动的部分。它是一个 jQuery 对象。

jQuery objects have a .scrollTopmethod, so that part is pretty simple. The .animatemethod works similarly when you use its scrollTopproperty. Now we just need to know where to scroll to.

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

For that, grid.select()returns a jQuery object corresponding to the row that is selected. That's where you want to scroll to. To get its position, we use the jQuery .position()method. The return value is an object with topand leftfields; we want to scroll to its vertical position, so we use top.

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

This is most easy to use in the changecallback, of course; there gridis simply this(since the callback is called on the grid itself), and changeis automatically called when the selection changes. But you can call this code any time you want to scroll to the selection; you can get gridby using:

这change当然在回调中最容易使用；有grid简单的this（因为回调是在网格本身上调用的），并且change在选择更改时自动调用。但是您可以在任何想要滚动到所选内容时调用此代码；你可以grid通过使用：

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

回答by Hardik Chauhan

Here is the updated code http://jsfiddle.net/27Phm/12/

这是更新后的代码 http://jsfiddle.net/27Phm/12/

//    bind to 'change' event
function onChangeSelection(e) {
    try {
        var $trSelect = this.select();
        var $kcontent = this.element.find(".k-grid-content");
        if ($trSelect && $trSelect.length == 1 && $kcontent) {
            var scrollContentOffset = this.element.find("tbody").offset().top;
            var selectContentOffset = $trSelect.offset().top;
            var IsMove = false;
            var distance = selectContentOffset - scrollContentOffset;
            distance += $kcontent.offset().top;
            if ($trSelect.prev().length == 1 && distance > $trSelect.prev().offset().top) {
                distance = (distance - $trSelect.prev().offset().top); //+ ($trSelect.height());
                //var toprows = $kcontent.scrollTop() / $trSelect.height(); //top rows above the scroll
                var selrowtotal = ($trSelect.offset().top - $kcontent.offset().top) + $trSelect.height();
                IsMove = selrowtotal > $kcontent.height() ? true : false;
                if (IsMove) $kcontent.scrollTop(distance);
            }
            if (!IsMove && $trSelect.offset().top < $kcontent.offset().top) {
                distance = selectContentOffset - scrollContentOffset;
                $kcontent.scrollTop(distance - 15);`enter code here`
            }
        }
    } catch (e) {

    }
}

回答by acady

I had problems with the offset so position works better for me:

我的偏移量有问题，所以位置对我来说效果更好：

grid.element.find(".k-grid-content").animate({  // use $('html, body') if you want to scroll the body and not the k-grid-content div
                    scrollTop: this.select().position().top  //  scroll to the selected row given by 'this.select()'
                 }, 400);    

回答by Wagner Pereira

I found a function for this, in Kendo mobile MVVM

我在 Kendo mobile MVVM 中找到了一个功能

parent.set('onShow', function (e) {
   e.view.scroller.reset();
}

or

或者

app.xxx = kendo.observable({
   onShow: function() { e.view.scroller.reset(); }
});