Kendo UI for jQuery数据管理使用教程:Excel导出(一)

翻译|使用教程|编辑:龚雪|2020-07-03 10:27:16.263|阅读 22 次

概述:Kendo UI for jQuery是创建现代Web应用程序的最完整UI库,本文将为大家介绍Grid小部件提供内置的Excel导出功能。

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

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 Q3 2014(2014.3.1119)版本开始,Grid小部件提供内置的Excel导出功能。

入门指南

要启用网格的Excel导出选项:

  1. 引入相应的工具栏命令并设置导出设置。
    • 工具栏配置
    • Excel导出配置
  2. 在页面上包含JSZip脚本。

要通过代码启动Excel导出,请调用saveAsExcel方法。

注意

  • 默认情况下,网格将导出应用了排序、过滤、分组和聚合数据的当前页面。
  • 网格使用当前列顺序、可见性和尺寸来生成Excel文件。
  • 网格不会在Excel文件中导出当前CSS主题。
  • 网格仅导出数据绑定列,所有未设置其字段选项的列将被忽略。
  • 导出期间不使用format选项。
  • 导出期间不使用模板选项。
  • 导出期间不使用detailTemplate选项。

下面的示例演示如何启用Grid的Excel导出功能。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "Kendo UI Grid Export.xlsx"
},
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 7
},
sortable: true,
pageable: true,
columns: [
{ width: 300, field: "ProductName", title: "Product Name" },
{ field: "UnitsOnOrder", title: "Units On Order" },
{ field: "UnitsInStock", title: "Units In Stock" }
]
});
</script>

配置

关于其Excel导出,网格使您能够:

  • 将其所有页面导出到Excel
  • 自定义导出的文件
  • 导出RTL内容
  • 导出多个网格
  • 将文件保存在服务器上
导出所有页面

默认情况下,网格仅导出当前数据页面。 要导出所有页面,请将allPages选项设置为true。

注意:当allPages选项设置为true并启用serverPaging时,网格将对所有数据发出“读取”请求。 如果数据项太多,浏览器可能会无响应。 在这种情况下,请使用服务器端导出。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["excel"],
excel: {
allPages: true
},
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 7
},
pageable: true,
columns: [
{ width: 300, field: "ProductName", title: "Product Name" },
{ field: "UnitsOnOrder", title: "Units On Order" },
{ field: "UnitsInStock", title: "Units In Stock" }
]
});
</script>

自定义导出的文件

要自定义生成的Excel文件,请使用excelExport事件,workbook事件参数公开生成的Excel工作簿配置。


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

慧都高端UI界面开发


标签:

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

文章转载自:慧都网

登录 慧都网发表评论


暂无评论...

为你推荐

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

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

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