Kendo UI for jQuery數據管理使用教程：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是創建現代Web應用程序的最完整UI庫。

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

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

入門指南

 要啟用Grid的選擇功能，請將selectable選項設置為true，結果將應用默認的單行選擇功能。

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

圖1：啟用行選擇的Grid

選擇模式

Grid支持以下選擇模式：

• 復選框列選擇
• 單行選擇
• 多行選擇
• 單個單元格選擇
• 多個單元格選擇

注意：

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

復選框列選擇

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

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

單行選擇

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

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

多行選擇

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

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

單個單元格選擇

要啟用對單個網格單元的選擇，請將selectable設置為cell。

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

多個單元格選擇

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

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

---

掃描關注慧聚IT微信公眾號，及時獲取最新動態及最新資訊