Kendo UI for jQuery數(shù)據(jù)管理使用教程：Selection

---

Kendo UI for jQuery R12020 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是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。

本文主要介紹如何使用Kendo UI for jQuery數(shù)據(jù)管理中的選擇功能，默認情況下，禁用Grid中的選擇。

注意：為提高Grid渲染大量項目和啟用選擇時的性能，請使用分頁和合理的頁面大小。

入門指南

要啟用Grid的選擇功能，請將selectable選項設(shè)置為true，結(jié)果將應(yīng)用默認的單行選擇功能。

$("#grid").kendoGrid({
selectable: true,
// Other configuration.
});

圖1：啟用行選擇的Grid

選擇模式

Grid支持以下選擇模式：

• 復(fù)選框列選擇
• 單行選擇
• 多行選擇
• 單個單元格選擇
• 多個單元格選擇

注意：

• Grid不支持同時使用內(nèi)置的復(fù)選框-列選擇和通過selectable選項啟用的選擇。
• 若要在重新綁定的Grid中持久保存行選擇，即在發(fā)生分頁、篩選、排序、編輯或虛擬滾動時，請啟用persistSelection屬性。

復(fù)選框列選擇

從R2 2017 SP1版本開始，Grid提供一個選項，用于通過呈現(xiàn)復(fù)選框列來設(shè)置多項選擇。 要啟用復(fù)選框列選擇，請配置columns.selectable屬性。 啟用列的selectable屬性還將在標(biāo)題中顯示一個復(fù)選框，并允許選擇和取消選擇當(dāng)前頁面上的所有行。

$("#grid").kendoGrid({
columns: [
{ selectable: true },
{ field: "name" }
],
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});

單行選擇

通過行的可選選項的默認配置啟用單行選擇，selectable："row"的功能與selectable: true的功能相同。

$("#grid").kendoGrid({
selectable: "row",
// Other configuration.
});

多行選擇

要啟用對多個網(wǎng)格行的選擇，請將selectable設(shè)置為multiple row，啟用多行選擇后，用戶可以通過拖動選擇多行。

$("#grid").kendoGrid({
selectable: "multiple row",
// Other configuration.
});

單個單元格選擇

要啟用對單個網(wǎng)格單元的選擇，請將selectable設(shè)置為cell。

$("#grid").kendoGrid({
selectable: "cell",
// Other configuration.
});

多個單元格選擇

要啟用多個網(wǎng)格單元的選擇，請將selectable設(shè)置為multi cell。 啟用多個單元格選擇后，用戶可以通過拖動選擇多個單元格。

$("#grid").kendoGrid({
selectable: "multiple cell",
// Other configuration.
});

---

了解最新Kendo UI最新資訊，請關(guān)注Telerik中文網(wǎng)！

掃描關(guān)注慧聚IT微信公眾號，及時獲取最新動態(tài)及最新資訊