彩票走势图

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

翻译|使用教程|编辑:龚雪|2020-09-07 10:16:41.190|阅读 101 次

概述:Kendo UI for jQuery是创建现代Web应用程序的最完整UI库,本文将为大家介绍Rows的使用。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

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

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo 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;
}


慧都高端UI界面开发

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP