Kendo ui 剑道UI网格高亮显示选定行

我有一个剑道（2013.2.716）网格，带有编辑命令（编辑按钮位于第一列）和40多个其他列。我没有网格的可选设置。填充网格后，我可以在“编辑命令”列下运行鼠标，然后依次突出显示每个编辑按钮，当我单击其中一个按钮时，我的编辑器立即出现

但是，如果没有.selective选项，如果我滚动网格以查看40多列，则无法判断我在哪一行。因此，我设置了.selective（）。这给了我一个背景突出显示，我希望每当我点击一行。但是，我有两个负面的副作用：一个是，选择一个新行大约需要六秒钟来更改（并突出显示）一个新行；另一个是，单击编辑按钮现在什么也做不了：没有编辑器出现

文档中说，“只需将可选选项设置为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")))

---

提供一个全局变量来存储先前高亮显示的行：

var previousHighlightedRow;

提供所需高亮显示的样式：

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

在GridBound事件中，将行的mouseup事件关联起来，以便在先前高亮显示的行上使用removeClass，在“selected”行上使用addClass

    $('.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多行），并且不会终止Edit命令