我有一个Kendo(2013.2.716)网格,其中包含一个Edit命令(编辑按钮在第一列中)和40多个其他列。我没有为网格设置Selectable。填充网格后,我可以将鼠标向下移动到“编辑”命令列中,并依次突出显示每个“编辑”按钮,当我单击该按钮时,编辑器立即出现。

但是,没有.Selectable选项,如果滚动网格以查看40多个以上的列,则无法确定我所在的行。因此,我设置了.Selectable()。这给了我突出显示的背景突出显示,这是我连续单击时所期望的。但是,我有两个负面影响:第一,选择新行仅需六秒钟即可更改(并突出显示)新行;第二,单击“编辑”按钮现在无法完成任何工作:没有编辑器出现。

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

最佳答案

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

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 Command。

关于kendo-ui - Kendo UI网格突出显示选定的行,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19098835/

10-12 12:55
查看更多