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

瞭解最新Kendo UI最新資訊，請關注Telerik中文網！