Kendo Grid滚动到选定的行-Java 学习之路

我希望能够调用一个将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);

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

--- EDITED ---

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

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

当我尝试这个时，它在列表中向下滚动但不向所选行滚动 . 我通过调用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();

5 回答

选择行时，您可以自动执行此操作 . 将函数绑定到“更改”事件，然后在那里，您可以滚动到所选行 . （假设您只能选择一行，由'this.select（）'给出）

JSFiddle example

'变更'处理程序

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

回复于 2018-12-18T11:11:29+00:00

6
因此，这里的大部分答案都是犯了两个错误，一个只是效率问题，另一个是实际错误 .
- 使用 element.find(".k-grid-content") . 这只是大量不必要的 . grid.content更容易（更快）给你完全相同的东西 .
- 使用.offset()查找行的位置 . This is incorrect: 将告诉您行相对于文档本身的位置 . 如果您的页面允许您滚动整个页面（而不仅仅是网格），则此数字将不正确 .
而是使用.position() - 这将为您提供相对于偏移父项的位置 . In order for .position() to give you the correct numbers, the table in your grid.content must have position: relative. 最好通过CSS样式表应用：
```
.k-grid-content table {
  position: relative;
}
```
无论如何，假设您已经有一个引用（我将其称为 grid ）到网格本身，并且您将内容窗格设置为 relative 位置，您所要做的就是：
```
grid.content.scrollTop(grid.select().position().top);
```
或者，对于动画，
```
grid.content.animate({ scrollTop: grid.select().position().top }, 400);
```
如前所述， grid.content 将为您提供内容窗格，即您要实际滚动的部分 . 它是一个jQuery对象 .

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

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

当然，这在 change 回调中最容易使用;那里 grid 只是 this （因为回调是在网格本身上调用的），并且当选择发生变化时会自动调用 change . 但是，只要您想要滚动到选择，就可以调用此代码;你可以通过以下方式获得 grid ：
```
grid = $('#theGridsId').data('kendoGrid');
```
回复于 2018-12-18T11:11:29+00:00

这是更新的代码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) {

    }
}

回复于 2018-12-18T11:11:29+00:00

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

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

回复于 2018-12-18T11:11:29+00:00

我在Kendo移动MVVM中找到了这个功能

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

要么

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

回复于 2018-12-18T11:11:29+00:00

Kendo Grid滚动到选定的行

5 回答

相关问题