Kendo UI for jQuery数据管理使用教程：Rows

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

Rows

Grid使您可以通过使用数据项的ID、添加自定义行、使用行模板以及禁用悬停效果来处理其行的外观。

通过ID获取行

要通过数据项的ID在 格中获取表行：

1. 确保在 格数据源的模型配置中定义了ID字段。

2. 连续检索行模型、模型UID和 格表行。

var rowModel = gridObject.dataSource.get(10249); // get method of the Kendo UI dataSource objectvar modelUID = rowModel.get("uid"); // get method of the Kendo UI Model objectvar tableRow = $("[data-uid='" + modelUID + "']"); // the data-uid attribute is applied to the desired table row element. This UID is rendered by the Grid automatically.

添加自定义行

当数据源不返回任何数据（例如，由于过滤的结果）时，您可以手动添加带有用户友好消息的表行。

下面的示例演示如何在Grid的dataBound事件处理程序中添加表行。

function onGridDataBound(e) {if (!e.sender.dataSource.view().length) {var colspan = e.sender.thead.find("th:visible").length,emptyRow = '<tr><td colspan="' + colspan + '">... no records ...</td></tr>';e.sender.tbody.parent().width(e.sender.thead.width()).end().html(emptyRow);}}

禁用悬停效果

但是，如果您的项目要求避免悬停状态，请使用以下两种方法当中的一种：

1. 打开Kendo UI theme CSS文件（例如kendo.default.min.css），然后删除以下CSS规则。

.k-grid tr:hover {/* ...background styles here... */}

2. 使用下面示例中的CSS代码覆盖悬停样式，＃f1f1f1值对应于.k-alt表行的背景色。要为您要应用的Kendo UI主题找到正确的值，请使用浏览器的DOM检查器，或者设置喜欢的背景色值。

.k-grid tr:not(.k-state-selected):hover {background: none;color: inherit;}.k-grid tr.k-alt:not(.k-state-selected):hover {background: #f1f1f1;}