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微信公众号，及时获取最新动态及最新资讯