Web界面開發工具！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，結果將應用默認的單行選擇功能。

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

圖1：啟用行選擇的Grid

選擇模式

Grid支持以下選擇模式：

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

注意：

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

複選框列選擇

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

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

單行選擇

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

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

多行選擇

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

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

單個單元格選擇

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

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

多個單元格選擇

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

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

閱讀更多 慧都科技 的文章

關鍵字: 數據管理 jQuery 點擊