Kendo UI for jQuery数据管理使用教程：Selection

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库。

注意：为提高Grid渲染大量项目和启用选择时的性能，请使用分页和合理的页面大小。

入门指南

要启用Grid的选择功能，请将selectable选项设置为true，结果将应用默认的单行选择功能。

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

图1：启用行选择的Grid

选择模式

Grid支持以下选择模式：

• 复选框列选择
• 单行选择
• 多行选择
• 单个单元格选择
• 多个单元格选择

注意：

• Grid不支持同时使用内置的复选框-列选择和通过selectable选项启用的选择。

复选框列选择

从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.});