Kendo UI for jQuery数据管理使用教程:自适应渲染

翻译|使用教程|编辑:龚雪|2020-09-16 10:26:17.137|阅读 21 次

概述:Kendo UI for jQuery是创建现代Web应用程序的最完整UI库,本文将为大家介绍如何自适应渲染。

# 正版采购狂欢节,企业采购正当时 # # 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库。

自适应渲染

Kendo UI for jQuery通过支持自适应增强功能,可在任何设备上为客户提供一致的体验。

例如,当您在移动设备上过滤或编辑数据时,Kendo UI会在用户的新屏幕中滑动,这与台式机的内联和弹出操作有所不同。

启用响应式设计

要启用自适应渲染功能,请将mobile属性设置为true或“ phone”:

  • 如果设置为true,则在移动浏览器上查看时,小部件将使用自适应渲染。
  • 如果设置为“ phone”,则无论浏览器类型如何,都将强制小部件使用自适应渲染。

重要提示:对于移动渲染,我们建议也设置高度选项。 如果不设置明确的高度,则网格的每个视图都可能具有不同的高度。

<div id="grid"></div>

<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" },
{ command: "destroy" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
filterable: true,
editable: true,
columnMenu: true,
height: 550,
mobile: "phone"
});
</script>

在移动设备上配置面板

放置自适应网格的移动面板不会自动扩展其高度,要将自适应网格添加到Kendo UI移动应用程序中,请将各个视图的拉伸配置设置为true,然后将100%的高度应用于网格。或者定义一个明确的像素网格高度,并省略面板拉伸选项。

重要提示:在Kendo移动应用程序中使用网格的自适应渲染时,请应用我们Less-based的主题。

下面的示例演示如何应用Stretch选项。

<div id="foo" data-role="view" data-init="onInit" data-stretch="true">
<div id="grid"></div>
</div>

<script>
var gridConfig = {
columns: [
{ field: "name" },
{ field: "age" },
{ command: "destroy" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
filterable: true,
columnMenu: true,
mobile: "phone",
height: "100%"
};

function onInit() {
$("#grid").kendoGrid(gridConfig);
}

var app = new kendo.mobile.Application();
</script>

下面的示例演示如何应用height选项。

<div id="foo" data-role="view" data-init="onInit">
<div id="grid"></div>
</div>

<script>
var gridConfig = {
columns: [
{ field: "name" },
{ field: "age" },
{ command: "destroy" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
filterable: true,
columnMenu: true,
mobile: "phone",
height: "140px" //grid will be 140px height
};

$("#grid").kendoGrid(gridConfig);
</script>

调整列大小

当用户将手指放在相应的列标题上时,将触发触摸屏设备上的列大小调整功能。 当出现调整大小图标时,用户可以通过拖动来调整列的大小。

图1:在移动设备上具有可调整大小的列的网格

Kendo UI for jQuery数据管理使用教程:自适应渲染
破坏自适应网格

在自适应模式下,网格将生成辅助标记,如果要手动销毁小部件,则需要将其删除。

手动销毁网格:

  1. 在围绕Grid小部件创建的最近的.k-pane-wrapper ancestor上调用kendo.destroy() ;
  2. 从DOM中删除整个.k-pane-wrapper元素。

要重新创建Grid,请在最初放置Grid div的同一位置插入一个新的div。


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

慧都高端UI界面开发


标签:

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

文章转载自:慧都网

登录 慧都网发表评论


暂无评论...

为你推荐

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

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

Kendo UI for jQuery

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

Kendo UI for Angular

专用于Angular开发的专业级Angular UI组件。

Kendo UI Support for React

支持React Javascript框架,更快地构建更好的应用程序。

Kendo UI Support for Vue

为Vue技术框架提供可用的Kendo UI组件,更快地构建更好的Vue应用程序。

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