完整的jQuery UI组件库Kendo UI for jQuery数据管理使用教程:Grid性能的最佳实现

翻译|使用教程|编辑:龚雪|2020-09-22 09:50:23.903|阅读 19 次

概述:Kendo UI jQuery组件拥有广泛的UI元素和数据可视化组件,jQuery开发人员能快速上手,本文将为大家介绍在使用Kendo UI jQuery的数据管理控件时,如何优化和提高Grid性能的最佳实现和方法。

# 正版采购狂欢节,企业采购正当时 # # 31款JAVA开发必备控件和工具 #

相关链接:

Kendo UI for jQuery R2 2020 SP1试用版下载

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

最佳实现

本文列出了优化和提高Grid性能的最佳实现和方法。

  • 启用分页
  • 启用虚拟化
  • 减少数据量
  • 使用快速浏览器

启用分页

从理论上讲,如果启用了分页,则将解决所有性能问题。 将每页的记录数限制为合理的数量,使您可以实现所有网格功能,而不会影响其性能。 例如,即使每页显示20条记录、每页显示50条记录,结果会导致1,000个单元格被浏览器快速处理。对于更复杂的情况,例如您需要直接在列模板中而不是在编辑器模板中呈现编辑器,则可以进一步减小pageSize -如果在每个单元格中初始化一个小部件,最终将有1,000个小部件,将是一个重大打击。

启用分页功能后,必须决定是在客户端还是在服务器上处理数据操作。此方法适用于所有数据操作,例如过滤、分组和排序。

在以下情况下使用客户端操作:

  • Grid将显示有限数量的记录,如果记录数量增加,则有可能超过maxJsonLength,您可能需要增加该限制。
  • 数据将基于用户,并且不会期望其他用户更新相同的记录。
  • 您希望避免对每个数据操作使用单独的AJAX请求。
  • 您需要访问客户端上的所有dataItem来进行自定义数据操作,要检索整个数据集,请使用dataSource的data方法。

在以下情况下使用服务器端操作:

  • 您拥有大量记录(多达数百万条)。
  • 数据可以由其他用户更改,并且在每次数据操作之后都需要更新数据。
  • 您需要使用LINQ在服务器端执行复杂的表达式,或者当处理从数据库中检索数据的查询比客户端dataSource逻辑要快得多时。

启用虚拟化

虚拟滚动是分页的一种替代方法,可以在以前呈现的记录上呈现记录。 该方法减少了DOM元素,但使用户能够平滑滚动数据。 您可以将本地绑定或远程绑定(用于大量数据)用于虚拟滚动,当用户向下滚动记录时,将启动用于检索下一个视图的新请求。

减少数据量

通过使用外部或初始过滤器减少数据量与Grid不直接相关,而是处理大量数据的通用方法。 概念是实施其他筛选条件,以减少绑定到网格的记录。 一些项目允许使用外部过滤器小部件,例如DropDownList,并且它们的选定值用于在将数据传递到Grid之前对其进行过滤。 例如,如果您有来自不同公司的数百万个订单,则可以使用所有公司的外部DropDownList列表,然后在dataSource的读取数据操作中将当前选择的一个应用为附加参数。 这样,您可以应用初始过滤器,仅返回该公司的订单。

为了减少数据量,您还可以为Grid的dataSource中的特定字段设置初始过滤条件。 但是,如果启用了过滤并且绑定到该字段的列是可见的,则用户将能够删除它。

使用快速浏览器

Internet Explorer会慢慢处理页面上使用太多DOM元素和事件侦听器的窗口小部件。 在Kendo UI小部件的上下文中,使用Chrome可提供最佳的用户体验。


了解最新Kendo UI最新资讯,请关注Telerik中文网!

慧都高端UI界面开发


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:慧都网

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

Kendo UI for jQuery

完整的jQuery UI组件库,可快速构建出色的高性能响应式Web应用程序。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat