Ureport2源码修改:单元格超链接增加弹出窗口显示功能
新人第一次发帖,求轻喷
需求来源
最近在工作的一个项目中涉及本身包含较多的报表(由其他付费报表工具开发),由于客户资金有限,给我们只有两条路:①将报表全部通过代码实现;②引入一款免费(开源更好)的报表工具,第二种选择明显更优,最终百度一圈选择使用Ureport2。这里如何在自己项目中集成Ureport环境不再阐述,教程很多。在使用过程中,有这么个需求:要求再明细列表中,点击字段弹出趋势图。乍一看需求很简单,不过上手Ureport就蒙了,没有弹出这个功能,工具能给的选项只有这四种,这四种打开方式大致功能就是新页面打开、改变当前页地址打开、在父窗口打开、在最外层窗口打开!!!!那么,我们只能手撸一个弹出窗口打开功能了。
功能实现
开发前准备:
- 请先到官方地址下载一份源码(地址:https://gitee.com/youseries/ureport);
- Eclipse导入源码包中ureport2-console、ureport2-core、ureport2-font三个项目;
- VSCODE导入源码包中ureport2-js一个项目;
好了,咱们开干吧!
ureport2-js项目:
1.VS终端安装 webpack 与 react执行
① npm install react react-dom
② npm install -D webpack webpack-cli
③ npm install
④ npm install --save-dev webpack-dev-server
2.配置package.json
"build": "webpack",
"start": "webpack-dev-server --open"
3.修改designer.json(ureport2-js\src\i18n\designer.json)
在property ——>prop节点下添加属性:
"iframeWindow":"弹出窗口"
4.修改PropertyPanel.js(ureport2-js\src\panel\PropertyPanel.js)
为下超链接目标窗口下拉菜单增加自己的选项<option value="_iframe">${window.i18n.property.prop.iframeWindow}</option>
既然增加了弹出框,那么顺气自然应该再增加可以设置弹出窗口的宽度和高度两个配置输入框:
this.iframeWindowSet=$(`<div class="" style="display:none;width: 350px;font-size: 12px;height: 25px;padding: 3px;"></div>`);
this.iframeWSpan=$(`<span>宽度:</span>`);
this.iframeHSpan=$(`<span>高度:</span>`);
this.iframeW=$(`<input class="form-control" style="display: inline-block;width: 60px;font-size: 12px;height: 25px;padding: 3px;margin-right:20px;"/>`);
this.iframeH=$(`<input class="form-control" style="display: inline-block;width: 60px;font-size: 12px;height: 25px;padding: 3px;"/>`)