Web界面开发工具！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库。

本文主要介绍如何使用Kendo UI for jQuery数据管理中的选择功能，默认情况下，禁用Grid中的选择。

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

入门指南

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

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

图1：启用行选择的Grid

选择模式

Grid支持以下选择模式：

注意：

复选框列选择

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

来源：oschina

链接：https://my.oschina.net/u/3992677/blog/3192334

标签