Kendo UI for jQuery R2 2020 SP1試用版下載

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應用程序的最完整UI庫。

從Kendo UI Q3 2014（2014.3.1119）版本開始，Grid小部件提供內(nèi)置的Excel導出功能。

入門指南

要啟用網(wǎng)格的Excel導出選項：

1. 引入相應的工具欄命令并設置導出設置。
   • 工具欄配置
   • Excel導出配置
2. 在頁面上包含JSZip腳本。

要通過代碼啟動Excel導出，請調(diào)用saveAsExcel方法。

注意：

• 默認情況下，網(wǎng)格將導出應用了排序、過濾、分組和聚合數(shù)據(jù)的當前頁面。
• 網(wǎng)格使用當前列順序、可見性和尺寸來生成Excel文件。
• 網(wǎng)格不會在Excel文件中導出當前CSS主題。
• 網(wǎng)格僅導出數(shù)據(jù)綁定列，所有未設置其字段選項的列將被忽略。
• 導出期間不使用format選項。
• 導出期間不使用模板選項。
• 導出期間不使用detailTemplate選項。

下面的示例演示如何啟用Grid的Excel導出功能。

<script src="http://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: "http://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>

配置

關(guān)于其Excel導出，網(wǎng)格使您能夠：

• 將其所有頁面導出到Excel
• 自定義導出的文件
• 導出RTL內(nèi)容
• 導出多個網(wǎng)格
• 將文件保存在服務器上

導出所有頁面

默認情況下，網(wǎng)格僅導出當前數(shù)據(jù)頁面。 要導出所有頁面，請將allPages選項設置為true。

注意：當allPages選項設置為true并啟用serverPaging時，網(wǎng)格將對所有數(shù)據(jù)發(fā)出“讀取”請求。 如果數(shù)據(jù)項太多，瀏覽器可能會無響應。 在這種情況下，請使用服務器端導出。

<script src="http://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: "http://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事件參數(shù)公開生成的Excel工作簿配置。