剑道网格滚动到选定的行

问题描述 投票：0回答：6

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

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

---编辑---

出于其他原因，我无法绑定到更改事件，因此我必须能够调用一个函数将列表滚动到选定的行。这就是我尝试使用@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();
jquery asp.net-mvc asp.net-mvc-4 kendo-ui kendo-grid
6个回答
16
投票

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

  1. 使用

    element.find(".k-grid-content")
    。这完全没有必要。 
    grid.content
     更容易（更快）为您提供完全相同的东西。

  2. 使用

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

    而是使用 

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

    .k-网格内容表{
  位置：相对；
}

无论如何，假设你已经有一个引用，我称之为 

grid
，到网格本身，并且你的内容窗格设置为 
relative
位置，你所要做的就是：

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

或者，对于动画，

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

如前所述，

grid.content
为您提供内容窗格，即您真正想要滚动的部分。它是一个 jQuery 对象。

jQuery 对象有一个 

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



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



这个在
change
回调中使用最方便，当然； 
grid
 只是 
this
（因为回调是在网格本身上调用的），并且 
change
 在选择更改时自动调用。但是您可以在任何时候想要滚动到选择时调用此代码；你可以通过使用获得
grid
：



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


    

    

    
    
    

    

        

            

                

                    
6
投票

                    

                

            

        

        


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



JSFiddle 示例



“更改”处理程序



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


    

    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        


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

    }
}


    

    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        


我在偏移方面有问题，所以位置对我来说效果更好：



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


    

    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        


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



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




或



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


    

    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        


除了已经说的，如果你使用虚拟卷轴
例如JQuery：


$("#grid").kendoGrid({
scrollable: {
    virtual: true
}});



 或在 ASP.NET MVC 中


.Scrollable(scrollable => scrollable.Virtual(true))


...像这样滚动到选定的行：


div


我一直在努力解决这个问题，所以也许它可以帮助某人节省一些时间。

    

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.