【官网Demo】
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jszip.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["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"
},
schema:{
model: {
fields: {
UnitsInStock: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsOnOrder: { type: "number" },
UnitsInStock: { type: "number" }
}
}
},
pageSize: 7,
group: {
field: "UnitsInStock", aggregates: [
{ field: "ProductName", aggregate: "count" },
{ field: "UnitPrice", aggregate: "sum"},
{ field: "UnitsOnOrder", aggregate: "average" },
{ field: "UnitsInStock", aggregate: "count" }
]
},
aggregate: [
{ field: "ProductName", aggregate: "count" },
{ field: "UnitPrice", aggregate: "sum" },
{ field: "UnitsOnOrder", aggregate: "average" },
{ field: "UnitsInStock", aggregate: "min" },
{ field: "UnitsInStock", aggregate: "max" }
]
},
sortable: true,
pageable: true,
groupable: true,
filterable: true,
columnMenu: true,
reorderable: true,
resizable: true,
columns: [
{ field: "ProductName", title: "Product Name", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },
{ field: "UnitPrice", title: "Unit Price", aggregates: ["sum"] },
{ field: "UnitsOnOrder", title: "Units On Order", aggregates: ["average"], footerTemplate: "Average: #=average#",
groupFooterTemplate: "Average: #=average#" },
{ field: "UnitsInStock", title: "Units In Stock", aggregates: ["min", "max", "count"], footerTemplate: "Min: #= min # Max: #= max #",
groupHeaderTemplate: "Units In Stock: #= value # (Count: #= count#)" }
]
});
</script>
</div>
</body>
</html>
2、带分页的grid导出全部数据
如果grid带有分页，这时要是需要导出excel的时候导出全部数据，那么需要在grid里添加参数excel，属性allPages设置为true。
代码如下：
excel:{
allPages:true//是否导出所有页中的数据
},
3、导出文件名称
为导出的Grid自定义文件名称的方法如下：
excel: {
fileName: "xxx.xlsx"
},
在这里插入代码片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<title>Kendo UI Web</title>
<link href="css/kendo.common.min.css" rel="stylesheet" />
<link href="css/kendo.default.min.css" rel="stylesheet" />
<link href="css/kendo.default.mobile.min.css" rel="stylesheet"/>
<link href="css/kendo.common-material.min.css" rel="stylesheet" />
<link href="css/kendo.material.min.css" rel="stylesheet"/>
<link href="css/kendo.material.mobile.min.css" rel="stylesheet"/>
<script src="js/jquery.min.js"></script>
<script src="js/kendo.mobile.min.js"></script>
<script src="js/kendo.web.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="js/jszip.min.js"></script>
</head>
<body>
<div id="view">
<button data-bind="click: show">导出到Excel</button>
</div>
<div id="grid" data-toolbar="['create', 'save']"></div>
<script>
/* 本地数据源 */
var movies = [{
title: "Star Wars: A New Hope",
year: 1977
}, {
title: "Star Wars: The Empire Strikes Back",
year: 1980
}, {
title: "Star Wars: Return of the Jedi",
year: 1983
}, {
title: "Star Wars: Return of the Jedi",
year: 1983
}, {
title: "Star Wars: Return of the Jedi",
year: 1983
}, {
title: "Star Wars: Return of the Jedi",
year: 1983
}, {
title: "Star Wars: Return of the Jedi",
year: 1983
}, {
title: "Star Wars: Return of the Jedi",
year: 1983
}, {
title: "Star Wars: Return of the Jedi",
year: 19888
}];
/* 远程数据源 */
var localDataSource = new kendo.data.DataSource({
transport: {
read:{
url: "json/customers.json",
dataType: "json",
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/products/update",
dataType: "jsonp"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/products/create",
dataType: "jsonp"
},
}
});
console.log("=="+localDataSource);
$("#grid").kendoGrid({
//toolbar: ["excel"],
excel: {
fileName: "导出测试.xls",
proxyURL: "https://demos.telerik.com/kendo-ui/service/export",
filterable: true
},
dataSource: localDataSource,
resizable: true,
scrollable: true,
navigatable: false,
rownumber: true,
selectable: 'multiple,rowbox',
// groupable: true,
sortable: true,
pageable: {
pageSizes: [2, 10, 20, 50],
refresh: true,
pageSizes: true,
buttonCount: 5,
messages: {
display: "显示 {0}-{1} 共 {2} 项",
empty: "没有数据",
page: "页",
of: "/ {0}",
itemsPerPage: "条每页",
first: "第一页",
previous: "前一页",
next: "下一页",
last: "最后一页",
refresh: "刷新"
}
},
columns: [
{ /* template: "<div class='customer-name'> <input typr='text' value='#: Country#'></input> #: Country#</div>", */
field: "Country",
title: "First Name",
template: "<div class='customer-name'> <input type='text' value='#: Country#'></input> #: Country#</div>",
editor: function (container, options) {
var required = false;
$('<input/>')
.attr("name", options.field)
.attr("required", required)
.attr("pattern", '[A-Za-z]')
.appendTo(container)
.kendoMaskedTextBox({
change: function(){
boxNumberChange(1, 1);
}
});
}
},
{
field: "CompanyName",
title: "Last Name"
}
], editable: true /* 是否可编辑*/
}).data("kendoGrid");
</script>
<script>
var kk = kendo.observable({
show:function(){
var grid = $("#grid").data("kendoGrid");
grid.saveAsExcel();
},
});
kendo.bind($("#view"),kk);
</script>
</body>
</html>
<!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>