<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/excel-export">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["excel"],//工具条，导出excel
excel: {
fileName: "Kendo UI Grid Export.xlsx",//导出文件名
proxyURL: "https://demos.telerik.com/kendo-ui/service/export",
filterable: true //是否支持过滤
},
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products" //读取数据
},
//data:[{},{}] 也可以使用data配置数据
schema:{
model: {
fields: {//Product的字段
UnitsInStock: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsOnOrder: { type: "number" },
UnitsInStock: { type: "number" }
}
}
}
},
filterable: true,
columnMenu: true,
reorderable: true,
resizable: true,
columns: [
{ field: "ProductName", title: "Product Name" },//对应的excel列名
{ field: "UnitPrice", title: "Unit Price"},
{ field: "UnitsOnOrder", title: "Units On Order"},
{ field: "UnitsInStock", title: "Units In Stock"}
]
});
</script>
</div>
</body>
</html>
代码是网上的示例代码，挺好用的，收藏。
2582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
