9

剣道グリッドを選択した行にスクロールする関数を呼び出せるようにしたいです。すでにいくつかの方法を試しましたが、どれもうまくいきませんでした。

たとえば、私はこれを試しました：

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

5 に答える 5

15

したがって、ここでの回答のほとんどは 2 つの間違いを犯しています。1 つは効率の問題であり、もう 1 つは実際のバグです。

  1. を使用してelement.find(".k-grid-content")います。これは非常に不必要です。grid.contentまったく同じことをはるかに簡単に（そしてより迅速に）提供します。

  2. .offset()行の位置を見つけるために使用します。これは正しくありません。ドキュメント自体に対する行の位置がわかります。ページ全体 (グリッドだけでなく) をスクロールできる場合、この数値は正しくありません。

    代わりに使用し.position() てください – これにより、オフセットされた親に対する相対的な位置が得られます。が正しい数字を提供するためには、テーブルにが必要です。.position()grid.contentposition: 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');
于 2015-02-23T22:32:25.433 に答える
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);
于 2014-11-02T14:20:22.050 に答える
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) {

    }
}
于 2014-06-11T02:47:48.047 に答える