ExtJS 给GridToExcel.js 添加分组GridPanel导出功能

最新推荐文章于 2021-03-17 08:27:55 发布
最新推荐文章于 2021-03-17 08:27:55 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： ExtJS 3.3.1 分组Grid 导出Excel 文章标签： extjs alignment border function excel input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cx2vj/article/details/7786858
版权

原帖: 

ExtJs Grid导出到Excel(修正版)

http://extjs.org.cn/node/324

解决Ext Grid导出Excel在JSP等环境中文乱码问题（支持Windows和Aix）

http://hi.baidu.com/wangkai99/item/cb174511f84892071994ec6a

对里面的excel的xml格式也进行了一点修改, 以后主要需要改改样式, 参考的msdn

http://msdn.microsoft.com/en-us/library/office/aa140066(v=office.10).aspx


对于上传到服务器的那部分代码, 没有测试, 第2个帖子里讲了很多

我是直接chrome根据本地数据产生xls文件的, 


代码如下, 主要是添加了两段, 产生<ss:Cell>的代码, 各位有兴趣可以改良一下, 再加上对summaryType为max和min的部分

363行, 计算导出excel的总行数, 用到了上一篇帖子里扩展的获取分组后组数的方法 groupCount = this.store.getGroupCount(); 

后面产生<ss:Cell>的代码则是比较原始的比较

/**
 * allows for downloading of grid data (store) directly into excel
 * Method: extracts data of gridPanel store, uses columnModel to construct XML excel document,
 * converts to Base64, then loads everything into a data URL link.
 *
 * @author		Animal		<extjs support team>
 *
 */

/**
 * base64 encode / decode
 *
 * @location 	http://www.webtoolkit.info/
 *
 */

var Base64 = (function() {
    // Private property
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

    // Private method for UTF-8 encoding
    function utf8Encode(string) {
        string = string.replace(/\r\n/g,"\n");
        var utftext = "";
        for (var n = 0; n < string.length; n++) {
            var c = string.charCodeAt(n);
            if (c < 128) {
                utftext += String.fromCharCode(c);
            }
            else if((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            }
            else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }
        }
        return utftext;
    }

    // Public method for encoding
    return {
        encode : (typeof btoa == 'function') ? function(input) {
            return btoa(utf8Encode(input));
        } : function (input) {
            var output = "";
            var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
            var i = 0;
            input = utf8Encode(input);
            while (i < input.length) {
                chr1 = input.charCodeAt(i++);
                chr2 = input.charCodeAt(i++);
                chr3 = input.charCodeAt(i++);
                enc1 = chr1 >> 2;
                enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                enc4 = chr3 & 63;
                if (isNaN(chr2)) {
                    enc3 = enc4 = 64;
                } else if (isNaN(chr3)) {
                    enc4 = 64;
                }
                output = output +
                keyStr.charAt(enc1) + keyStr.charAt(enc2) +
                keyStr.charAt(enc3) + keyStr.charAt(enc4);
            }
            return output;
        }
    };
})();

Ext.override(Ext.grid.GridPanel, {
	exportExcel: function(includeHidden, specTitle, serverUrl){
		var vExportContent = this.getExcelXml(includeHidden, specTitle);
		console.log(vExportContent);
		if (Ext.isIE6 || Ext.isIE7 || Ext.isIE8 || Ext.isSafari || Ext.isSafari2 || Ext.isSafari3) {
			//创建一个表单提交
/*			if (!Ext.fly('frmDummy')) {
				var frm = document.createElement('form');
				frm.id = 'frmDummy';
				frm.name = id;
				frm.className = 'x-hidden';
				document.body.appendChild(frm);
			}
			Ext.Ajax.request({
				url : serverUrl,
				method : 'POST',
				form : Ext.fly('frmDummy'),
				callback : function(o, s, r) {
					// alert(r.responseText);
				},
				//上传数据
				isUpload : true,
				params : {
					exportContent : vExportContent
				}
			})*/
			
			var fd=Ext.get('frmDummy');  
            if (!fd) {  
                fd=Ext.DomHelper.append(Ext.getBody(),{tag:'form',method:'post',id:'frmDummy',action:exportExcelUrl, target:'_blank',name:'frmDummy',cls:'x-hidden',cn:[  
                    {tag:'input',name:'fileName',id:'fileName',type:'hidden'},  
                    {tag:'input',name:'exportContent',id:'exportContent',type:'hidden'}  
                ]},true);  
            }  
            fd.child('#fileName').set({value:specTitle + ".xls"});  
            fd.child('#exportContent').set({value:vExportContent});  
            fd.dom.submit();  
		} else {
			//怎么指定下载的文件名??
//			headers=Content-Disposition;attachment;filename="' + specTitle + '.xls";' +
			document.location = 'data:application/vnd.ms-excel;base64,' + Base64.encode(vExportContent);
		}
	}, 
	getExcelXml: function(includeHidden, specTitle) {
      var worksheet = this.createWorksheet(includeHidden, specTitle);
		var title;
		if (specTitle) {
			title = specTitle;
		} else {
			title = this.title;
		}
		var totalWidth = this.getColumnModel().getTotalWidth(includeHidden);
		return '<xml version="1.0" encoding="utf-8">' +
            '<ss:Workbook xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:o="urn:schemas-microsoft-com:office:office">' +
            '<o:DocumentProperties><o:Title>' + title + '</o:Title></o:DocumentProperties>' +
            '<ss:ExcelWorkbook>' +
            '<ss:WindowHeight>' + worksheet.height + '</ss:WindowHeight>' +
            '<ss:WindowWidth>' + worksheet.width + '</ss:WindowWidth>' +
            '<ss:ProtectStructure>False</ss:ProtectStructure>' +
            '<ss:ProtectWindows>False</ss:ProtectWindows>' +
            '</ss:ExcelWorkbook>' +
            '<ss:Styles>' +
	            //默认Style, 
	            '<ss:Style ss:ID="Default">' +
	            '<ss:Alignment ss:Vertical="Top" ss:WrapText="1" />' +
	            '<ss:Font ss:FontName="arial" ss:Size="10" />' +
	            '<ss:Borders>' +
	            '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Top" />' +
	            '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Bottom" />' +
	            '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Left" />' +
	            '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Right" />' +
	            '</ss:Borders>' +
	            '<ss:Interior />' +
	            '<ss:NumberFormat />' +
	            '<ss:Protection />' +
	            '</ss:Style>' +
	            
	            '<ss:Style ss:ID="title">' +
		            '<ss:Borders />' +
		            '<ss:Font />' +
		            '<ss:Alignment ss:WrapText="1" ss:Vertical="Center" ss:Horizontal="Center" />' +
		            '<ss:NumberFormat ss:Format="@" />' +
	            '</ss:Style>' +
	            
	            '<ss:Style ss:ID="headercell">' +
		            '<ss:Font ss:Bold="1" ss:Size="10" />' +
		            '<ss:Alignment ss:WrapText="1" ss:Horizontal="Center" />' +
	            //'<ss:Interior ss:Pattern="Solid" ss:Color="#A3C9F1" />' +
	            '</ss:Style>' +
	            
	            '<ss:Style ss:ID="even">' +		
	//            '<ss:Interior ss:Pattern="Solid" ss:Color="#CCFFFF" />' +
	            '</ss:Style>' +
	//            ss:Parent="even" 
	            '<ss:Style ss:ID="evendate">' +
	            	'<ss:NumberFormat ss:Format="yyyy-mm-dd" />' +
	            '</ss:Style>' +
	//            ss:Parent="even" 
	            '<ss:Style ss:ID="evenint">' +
		            '<ss:Alignment ss:Horizontal="Right" />' + 
		            '<ss:NumberFormat ss:Format="0" />' +
	            '</ss:Style>' +
	//            ss:Parent="even" 
	            '<ss:Style ss:ID="evenfloat">' +
		            '<ss:Alignment ss:Horizontal="Right" />' + 
		            '<ss:NumberFormat ss:Format="0.00" />' +
	            '</ss:Style>' +
	            
	            '<ss:Style ss:ID="int">' +
		            '<ss:Alignment ss:Horizontal="Right" />' + 
		            '<ss:NumberFormat ss:Format="0" />' +
	            '</ss:Style>' +
	            
	            '<ss:Style ss:ID="float">' +
		            '<ss:Alignment ss:Horizontal="Right" />' + 
		            '<ss:NumberFormat ss:Format="0.00" />' +
	            '</ss:Style>' +
	            
	            '<ss:Style ss:ID="odd">' +
	//            '<ss:Interior ss:Pattern="Solid" ss:Color="#CCCCFF"/>' +
	            '</ss:Style>' +
	//            ss:Parent="odd" 
	            '<ss:Style ss:ID="odddate">' +
	           		'<ss:NumberFormat ss:Format="yyyy-mm-dd" />' +
	            '</ss:Style>' +
	//            ss:Parent="odd" 
	            '<ss:Style ss:ID="oddint">' +
		            '<ss:Alignment ss:Horizontal="Right" />' + 
		            '<ss:NumberFormat ss:Format="0" />' +
	            '</ss:Style>' +
	//            ss:Parent="odd" 
	            '<ss:Style ss:ID="oddfloat">' +
		            '<ss:Alignment ss:Horizontal="Right" />' + 
		            '<ss:NumberFormat ss:Format="0.00" />' +
	            '</ss:Style>' +
	            
	           	'<ss:Style ss:ID="summary">' +		
	            '</ss:Style>' +
	            
	            '<ss:Style ss:ID="summarydate">' +
	            	'<ss:NumberFormat ss:Format="yyyy-mm-dd" />' +
	            '</ss:Style>' +
	            
	            '<ss:Style ss:ID="summaryint">' +
		            '<ss:Alignment ss:Horizontal="Right" />' + 
		            '<ss:NumberFormat ss:Format="0" />' +
	            '</ss:Style>' +
           
	            '<ss:Style ss:ID="summaryfloat">' +
		            '<ss:Alignment ss:Horizontal="Right" />' + 
		            '<ss:NumberFormat ss:Format="0.00" />' +
	            '</ss:Style>' +
	            
            	/*'<ss:Style ss:ID="Default">' +
	            '<ss:Alignment ss:Vertical="Top" ss:WrapText="1" />' +
	            '<ss:Font ss:FontName="arial" ss:Size="10" />' +
	            '<ss:Borders>' +
	            '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Top" />' +
	            '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Bottom" />' +
	            '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Left" />' +
	            '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Right" />' +
	            '</ss:Borders>' +
	            '<ss:Interior />' +
	            '<ss:NumberFormat />' +
	            '<ss:Protection />' +
	            '</ss:Style>' +
	            '<ss:Style ss:ID="title">' +
	            '<ss:Borders />' +
	            '<ss:Font />' +
	            '<ss:Alignment ss:WrapText="1" ss:Vertical="Center" ss:Horizontal="Center" />' +
	            '<ss:NumberFormat ss:Format="@" />' +
	            '</ss:Style>' +
	            '<ss:Style ss:ID="headercell">' +
	            '<ss:Font ss:Bold="1" ss:Size="10" />' +
	            '<ss:Alignment ss:WrapText="1" ss:Horizontal="Center" />' +
	            '<ss:Interior ss:Pattern="Solid" ss:Color="#A3C9F1" />' +
	            '</ss:Style>' +
	            '<ss:Style ss:ID="even">' +
	            '<ss:Interior ss:Pattern="Solid" ss:Color="#CCFFFF" />' +
	            '</ss:Style>' +
	            '<ss:Style ss:Parent="even" ss:ID="evendate">' +
	            '<ss:NumberFormat ss:Format="yyyy-mm-dd" />' +
	            '</ss:Style>' +
	            '<ss:Style ss:Parent="even" ss:ID="evenint">' +
	            '<ss:NumberFormat ss:Format="0" />' +
	            '</ss:Style>' +
	            '<ss:Style ss:Parent="even" ss:ID="evenfloat">' +
	            '<ss:NumberFormat ss:Format="0.00" />' +
	            '</ss:Style>' +
	            '<ss:Style ss:ID="odd">' +
	            '<ss:Interior ss:Pattern="Solid" ss:Color="#CCCCFF" />' +
	            '</ss:Style>' +
	            '<ss:Style ss:Parent="odd" ss:ID="odddate">' +
	            '<ss:NumberFormat ss:Format="yyyy-mm-dd" />' +
	            '</ss:Style>' +
	            '<ss:Style ss:Parent="odd" ss:ID="oddint">' +
	            '<ss:Alignment ss:Horizontal="Right" />' + 
	            '<ss:NumberFormat ss:Format="0" />' +
	            '</ss:Style>' +
	            '<ss:Style ss:Parent="odd" ss:ID="oddfloat">' +
	            '<ss:Alignment ss:Horizontal="Right" />' + 
	            '<ss:NumberFormat ss:Format="0.00" />' +
	            '</ss:Style>' +*/
            
            '</ss:Styles>' +
            worksheet.xml +
            '</ss:Workbook>';
    },

	createWorksheet: function(includeHidden, specTitle) {
		var title;
    	if (specTitle) {
			title = specTitle;
		} else {
			title = this.title;
		}
		
      // Calculate cell data types and extra class names which affect
		// formatting
        var cellType = [];
        var cellTypeClass = [];
        var cm = this.getColumnModel();
        var totalWidthInPixels = 0;
        var colXml = '';
        var headerXml = '';
        var visibleColumnCountReduction = 0;
        var colCount = cm.getColumnCount();
        for (var i = 0; i < colCount; i++) {
        	//cellType和cellTypeClass有可能小于colCount
            if ((cm.getDataIndex(i) != '') && (includeHidden || !cm.isHidden(i))) {
                var w = cm.getColumnWidth(i)		//宽度就是像素?
                totalWidthInPixels += w;
                if (cm.getColumnHeader(i) === ""){
                	cellType.push("None");
                	cellTypeClass.push("");
                	++visibleColumnCountReduction;
                }
                else
                {
                    colXml += '<ss:Column ss:AutoFitWidth="1" ss:Width="' + w + '" />';
                    headerXml += '<ss:Cell ss:StyleID="headercell">' +
                        '<ss:Data ss:Type="String">' + cm.getColumnHeader(i) + '</ss:Data>' +
                        '<ss:NamedCell ss:Name="Print_Titles" /></ss:Cell>';
                    //取的Store的Record的Field的Type, 而不是ColumnModel里Column定义的类型
                    var fld = this.store.recordType.prototype.fields.get(cm.getDataIndex(i));
                    //断点查看fld.type是Object, 再一次才是字符串类型的type值
                    switch(fld.type.type) {
                        case "int":
                            cellType.push("Number");
                            cellTypeClass.push("int");
                            break;
                        case "float":
                            cellType.push("Number");
                            cellTypeClass.push("float");
                            break;
                        case "bool":
                        case "boolean":
                            cellType.push("String");
                            cellTypeClass.push("");
                            break;
                        case "date":
                            cellType.push("DateTime");
                            cellTypeClass.push("date");
                            break;
                        default:
                            cellType.push("String");
                            cellTypeClass.push("");
                            break;
                    }
                }
            }
        }
        //这应该是invisibleColumnCount
        var visibleColumnCount = cellType.length - visibleColumnCountReduction;

        var result = {
            height: 9000,
            width: Math.floor(totalWidthInPixels * 30) + 50
        };
        
        // GroupingView?
      var groupField;
      var groupFieldValue = "";
      var groupIdArray = new Array();
      var groupId = "";
      var groupRowIndex = new Array();
      var groupCount = 0;
		if (this.getView().constructor == Ext.grid.GroupingView) {
			groupField = this.store.groupField;
			groupCount = this.store.getGroupCount();
		}

        // Generate worksheet header details.
        // 如果觉得用title命名Sheet不好, 就用Sheet1吧
        var t = '<ss:Worksheet ss:Name="' + title + '">' +
            '<ss:Names>' +
            '<ss:NamedRange ss:Name="Print_Titles" ss:RefersTo="=\'' + title + '\'!R1:R2" />' +
            '</ss:Names>' +
            '<ss:Table x:FullRows="1" x:FullColumns="1"' +
            ' ss:ExpandedColumnCount="' + (visibleColumnCount + 2) +
            //如果分组 这里还要加上分组的行数 不分组的话是store的行数+title和header
            '" ss:ExpandedRowCount="' + (this.store.getCount() + 2 + groupCount) + '">' +
            colXml +
            '<ss:Row ss:Height="38">' +
            '<ss:Cell ss:StyleID="title" ss:MergeAcross="' + (visibleColumnCount - 1) + '">' +
            '<ss:Data xmlns:html="http://www.w3.org/TR/REC-html40" ss:Type="String">' +
            '<html:B>' + title + '</html:B></ss:Data><ss:NamedCell ss:Name="Print_Titles" />' +
            '</ss:Cell>' +
            '</ss:Row>' +
            '<ss:Row ss:AutoFitHeight="1">' +
            headerXml +
            '</ss:Row>';

      // Generate the data rows from the data in the Store
		
      for (var i = 0, it = this.store.data.items, l = it.length; i < l; i++) {
			r = it[i].data;
			
			if (groupField) {
				groupFieldValue = r[groupField];
				var currentGroupId = this.getView().getGroupId(groupFieldValue);
				if(currentGroupId != groupId){
					groupIdArray.push(currentGroupId);
					groupRowIndex[currentGroupId] = i;	//记录前一组的起始行索引
					if(groupIdArray.length > 1){
						t += '<ss:Row>';
						//此时groupId是需要添加Summary信息的行
						for (var j = 0, k = 0; j < colCount; j++) {
							if ((cm.getDataIndex(j) != '') && (includeHidden || !cm.isHidden(j))) {
								var column = cm.getColumnById(cm.getColumnId(j));
								var v = "";
								if(column.summaryType == "sum"){
									v = this.getStore().sum(cm.getDataIndex(j), groupRowIndex[groupId], groupRowIndex[currentGroupId] - 1);
								}else if(column.summaryType == "avg"){
									v = this.getStore().sum(cm.getDataIndex(j), groupRowIndex[groupId], groupRowIndex[currentGroupId] - 1) / (groupRowIndex[currentGroupId] - groupRowIndex[groupId]);
								}
								if (cellType[k] !== "None") {
									t += '<ss:Cell ss:StyleID="' + "summary" + cellTypeClass[k] + '"><ss:Data ss:Type="' + cellType[k] + '">';
									if (cellType[k] == 'DateTime') {
										t += v.format('Y-m-d');
									} else {
										t += v;
									}
									t += '</ss:Data></ss:Cell>';
								}
								k++;
							}
						}
						t += '</ss:Row>';
					}
					groupId = currentGroupId;
				}
			}
			
			t += '<ss:Row>';
			// cellClass决定了数据行的样式
			var cellClass = (i & 1) ? 'odd' : 'even';
			
			for (var j = 0, k = 0; j < colCount; j++) {
				if ((cm.getDataIndex(j) != '') && (includeHidden || !cm.isHidden(j))) {
					var v = r[cm.getDataIndex(j)];
					if (cellType[k] !== "None") {
						// 背景色在定义StyleID里修改掉就是了
						t += '<ss:Cell ss:StyleID="' + cellClass + cellTypeClass[k] + '"><ss:Data ss:Type="' + cellType[k] + '">';
						if (cellType[k] == 'DateTime') {
							t += v.format('Y-m-d');
						} else {
							t += v;
						}
						t += '</ss:Data></ss:Cell>';
					}
					k++;
				}
			}
			t += '</ss:Row>';
			
			groupFieldValue = r[groupField];
			groupId = this.getView().getGroupId(groupFieldValue);
		}
		
		if(groupField){
			t += '<ss:Row>';
			for (var j = 0, k = 0; j < colCount; j++) {
				if ((cm.getDataIndex(j) != '') && (includeHidden || !cm.isHidden(j))) {
					var column = cm.getColumnById(cm.getColumnId(j));
					var v = "";
					if(column.summaryType == "sum"){
						v = this.getStore().sum(cm.getDataIndex(j), 0, this.getStore().getCount() - 1);
					}else if(column.summaryType == "avg"){
						v = this.getStore().sum(cm.getDataIndex(j), 0, this.getStore().getCount() - 1) / (this.getStore().getCount());
					}
					if (cellType[k] !== "None") {
						t += '<ss:Cell ss:StyleID="' + "summary" + cellTypeClass[k] + '"><ss:Data ss:Type="' + cellType[k] + '">';
						if (cellType[k] == 'DateTime') {
							t += v.format('Y-m-d');
						} else {
							t += v;
						}
						t += '</ss:Data></ss:Cell>';
					}
					k++;
				}
			}
			t += '</ss:Row>';
		}

        result.xml = t + '</ss:Table>' +
            '<x:WorksheetOptions>' +
            '<x:PageSetup>' +
            '<x:Layout x:CenterHorizontal="1" x:Orientation="Landscape" />' +
            '<x:Footer x:Data="Page &P of &N" x:Margin="0.5" />' +
            '<x:PageMargins x:Top="0.5" x:Right="0.5" x:Left="0.5" x:Bottom="0.8" />' +
            '</x:PageSetup>' +
            '<x:FitToPage />' +
            '<x:Print>' +
            '<x:PrintErrors>Blank</x:PrintErrors>' +
            '<x:FitWidth>1</x:FitWidth>' +
            '<x:FitHeight>32767</x:FitHeight>' +
            '<x:ValidPrinterInfo />' +
            '<x:VerticalResolution>600</x:VerticalResolution>' +
            '</x:Print>' +
            '<x:Selected />' +
            '<x:DoNotDisplayGridlines />' +
            '<x:ProtectObjects>False</x:ProtectObjects>' +
            '<x:ProtectScenarios>False</x:ProtectScenarios>' +
            '</x:WorksheetOptions>' +
            '</ss:Worksheet>';
        return result;
    }
});


cx2vj
关注
专栏目录
ExtJS4 动态生成的grid导出为excel示例
10-26
在ExtJS4中，动态生成的grid导出为Excel是一个常见的需求，这通常涉及到使用一些扩展库来实现。本文将详细介绍如何解决这个问题，包括解决表格重复下载的BUG和初始化时遇到的问题。 首先，我们需要理解ExtJS4的grid...
js导出表格为Excel文件,合并表头
hongyeniu的博客
05-11 2237
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
Ext grid 导出excel
woshi_bobo2010
04-07 2217
<br /> <br />利用Ext grid显示前台数据，然后把前台数据进行Excel表导出，再导出报表的时候要求：<br />1、要把grid数据显示的表头信息导入Excel表<br />2、在导出Excle表的时候，可以进行选择，是进行勾选的导出，还是批量导出（勾选导出，根据勾选的记录导出，批量导出，全部导出），<br />3、在进行批量导出的时候，是分页显示还是显示成一页（sheet标签，在Excel表中用）<br /> <br />首先,准备数据，创建grid并把数据填充进去，这里我就不再多说，不
使用Extjs完成对GridPanel的导出操作完整步骤
JecksonChenJinHua的专栏
09-29 3302
1.首先建一个名为test.js文件，局部重要的代码：  var grid = new Ext.grid.GridPanel({     store:store,     mode:'remote',     title:'用户管理',     applyTo:'gr
Extjs将GridPanel中的数据导出到Excel的方法
iteye_8029的博客
05-20 153
前些时间老大说客户要求提供将表格中的数据导出到Excel中，因为有时候他们需要将价格资料导出以便制作报价表，于是上网找了一些资料，发现网上其实有很多例子都有浏览器兼容性的问题，于是自己整合，改进之后，终于能兼容支持和浏览器了，遂在这里与大家分享、交流： 首先你需要一个将GridPanel的数据转换成标准Excel格式的JS文件，文件内容如下（貌似CSDN博客不支持上传文件给大家下载，所以唯有直接...
Ext4原生grid的导出控件
hanqing
12-18 2099
前言 ：导出建议在后端进行,避免一些兼容性问题。 本文借鉴网络上的一个js包,在此基础上稍微完善了些，并添加了即将扩展和完善的东西，今后会逐步完善它。 使用样例: <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"
ExtJS_grid.rar_Grid javascript_extjs grid
最新发布
09-23
ExtJS Grid是一款强大的JavaScript组件，用于在Web应用中创建数据密集型的表格视图。它由Sencha公司开发，是Ext JS库的核心部分，广泛应用于企业级应用的前端开发，提供丰富的功能和高度的可定制性。这个"ExtJS_grid...
ExtJS的GridPanel导出excel文件
08-19
ExtJS的GridPanel导出excel文件,方便快捷易懂!
ExtJs grid导出Excel
08-05
当需要将Grid中的数据导出到Excel时，可以采用两种方法，这些方法在ExtJs 4.2版本中已经得到很好的支持。 **方法一：使用XLSX.js库** XLSX.js是一个JavaScript库，能够方便地读取和写入Excel文件。在ExtJs中，你...
ExtJs6 导出excel（包含分组、分组合计行、二重表头）
06-29
找了好久找不到自己需要的，就自己改了改官方提供的js，所以只有二重表头，导完后调用example里的方法就行
类似Excel的GRID
03-30
类似Excel的GRID类似Excel的GRID类似Excel的GRID类似Excel的GRID
Extjs4 grid 导出为Excel
07-30
Extjs4 grid 导出为Excel 下载后放在网站(不放在网站中导出按钮不能会点击无响应,因为这里调用了swf文件)里可直接运行index.html测试 <link href='http://dev.sencha.com/deploy/ext-4.0.7-gpl/docs/resources/css/app.css' rel='stylesheet' type='text/css' /> [removed][removed] 在这里Ext的包是调用的网上的,可能打开时有点慢,可改为本地包!! download.png 文件为导出按钮,可更改为自己喜欢的图片
extjs3把数据导出至excel
12-13
extjs中把数据导出excel，是一个不错的学习代码资源
extjs gridToExcel
10-24
这是一个简单的在extjs下的grid转化到Excel，里面代码简单易懂，在包里面还集成了复杂的js转化函数，不过本人没有用它来进行转化！ 注：在用EXTJS的导出Excel技术中，一定要注意分页的问题
ExtJs6.0导出gridPanel数据到本地excel中
NingZuoZuoZuoZuo的博客
05-07 964
//本人根据实际情况改写的，引用的时候还请注意/** * * function grid2Excel(grid,filename) * @param grid Extjs grid panel * @param filename Excel 文件名称 * * **/ (function(){          function export_excel_ie(tableStr, fileName)...
php gridtoexcel,ExtJs Grid导出到Excel(修正版)
weixin_39609622的博客
03-17 100
以下的几个问题我都已经整理和修改：1、没有考虑到含有序号和选择框的grid，2、utf8转换bug.3、宽度的bug4、不支持ie6、ie7和Safari修改后的代码见附件的gridToExcel.js.zip注：我的文件编码都是utf8格式的(no bom)，需要其它格式的请自行修改。使用方法更简单，不需要定义linkbutton，直接使用标准的buttonnew Ext.Button({tex...
【翻译】将Ext JS Grid转换为Excel表格
weixin_33892359的博客
05-25 174
原文：Converting an Ext 5 Grid to Excel Spreadsheet 稍微迟来的礼物——Ext JS Grid转为Excel代码，现在支持Ext JS 5！ 功能包括： - 支持分组 - 数字的处理 VS 字符串数据类型 - 对于不支持客户端下载的浏览器会提交回服务器 Enjoy！ /* Excel.js - conver...
js 数据分组(单个分组依据或多个分组依据)
LonewoIf的博客
08-07 3083
方法一： /** * @description 数据分组 * @author CaoZM20132014 * @date 2019-07-19 * @export * @param { array } array 需要进行分组的数据 * @param { string } key 进行分组时依据的键名 * @param { string } resKey 分组后数据的键名，默认为 l...
ExtJS导出Grid数据到Excel
在EXTJS中，"ext导出grid"是指将EXTJS的Grid组件中的数据导出到Excel文件中的功能。这个功能通常用于用户需要将可视化的数据表格保存为Excel格式，以便进行进一步的数据分析或分享。下面我们将详细讲解如何实现这一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值