我有一个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/