如何使用jQuery滾動到Kendo網格中的選定行？

和

$("#button").click(function() { 
    $('html, body').animate({ 
    scrollTop: $("#elementtoScrollToID").offset().top 
    }, 2000); 
    });

，我想這也：

 this.element.find(".k-grid-content").animate({ 
    scrollTop: this.select().offset().top }); 
    }

但是，對溶液提供ABO已經沒問題幫我，我有通過第二鏈路提供的小提琴鏈接一個問題：http://jsfiddle.net/blackjim/9GCYE/5/

解決方案的工作正常，當我試圖讓這是某處行的表中的行的看法。但是，在這之後，（即，從電網的底部獲得該行的一個重點後），當我嘗試選擇從上面一些行，控制仍然滾下，從而滾動功能的目的去無意義那裏。

我有一個搜索框，在其中我可以鍵入與行的數據相匹配的東西，如果它匹配，滾動應被觸發，讓我得到我選擇行給用戶查看。

的代碼，在上面的解決方案是爲細此標準。但是，現在，再次，如果我試圖尋找的東西，與網格中，滾動不是從底部發生（先前選擇行）到新slected行的頂部一些列頂部的電網相匹配。

我如何修改上面的代碼以適應我的需要？

來源

2014-01-10 user2771399

您使用的解決方案中的滾動邏輯不完整，所以滾動只能在有時才起作用。此外，它不會完全滾動到所選行的頂部。我發現了一種每次都能準確可靠滾動的解決方案。我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 + "')"); 
});

見jsfiddle這裏。

注意：

scrollContentOffset抓住網格表主體內容（即使它滾出視的真正頂部的高度（這個值可以是負的）
distance是真正的滾動可滾動內容
我用containsIgnoreCase的距離從定製this solution

濾波

來源

2014-01-13 16:02:03 gitsitgo

如何使用jQuery滾動到Kendo網格中的選定行？

回答

相關問題