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

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

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

入門指南

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

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

圖1：啟用行選擇的Grid

選擇模式

Grid支持以下選擇模式：

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

注意：

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

復(fù)選框列選擇

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

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

單行選擇

通過行的可選選項(xiàng)的默認(rèn)配置啟用單行選擇，selectable："row"的功能與selectable: true的功能相同。

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

多行選擇

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

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

單個(gè)單元格選擇

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

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

多個(gè)單元格選擇

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

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

---

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