Kendo UI Web开发：看如何使用Rows

Kendo UI for jQuery R2 2020 SP1试用版下载

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 object
var modelUID = rowModel.get("uid"); // get method of the Kendo UI Model object
var 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);
}
}

 

禁用悬停效果

从Kendo UI Q1 2016版本开始，所有Kendo UI主题均具有用于行悬停的样式。 悬停是一种UI状态，当网格处于编辑模式时，它可以在较长的表行上提供更好的可视化效果。

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

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;
}

 

---

了解最新Kendo UI最新资讯，请关注Telerik中文网！