彩票走势图

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

原创|使用教程|编辑:龚雪|2020-03-11 09:42:29.917|阅读 189 次

概述:Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。 本文主要介绍如何使用Kendo UI for jQuery数据管理中的选择功能,默认情况下,禁用Grid中的选择。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

Kendo UI for jQuery R12020 SP1试用版下载

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo 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微信公众号,及时获取最新动态及最新资讯

慧聚IT微信公众号

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP