2

編集コマンド (編集ボタンは最初の列にあります) と 40 以上の他の列を含む剣道 (2013.2.716) グリッドがあります。グリッドの選択可能なセットがありません。グリッドにデータが入力されたら、[編集] コマンド列にマウスを移動すると、各 [編集] ボタンが順番に強調表示されます。いずれかをクリックすると、エディターがすぐに表示されます。

ただし、.Selectable オプションがないと、グリッドをスクロールして 40 列以上を表示すると、どの行にいるのかわかりません。そこで、.Selectable() を設定しました。これにより、連続してクリックするたびに期待していた背景の強調表示が得られました。ただし、2 つのマイナスの副作用があります。1 つは、新しい行を選択すると、新しい行を変更 (および強調表示) するだけで約 6 秒かかります。もう 1 つは、[編集] ボタンをクリックしても何も実行されません。エディターが表示されません。

ドキュメントには、「selectable オプションを true に設定するだけで、グリッドで選択を有効にできます」と記載されています。しかし、これ以上のことがあるに違いありません...背景色を変更するのに時間がかかるべきではなく、編集ボタンを殺すべきではありません。私は何を取りこぼしたか？

@(Html.Kendo().Grid(Model.Data)
.Columns(columns =>
{
    columns.Command(command => command.Edit().Text("Edit").UpdateText("Submit")).Width(97).HtmlAttributes(new { style = "text-align: center;" });
...
})
.Selectable( )
.Editable(editable => editable
    .Mode(GridEditMode.PopUp)
    .TemplateName("MyEditor")
    .Window(w => w.Width(500))
    .Window(w => w.Title("My Editor")))
4

1 に答える 1

6

前に強調表示された行を格納するグローバル変数を指定します。

var previousHighlightedRow;

目的の強調表示のスタイルを指定します。

.highlightTR {
    background-color: #99CCFF;
}

GridBound イベントで、以前に強調表示された行で removeClass を使用し、「選択された」行で addClass を使用するように行の mouseup イベントを配線します。

    $('.k-grid-content tbody').off('mouseup');
    $('.k-grid-content tbody').on('mouseup', 'tr', function () {
        if (previousHighlightedRow != undefined) {
            previousHighlightedRow.removeClass("highlightTR");
        }
        $(this).addClass("highlightTR");
        previousHighlightedRow = $(this);
    });

このアプローチは迅速で (500 行以上)、編集コマンドを強制終了しません。

于 2013-10-01T16:08:49.970 に答える