Kendo UI for jQuery數(shù)據(jù)管理使用教程：Excel導(dǎo)出（一）

---

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四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)。

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

入門指南

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

1. 引入相應(yīng)的工具欄命令并設(shè)置導(dǎo)出設(shè)置。
   • 工具欄配置
   • Excel導(dǎo)出配置
2. 在頁(yè)面上包含JSZip腳本。

要通過(guò)代碼啟動(dòng)Excel導(dǎo)出，請(qǐng)調(diào)用saveAsExcel方法。

注意：

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

下面的示例演示如何啟用Grid的Excel導(dǎo)出功能。

<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>

配置

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

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

導(dǎo)出所有頁(yè)面

默認(rèn)情況下，網(wǎng)格僅導(dǎo)出當(dāng)前數(shù)據(jù)頁(yè)面。 要導(dǎo)出所有頁(yè)面，請(qǐng)將allPages選項(xiàng)設(shè)置為true。

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

<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>

自定義導(dǎo)出的文件

要自定義生成的Excel文件，請(qǐng)使用excelExport事件，workbook事件參數(shù)公開生成的Excel工作簿配置。

---

了解最新Kendo UI最新資訊，請(qǐng)關(guān)注Telerik中文網(wǎng)！