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