Ureport2源码修改:增加自定义功能

Ureport2源码修改:单元格超链接增加弹出窗口显示功能


新人第一次发帖,求轻喷

需求来源

最近在工作的一个项目中涉及本身包含较多的报表(由其他付费报表工具开发),由于客户资金有限,给我们只有两条路:①将报表全部通过代码实现;②引入一款免费(开源更好)的报表工具,第二种选择明显更优,最终百度一圈选择使用Ureport2。这里如何在自己项目中集成Ureport环境不再阐述,教程很多。在使用过程中,有这么个需求:要求再明细列表中,点击字段弹出趋势图。乍一看需求很简单,不过上手Ureport就蒙了,没有弹出这个功能,工具能给的选项只有在这里插入图片描述这四种,这四种打开方式大致功能就是新页面打开、改变当前页地址打开、在父窗口打开、在最外层窗口打开!!!!那么,我们只能手撸一个弹出窗口打开功能了。

功能实现

开发前准备:

  1. 请先到官方地址下载一份源码(地址:https://gitee.com/youseries/ureport);
  2. Eclipse导入源码包中ureport2-console、ureport2-core、ureport2-font三个项目;
  3. 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;"/>`)
  • 16
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 19
    评论
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值