`
170728576
  • 浏览: 8147 次
社区版块
存档分类
最新评论

Ext4 实现grid多表头数据导出Excel

阅读更多

版本Ext 4.1

实现单行表头、多行表头、Store分组, 通用grid 数据导出功能。

 

 

上图:

 

导出grid列表显示数据,避免直接从数据库导出,标识符需要填写转换方法。如:

return v=='Y'?'是':'';

导出生成Excel

 

 

上代码:

 

	Ext.qy.ExtractionGridDate = function(){
		/** 列表头  text,align */
		var theadObj = {},
			theadArray = [],
			tabName,
			dataRows = [],
			form,
			_eachColumns function(cs,n){
				var num = 0 ;
				for(var j=0,l=cs.length;j<l;j++){
					num  += _col_z(cs[j],n);
					if((n+1)>theadObj.depth){
						theadObj.depth = n+1;
					}
				}
				return num;
			},
			_col_z = function(cols,n){
				var return_num = 0,
					child_cols = cols.columns,
					hidden_ = cols.hidden||false,
					child_len = child_cols?child_cols.length:0,
					align_ = cols.align||'left';
				if(child_cols){
					child_len = _eachColumns(child_cols,n+1);
					return_num = child_len;
				}else{
					if(!hidden_){
						return_num += 1;
					}
					theadArray.push({
						hidden:hidden_,
						align:align_
					});
				}
				theadObj["row"+n].push({
					text:cols.header||cols.text||'',
					align:align_,
					hidden:hidden_,
					child_len:child_len
				});
				return return_num;
			},
			_subForm = function (arrs, url){//提交
				var i,
					l,
					rowStyle=[],
					rows = [];
				for(i=0,l=theadArray.length;i<l;i++){
					if(!theadArray[i].hidden){
						rowStyle.push(theadArray[i].align);
					};
				};
				for(i=0,l=arrs.length;i<l;i++){
					var arr = arrs[i],
						row = [];
					for(var j=0,k = arr.length;j<k;j++){
						if(!theadArray[j].hidden){
							row.push(arr[j]);
						};
					};
					rows.push(row.join('<&$&>'))
				};
				l = '<#$#>';
				var inputs = [
				{name: 'filename', value: tabName},
				{name: 'depth', value: theadObj.depth},
				{name: 'headerStr', value: function(){
					var result = '';
					var je = '<*>',jg='!*!',jk='&$&';
					for(i=0;i<theadObj.depth;i++){
						for(var j=0,l = theadObj["row"+i].length;j<l;j++){
							var o = theadObj["row"+i][j];
							result += o.text +je+ o.align +je+ o.hidden +je+ o.child_len +je +jg;
						}
						result += jk;
					}
					return result;
				}()},
				{name: 'styleStr', value: rowStyle.join(l)},
				{name: 'rowsStr', value: rows.join(l)}
				];
				if(!form){
					form = document.createElement("form");
					form.method = 'post';
					form.target="_blank"
					document.body.appendChild(form);form.style.display="none";
				};
				form.action = url;
				while(form.firstChild){ //判断是否有子节点
					 form.removeChild(form.firstChild);
				};
				for(i=0,l=inputs.length;i<l;i++){
					var input = document.createElement("input");
					input.value = inputs[i].value;
					input.name = inputs[i].name;
					form.appendChild(input);
				};
				Ext.qy.unmask();
				form.submit();
			};
		return function(gridpanel, url){
			Ext.qy.mask("加载数据……");
			tabName = gridpanel.title||'';
			dataRows.splice(0,dataRows.length);
			theadArray.splice(0,theadArray.length);
			theadObj = {//表头最多5层
				row0:[],
				row1:[],
				row2:[],
				row3:[],
				row4:[],
				depth:1//判断深度
				};
			var columns = gridpanel.columns,
				i;
			for(i=0,l=columns.length;i<l;i++){
				var cols = columns[i].initialConfig;
				_col_z(cols,0);
			}
			var html = gridpanel.getView().getEl().getHTML();
			var rows = html.replace(/<([a-zA-Z1-6]+)(\s*[^>]*)?>/gi, '<$1>')
				.replace(/<\/?div.*?>|<\/?a.*?>|<\/?span.*?>/gi, '')
				.replace(/\s+/g, '')
				.replace(/<th><\/th>/gi, '')
				.replace(/<table><tbody><tr><\/tr><tr><td>/gi, '')
				.replace(/<\/td><\/tr><\/tbody><\/table>/gi, '')
				.split(/<\/td><\/tr><tr.*?><td.*?>/i);
			for(i=0,l=rows.length;i<l;i++){
				var row = rows[i].split(/<\/td><td.*?>/i)
				dataRows.push(row);
			}
			return _subForm(dataRows, url);
		};
	}();

 按钮调用:

 

 

{
	xtype: 'button',
	icon : 'images/tool_xls.gif',
	tooltip: {
		text : '导出Excel文件'
	},
	handler: function(btn){
		Ext.qy.ExtractionGridDate(btn.up('gridpanel'), "file/download/Excel.html");
	}
}

java 实现使用springmvc

 

 

	@RequestMapping("/file/download/{view}.html")
	public String view(
			@PathVariable("view") String view,
			@RequestParam(value = "filename",required=false)String filename,//文件名||标题
			@RequestParam(value = "depth",required=false)int depth,//列表头 深度
			@RequestParam(value = "headerStr",required=false)String headerStr,//列表头
			@RequestParam(value = "styleStr",required=false)String styleStr,//表格algin
			@RequestParam(value = "rowsStr",required=false)String rowsStr,//数据
			Model model
			){
		if(filename==null&&headerStr==null&&rowsStr==null){
			return null;
		}
		
		model.addAttribute("filename", filename);
		
		String regex = "\\<\\#\\$\\#\\>";//行分割符<#$#>
		
		headerStr = headerStr.replace("&nbsp;", " ");
		rowsStr = rowsStr.replace("&nbsp;", " ");
		
		model.addAttribute("headerStr", headerStr);
		model.addAttribute("depth", depth);
		
		List<String[]> rowsList = new ArrayList<String[]>();
		String[] rows = rowsStr.split(regex);
		for (int i = 0; i < rows.length; i++) {
			String[] row = rows[i].split("\\<\\&\\$\\&\\>");//列分割符<&$&>
			rowsList.add(row);
		}
		model.addAttribute("rowsList", rowsList);
		model.addAttribute("styleArray", styleStr.split(regex));
		
		return view+"View";
	}

 ExcelView 代码

 

 

public class ExcelView extends AbstractExcelView{

	@SuppressWarnings({ "unchecked", "deprecation" })
	@Override
	protected void buildExcelDocument(
			Map<String, Object> model,
			HSSFWorkbook workbook,
			HttpServletRequest request,
			HttpServletResponse response)
			throws Exception {
		
		String filename = "----";
		if(model.get("filename")!=null && !"".equals(model.get("filename"))){
			filename = (String) model.get("filename");
		}
		int depth = (Integer) model.get("depth");
		String headerStr =  (String) model.get("headerStr");
		String[] styleArray =  (String[]) model.get("styleArray");
		List<String[]> rowsList =  (List<String[]>) model.get("rowsList");
		
		int len = styleArray.length;
		HSSFSheet sheet = workbook.createSheet(filename);
		
		response.setHeader("Content-Disposition",
				"inline;filename="+new String((filename+"-"+DateUtil.getCalendarStr()+".xls").getBytes(),"iso8859-1"));
		HSSFCellStyle style = workbook.createCellStyle(); // 样式对象   
        style.setVerticalAlignment(HSSFCellStyle.VERTICAL_CENTER);// 垂直   
        style.setAlignment(HSSFCellStyle.ALIGN_CENTER);// 水平  
        HSSFCellStyle styleLeft = workbook.createCellStyle();
        styleLeft.setAlignment(HSSFCellStyle.ALIGN_LEFT);
        styleLeft.setVerticalAlignment(HSSFCellStyle.VERTICAL_CENTER);// 垂直   
        
        HSSFCellStyle styleCenter = workbook.createCellStyle();
        styleCenter.setAlignment(HSSFCellStyle.ALIGN_CENTER);
        styleCenter.setVerticalAlignment(HSSFCellStyle.VERTICAL_CENTER);// 垂直   
        
        HSSFCellStyle styleRight = workbook.createCellStyle();
        styleRight.setAlignment(HSSFCellStyle.ALIGN_RIGHT);
        styleRight.setVerticalAlignment(HSSFCellStyle.VERTICAL_CENTER);// 垂直   
        
        int rowNum = 0;
        sheet.addMergedRegion(new Region(0,(short)0,1,(short)(len-1)));// 四个参数分别是:起始行,起始列,结束行,结束列   
		HSSFCell titleCell = sheet.createRow(rowNum).createCell((short) 0);
		titleCell.setCellStyle(styleCenter);
		titleCell.setCellType(HSSFCell.CELL_TYPE_STRING);
		titleCell.setCellValue(filename);
		
		String[] rows = headerStr.split("\\&\\$\\&");
		rowNum = 1;
		
		Map<String, Integer> map = new HashMap<String, Integer>();
		for (int i = 0; i < depth; i++) {
			map.put("row"+i, rowNum+1);
			map.put("col"+i, 0);
		}
		//生成多行表头
		for (int i = 0,l = rows.length;i<l;i++) {
			String row = rows[i];
			rowNum ++;
			HSSFRow header = sheet.createRow(rowNum);
			String[] rs = row.split("\\!\\*\\!");
			for (String strs : rs) {
				String[] o = strs.split("\\<\\*\\>");
				if(!"true".equals(o[2])){
					int child_len = Integer.parseInt(o[3]);
					if(child_len>0){
						sheet.addMergedRegion(new Region(rowNum,(short)(int)map.get("col"+i),rowNum,(short)(int)(map.get("col"+i)+(child_len-1))));// 四个参数分别是:起始行,起始列,结束行,结束列   
						this.makeCell(header, (int) map.get("col"+i), o[1], o[0], styleLeft, styleCenter, styleRight);
						map.put("col"+i, map.get("col"+i)+child_len);
					}else{
						if(i<depth){
							int a = depth-i;
							sheet.addMergedRegion(new Region(rowNum,(short)(int)map.get("col"+i),rowNum+(a-1),(short)(int)map.get("col"+i)));// 四个参数分别是:起始行,起始列,结束行,结束列   
							this.makeCell(header, (int) map.get("col"+i), o[1], o[0], styleLeft, styleCenter, styleRight);
							for (int j = 0; j < a; j++) {
								map.put("col"+(i+j), map.get("col"+(i+j))+1);
							}
						}
					}
				}
			}
		}
		rowNum++;
		for(String[] rowArr : rowsList){
			HSSFRow row = sheet.createRow(rowNum++);
			for (int i = 0; i < rowArr.length; i++) {
				this.makeCell(row, i, styleArray[i], rowArr[i], styleLeft, styleCenter, styleRight);
			}
		}
	}

	private HSSFCellStyle retrunStyle(String alignStr,HSSFCellStyle styleLeft,HSSFCellStyle styleCenter,HSSFCellStyle styleRight){
		if("center".equalsIgnoreCase(alignStr)){
			return styleCenter;
		}else if("right".equalsIgnoreCase(alignStr)){
			return styleRight;
		}else{
			return styleLeft;
		}
	}
	
	
	@SuppressWarnings("deprecation")
	private void makeCell(HSSFRow row, int column ,String alignStr, String value,HSSFCellStyle styleLeft,HSSFCellStyle styleCenter,HSSFCellStyle styleRight){
		HSSFCell cell = row.createCell((short) column);
		cell.setCellType(HSSFCell.CELL_TYPE_STRING);
		cell.setCellStyle(retrunStyle(alignStr, styleLeft, styleCenter, styleRight));
		cell.setCellValue(value);
	}

 http://170728576.iteye.com/blog/1980236

 

 

  • 描述: 1
  • 大小: 86.3 KB
  • 描述: 1
  • 大小: 131.5 KB
分享到:
评论

相关推荐

    ext gridpanel多层表头分组小计导出excel与Java后台交互全代码

    该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。

    Extjs4前台前台grid导出excel

    在本篇文章中,我们将深入探讨如何在ExtJS4中实现前台Grid的数据导出到Excel功能。 首先,我们需要了解`Ext.grid.Panel`,这是ExtJS中的核心组件之一,用于创建数据网格。它能够动态加载数据,提供排序、过滤、分页...

    ExtJs6 导出excel(包含分组、分组合计行、二重表头)

    总之,ExtJS6的导出Excel功能结合了分组、分组合计行和二重表头,使得数据网格的数据导出更加灵活且信息丰富。通过自定义和扩展,开发者可以创建满足特定业务场景的导出解决方案。而这个过程往往需要对ExtJS的API有...

    ext grid导出相关资料信息

    我博文《Ext4原生grid的导出控件》一文用到的js包以及其他方面的资料。

    Ext JS Excel前台导出

    而利用Ext JS进行前端开发时,实现将Grid中的数据导出为Excel文件是一个实用且重要的功能。本文将详细解析如何在Ext JS中实现这一功能。 #### 二、Ext JS简介 Ext JS 是一款基于 JavaScript 的前端框架,它提供了...

    ExtJS4.0 分享Grid导出Excel插件(3.28更新支持4.1)

    在描述中提到的“复合表头版extexcel.zip”,意味着这个插件不仅提供基本的Excel导出功能,还支持具有复合表头的Grid数据导出,这对于需要处理分层次、多维度数据的用户非常实用。 博客链接...

    Ext4 grid打印

    通过以上技术点的实现,Ext4 Grid打印功能可以帮助用户更高效地管理和输出数据,提高工作效率,特别是在数据分析和报告生成的场景中。同时,对开发者来说,理解和掌握这些知识点,可以提升他们在Web应用开发中的专业...

    ext导出grid

    本文将围绕“ext导出grid”这一主题进行深入探讨,通过解析给定的代码片段来详细讲解如何利用ExtJS框架实现Grid数据的Excel导出功能。 #### 二、ExtJS Grid组件简介 ExtJS 是一个基于JavaScript的企业级Web应用...

    ext 双层表格 grid(附带图片)

    EXT JS的Grid组件是实现这一功能的主要组件,它允许开发者以清晰、交互的方式展示复杂的数据结构。以下是对EXT JS双层表格(grid)的知识点详细解析: 1. **EXT JS Grid组件**: EXT JS Grid组件是一个高度可配置...

    ext ToExcel

    "EXT ToExcel" 是一个功能,它允许EXT(一种基于JavaScript的富客户端UI框架)的表格数据被转换并导出为Microsoft Excel文档。这个过程完全在客户端执行,无需服务器端的支持,大大简化了数据导出的流程。EXT库提供...

    整理过的GRID综合应用

    "整理过的GRID综合应用"这个主题涵盖了多个关键知识点,包括但不限于表头表尾的处理、数据导入导出、多层嵌套、分页等。下面将详细阐述这些概念。 1. **表头表尾处理**:在GRID中,表头通常用于显示列名,表尾可能...

    javascript web grid demo

    JavaScript Web Grid Demo是基于Web的表格展示和数据管理的示例,主要采用了Ext Grid和DHTMLX Grid这两款强大的JavaScript库。这两个库都是用于构建高度交互性和功能丰富的数据网格组件,广泛应用于数据密集型Web...

    Html Web模拟Excel电子表格

    在现代Web开发中,模拟Excel电子表格已经成为一种常见的需求,特别是在数据处理、在线协作和数据分析等领域。本项目利用HTML、JavaScript(JS)以及可能的扩展库(如ExtJS)来实现这一功能,使得用户能够在浏览器...

Global site tag (gtag.js) - Google Analytics