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）版本開(kāi)始，Grid小部件提供內(nèi)置的Excel導(dǎo)出功能。

導(dǎo)出從左到右的內(nèi)容

excelExport事件允許您反轉(zhuǎn)單元格并設(shè)置文本對(duì)齊方式，支持從右到左（RTL）語(yǔ)言。 要在Excel中從右到左的流程中呈現(xiàn)文檔，請(qǐng)啟用工作簿的rtl選項(xiàng)。

每行都有一個(gè)類(lèi)型字段，可用于在網(wǎng)格中區(qū)分各種行類(lèi)型。 支持的值為：

• "header"
• "footer"
• "group-header"
• "group-footer"
• "data"

  <script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
  
  <div class="k-rtl">
  <div id="grid" ></div>
  </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
  },
  excelExport: function(e) {
  var workbook = e.workbook;
  var sheet = workbook.sheets[0];
  
  workbook.rtl = true;
  for (var i = 0; i < sheet.rows.length; i++) {
  for (var ci = 0; ci < sheet.rows[i].cells.length; ci++) {
  sheet.rows[i].cells[ci].hAlign = "right";
  }
  }
  },
  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)出多個(gè)網(wǎng)格

默認(rèn)情況下，每個(gè)網(wǎng)格將其內(nèi)容導(dǎo)出到單獨(dú)的Excel工作表中。

在服務(wù)器上保存文件

要將生成的文件發(fā)送到遠(yuǎn)程服務(wù)，請(qǐng)防止保存默認(rèn)文件并發(fā)布base64編碼的內(nèi)容。

<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"],
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" }
],
excelExport: function(e) {
// Prevent the default behavior which will prompt the user to save the generated file.
e.preventDefault();
// Get the Excel file as a data URL.
var dataURL = new kendo.ooxml.Workbook(e.workbook).toDataURL();
// Strip the data URL prologue.
var base64 = dataURL.split(";base64,")[1];
// Post the base64 encoded content to the server which can save it.
$.post("/server/save", {
base64: base64,
fileName: "ExcelExport.xlsx"
});
}
});
</script>

服務(wù)器端處理

要將龐大的數(shù)據(jù)集導(dǎo)出到Excel，請(qǐng)使用新的RadSpreadStreamProcessing庫(kù)，該庫(kù)是Telerik Document Processing (TDP) by Progress的一部分。

已知局限性

• 在客戶端導(dǎo)出期間，網(wǎng)格及其數(shù)據(jù)源僅包含當(dāng)前頁(yè)面中的數(shù)據(jù)項(xiàng)。 結(jié)果，要么批量導(dǎo)出，要么禁用分頁(yè)功能。
• 導(dǎo)出文件的最大大小具有系統(tǒng)特定的限制。 對(duì)于大型數(shù)據(jù)集，請(qǐng)使用RadSpreadStreamProcessing作為文檔處理庫(kù)的一部分提供的服務(wù)器端解決方案。
• 在較舊的瀏覽器（例如Internet Explorer 9和Safari）中，將網(wǎng)格導(dǎo)出到Excel需要實(shí)現(xiàn)服務(wù)器代理。
• 在Excel導(dǎo)出期間，網(wǎng)格不使用列模板，而是僅導(dǎo)出數(shù)據(jù)。 出現(xiàn)這種情況的原因是，列模板可能包含無(wú)法轉(zhuǎn)換為Excel列值的任意HTML。
• 網(wǎng)格出于與未導(dǎo)出列模板相同的原因而不會(huì)導(dǎo)出其詳細(xì)信息模板。
• 在Excel導(dǎo)出期間，網(wǎng)格不使用列格式，因?yàn)槟承㎏endo UI格式與Excel不兼容。 要格式化單元格值，請(qǐng)?jiān)O(shè)置單元格的格式選項(xiàng)。