JS实现jasperreport交叉报表输出页面居中效果

在struts2整合jasperreport报表开发的时候,遇到了这么一个问题。在报表模版使用了交叉报表的时候,
我们知道所有的行和列都是动态生成的。那么我们在设计报表模版的时候一般会根据列的最大值情况设置报表的整体
宽度。当在某一个查询条件下可能只需要用部分列,这样的话,报表整体宽度不会变,默认需要显示的列会靠左显示,
其他部分则通过无色底图或者固定宽的html元素填充。
针对此对简单的解决方案就是通过JS重新布局输出的html,这样的话就不会去jasperreport内部生成机制了。
如果要实现通用性,就必须让输出的html代码是可读的,有规律可循的。所以通过各种尝试,通过设置一下属性,可以让输出的html
尽量小并且便于用JS进行通用解析。
exporter = new JRHtmlExporter();
 exporter.setParameter(JRHtmlExporterParameter.IS_REMOVE_EMPTY_SPACE_BETWEEN_ROWS, true);
                //不使用嵌套表格
                exporter.setParameter(JRHtmlExporterParameter.FRAMES_AS_NESTED_TABLES, false);
                //忽略默认HEADER,FOOTER
                exporter.setParameter(JRHtmlExporterParameter.HTML_HEADER, " ");
                exporter.setParameter(JRHtmlExporterParameter.HTML_FOOTER, " ");
                //忽略空白处填充图片
                exporter.setParameter(JRHtmlExporterParameter.IS_USING_IMAGES_TO_ALIGN, false);

 

JS代码

function loadReportPage(url){
	
	$("#reportContent").load(url,function(){
		adjustReportHTML();
		//TODO 
	});
}

//重新布局载入的报表内容html代码
function adjustReportHTML(){
	try {
	   var $table = $("#reportContent table:eq(0)");
	    var $headerTR = $("#reportContent tr:eq(0)");
	    var headerTdCount = $headerTR.find("td").length;
	    
	    var $firstInnerTR = $("#reportContent tr:eq(2)");
	    var firstInnerTd = $firstInnerTR.find("td:last-child");
	    
	    //设置报表table宽度
	    var tableOldWidth = $table.css('width').replace("px","");
	    var reduceWidth = firstInnerTd.css('width').replace("px","");
	    var tableNewWidth = tableOldWidth - reduceWidth;
	    tableNewWidth = tableNewWidth<500 ? 500 : tableNewWidth;
	    $table.css('width',tableNewWidth);
	    
	    //设置报表内容空白区域TD宽度
	    var colspan = firstInnerTd.attr("colspan");
	    $("td[colspan='"+colspan+"']").each(function(index){
	        $(this).css("width",colspan+"px");
	    });
	    
	    //设置报表标题区域空白TD宽度
	    for(var i=1;i<=3;i++){
	    	var resetIndex = headerTdCount-i;
	        $headerTR.find("td:eq("+ resetIndex +")").css("width","1px");
	    }
	} catch (e) {}
}

 

你可能感兴趣的:(html,css)