0

Telerik MVC Grid があり、選択したものを強制的にリストの一番上に表示させたいと考えています。グリッドに DetailedView を使用しているので、折りたたんだり展開したりできます。選択した行をリストの一番上に強制するにはどうすればよいですか?

私のJquery：

function unit_onDetailViewExpand(e) {
    // Select the Grid
    var grid = $(this).data('tGrid');
    //Close all other rows
    grid.$rows().not(e.masterRow).each(function (index, row) {
        grid.collapseRow(row);
    });

    /* TODO: move row to the top, this hasn´t worked for me so far
    grid.reorderColumn(0, grid.columnFromTitle("Name"));
    $.telerik.trigger(grid.element, 'repaint');
    */
}

みんなありがとう:)

#### 編集済み ####

これは、行を選択するときに私が今やっていることです:

function onRowSelect(e) {
    $(e.row).prependTo($(e.row).parent());
    var grid = $('#RentableUnits').data("tGrid");
    // get the first master table row
    var tr = $("#RentableUnits tbody > .t-master-row:eq(0)"); // use .t-master-row to select only the master rows

    // expand the row
    grid.expandRow(tr);
}

現在、DetailedView のコンテンツが移動していないという問題に直面しています。行を選択すると、行が一番上に移動し、行が展開されますが、前の行のコンテンツはまだ展開されています。

私はドキュメントを見ていて、これがdetailRowと関係があることを発見しましたが、masterRowと一緒にそれを移動する方法がわかりません.

詳細ビューの内容を行と一緒に移動する方法について誰か考えがありますか?

#### 編集済み (再度) ####

これまでのところ、テーブルの行はリストの一番上に移動されますが、その特定の行が展開されるたびに、元の一番上の行のコンテンツ (2 番目の行のコンテンツ) を取得し続けます)。Firebug で見たところ、.t-master-row の 1 つが展開されるまで、テーブル内に .t-detail-row がないことがわかりました。選択した行と一緒に別のものを移動する必要がありますか?

（FirebugのHTMLを示す質問とともに画像もアップロードしました）

function onRowSelect(e) {
    var grid = $('#RentableUnits').data("tGrid");

    var selectedRow = $('#RentableUnits tbody>.t-state-selected');
    selectedRow.prependTo(selectedRow.parent());
    if (selectedRow.next().is('.t-detail-row')) {
        selectedRow.next().prependTo(selectedRow.parent());
    }
    selectedRow.prependTo(selectedRow.parent());

    // get the first master table row
    var tr = $("#RentableUnits tbody > .t-master-row:eq(0)"); // use .t-master-row to select only the master rows
    // expand the row
    grid.expandRow(tr);
}

大変お世話になりました。もう 1 回バグを修正できますか? :)

#

ページの読み込み、行は正しい

#

行が選択され、間違った詳細コンテンツが読み込まれます (最初の行と同じ)

#
4

2 に答える 2

1

次のスクリプトを使用すると、必要に応じて選択した行を簡単に一番上に移動できます。

var selectedRow=  $('#GridName tbody>.t-state-selected'); 
selectedRow.prependTo(selectedRow.parent())

必要に応じて、セレクターをより一般的なものに変更できることに注意してください。クラス名を使用するか、検索コンテキストを使用して、選択した行を見つけます。

または、 onRowSelectイベントを使用して、次のようにロジックを実行することもできます。

function onRowSelect(e){
    $(e.row).prependTo($(e.row).parent());
}
于 2012-11-24T23:23:11.003 に答える
0

Grid コンポーネントには、基礎となるデータがあります。選択した行で表されるデータ項目も配置す​​る必要があります。

function on_RowSelect(e){

    var grid = $(e.target).data('tGrid');
    var $rows = grid.$rows();

    // move underlying data
    var rowIndex = $rows.index(e.row);
    grid.data.unshift(grid.data.splice(rowIndex,1)[0])

    // move rows
    var $selectedRows = $(e.row).add($(e.row).next('.t-detail-row'));
    $rows.parent().prepend($selectedRows);
}

よろしく

于 2012-11-29T12:16:39.353 に答える