Kendo UI ：Excel导出

其他 2021-03-03 23:30:48 阅读次数: 0

【官网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>

猜你喜欢

转载自blog.csdn.net/baiduwenku112/article/details/110009179
今日推荐
周排行
浏览器的兼容问题[转]
WBS工作分解结构的说明与分解细则
写 链表 注意事项
nginx 配置转发
python环境变量、python当前工作目录。：：：：：：：：概念详解：：：：：：：：：
ubuntu mysql手动安装及简明配置
2018-11-14 MIDI音乐格式笔记学习
Hadoop HDFS 集群安全模式
2017-2018-2偏微分方程复习题解析7
息县装修“化妆台的选择”
每日归档
更多
2025-01-29(0)
2025-01-28(0)
2025-01-27(0)
2025-01-26(0)
2025-01-25(0)
2025-01-24(0)
2025-01-23(0)
2025-01-22(0)
2025-01-21(0)
2025-01-20(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022