kendo ui Excel导出

最新推荐文章于 2025-06-24 09:12:16 发布

奔跑的猪皮

最新推荐文章于 2025-06-24 09:12:16 发布

阅读量854

点赞数

CC 4.0 BY-SA版权

分类专栏：杂项

本文链接：https://blog.youkuaiyun.com/qq_30985067/article/details/88638171

杂项专栏收录该内容

13 篇文章

订阅专栏

博客提供了一个简书的参考链接https://www.jianshu.com/p/fbcaa51d9c0c ，但未明确链接具体内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入代码片
<!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>

https://www.jianshu.com/p/fbcaa51d9c0c别的参考