Question

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

但是，如果没有.Selectable选项，如果我滚动网格以查看40多列，我无法确定我在哪一行。所以，我设置.Selectable（）。这给了我突出显示的背景，无论何时我连续点击一下。但是，我有两个负面的副作用：第一，选择一个新行只需要6秒钟来改变（并突出显示）一个新行，而另外两个，点击编辑按钮现在什么都不做：没有编辑器出现。

文档说，“只需将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")))

Answer 1

提供一个全局变量来存储以前突出显示的行：

var previousHighlightedRow;

为所需的突出显示提供样式：

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

在GridBound事件中，连接行的mouseup事件以在先前突出显示的行上使用removeClass，并在＆＃39;选择＆＃39;上添加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多行），并且不会终止编辑命令。

Kendo UI Grid突出显示所选行

1 个答案: