彩票走势图

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

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

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

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

相关链接:

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="//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: "//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="//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: "//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工作簿配置。


慧都高端UI界面开发

标签:

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

文章转载自:慧都网

为你推荐

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


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP