Kendo UI Web開發(fā)中怎么使用Rows

這篇文章給大家介紹Kendo UI Web開發(fā)中怎么使用Rows，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

Rows

Grid使您可以通過使用數(shù)據(jù)項(xiàng)的ID、添加自定義行、使用行模板以及禁用懸停效果來處理其行的外觀。

通過ID獲取行

要通過數(shù)據(jù)項(xiàng)的ID在網(wǎng)格中獲取表行：

1. 確保在網(wǎng)格數(shù)據(jù)源的模型配置中定義了ID字段。

2. 連續(xù)檢索行模型、模型UID和網(wǎng)格表行。

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.

添加自定義行

當(dāng)數(shù)據(jù)源不返回任何數(shù)據(jù)（例如，由于過濾的結(jié)果）時(shí)，您可以手動(dòng)添加帶有用戶友好消息的表行。

下面的示例演示如何在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狀態(tài)，當(dāng)網(wǎng)格處于編輯模式時(shí)，它可以在較長的表行上提供更好的可視化效果。

但是，如果您的項(xiàng)目要求避免懸停狀態(tài)，請使用以下兩種方法當(dāng)中的一種：

1. 打開Kendo UI theme CSS文件（例如kendo.default.min.css），然后刪除以下CSS規(guī)則。

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

2. 使用下面示例中的CSS代碼覆蓋懸停樣式，＃f1f1f1值對應(yīng)于.k-alt表行的背景色。要為您要應(yīng)用的Kendo UI主題找到正確的值，請使用瀏覽器的DOM檢查器，或者設(shè)置喜歡的背景色值。

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

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

關(guān)于Kendo UI Web開發(fā)中怎么使用Rows就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。