创建设计器
环境介绍
- 锐浪报表版本 “Version”:“6.6.6.5”
- 程序使用 mybatis+struts2
- 数据库oracle
引入js文件
<script src="${ctx}/public/report/GRInstall.js" type="text/javascript"></script>
<script src="${ctx}/public/report/GRUtility.js" type="text/javascript"></script>
<script src="${ctx}/public/report/grhtml5-6.6-min.js" type="text/javascript"></script>
<script src="${ctx}/public/report/jquery-1.12.4.min.js" type="text/javascript"></script>
以上是锐浪报表Web端插件所使用到的js
在网页中插入设计器插件
<body style="margin:0" onload="return window_onload()">
<script language="javascript">
CreateDesignerEx("100%", "100%", "${ctx}/login/decode.grf", "", "", "<param name='OnSaveReport' value='OnSaveReport'>"+"<param name='OnRequestData' value='OnRequestData'>");
ReportDesigner.Report.ShowProgressUI = true;//模板加载读条
</script>
</body>
参数说明--#1:宽度,#2高度,#3模板地址,#4保存地址,#5数据源地址,#6报表内置的一些属性方法
---${ctx}/login/decode.grf 已经购买了版权的情况下,可以在项目里放置一个解过码的grf文件,后面通过js加载自己设计的模板覆盖掉"decode.grf"就可以去掉水印了
通过JS加载报表模板
function window_onload(){
//这里使用的是原生的ajax来加载,不想重新写了
var xmlhttp = CreateXMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
ReportDesigner.Report.LoadFromStr(xmlhttp.responseText);
ReportDesigner.Reload();//通过这个方法将报表刷出来
}
}
xmlhttp.open("POST", encodeURI(ReportLoadUrl), false);
xmlhttp.send();
}
报表加载的后台方法
/**
* 从数据库加载模板
* @Author gaoyuan
* @return
*/
public String loadReportstr() {
reportInfo = reportManageService.getReport(reportId);
xml = reportInfo.getFile();
Struts2Utils.renderText(xml);
return null;
}
到这里模板就加载在出来 0.0
将报表保存在数据库
var OnSaveReport = function(){
//保存设计的报表模板
AjaxDesignerSave(ReportDesigner,reportId);
//忽略掉设计器本身的保存行为
ReportDesigner.DefaultAction = false;
}
var AjaxDesignerSave = function(ReportDesigner,reportId){
ReportDesigner.Post();//一定要刷哦!不然有缓存
var strReport = ReportDesigner.Report.SaveToStr();//将设计好的模板转为字符串,转出来是json字符串
var pars={"reportId":reportId,"strReport": encodeURI(strReport)};
$.ajax({
url : '../doSaveReport.cgi', //后台处理程序
type : 'POST', //数据发送方式 不限制参数长度.
data:pars,
dataType : 'json' ,
//async:false,
success:function(data){
if(data.success){
alert(data.msg);
}else{
alert(data.msg);
}
}
});
}
public void doSaveReport() throws IOException {
try {
String parameter = URLDecoder.decode(strReport, "UTF-8");
DaoFactory.getReportManageDao().upReport(parameter, reportId);
ResMsg.result(true, "模板保存成功!");
} catch (Exception e) {
ResMsg.result(false, "模板保存失败!");
}
}
<!-- 报表对应实体类的设置,file是存报表字符的字段 -->
<result property="file" column="C_FILE" jdbcType="CLOB" javaType = "java.lang.String"/>
从后台加载数据源
页面请求
var OnRequestData = function (Report){
//进入设计器的预览视图或查询视图会触发 OnRequestData 事件,在此事件中将报表数据载入到参数 Report 对应的报表对象中
AjaxSyncLoadReportData(Report, "../reportManageAction!loadData.cgi");
}
后台响应可以自己处理,返回xml格式或者json格式的数据只要满足锐浪报表的数据规范即可