2

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

但是，如果没有 .Selectable 选项，如果我滚动网格以查看 40 多列，我无法判断我在哪一行。所以，我设置了.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 事件中，为行连接 mouseup 事件以在先前突出显示的行上使用 removeClass，并在“选定”行上使用 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 行），并且不会杀死编辑命令。

于 2013-10-01T16:08:49.970 回答