免费资源部落

这篇文章给大家介绍Kendo UI Web开发中怎么使用Rows，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

Rows

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

通过ID获取行

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

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

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

varrowModel=gridObject.dataSource.get(10249);//getmethodoftheKendoUIdataSourceobjectvarmodelUID=rowModel.get("uid");//getmethodoftheKendoUIModelobjectvartableRow=$("[data-uid='"+modelUID+"']");//thedata-uidattributeisappliedtothedesiredtablerowelement.ThisUIDisrenderedbytheGridautomatically.

添加自定义行

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

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

functiononGridDataBound(e){if(!e.sender.dataSource.view().length){varcolspan=e.sender.thead.find("th:visible").length,emptyRow='<tr><tdcolspan="'+colspan+'">...norecords...</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-gridtr:hover{/*...backgroundstyleshere...*/}

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

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

关于Kendo UI Web开发中怎么使用Rows就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。