Kendo UI Web開發中怎么使用Rows

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

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 Web開發中怎么使用Rows就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。