反饋已提交
網絡繁忙
FineReport 自带的提示框样式比较单一,例如填报校验的提示框,如下图所示:
可以通过引入一些 JS 和 CSS 来做出个性化的效果,如下图所示:
如果是 cpt 报表,直接在模板 Web 属性中引入外部 JavaScript 和 CSS 。
如果是 frm 报表,需要在 body 初始化事件中写外部 JavaScript 和 CSS 引用。
1)点击下载 JavaScript 和 CSS 文件:
notice.js
animate.css
noticejs.css
2)将 3 个文件放到%FR_HOME%\webroot\help\css目录下,如下图所示:
1)新建普通报表,设计器菜单栏点击模板>模板Web属性,打开的页面点击引用JavaScript,将上面的 1 个 JavaScript 文件引用到报表中,如下图所示:
2)点击引用CSS,将上面的 2 个 CSS 文件引用到报表中,如下图所示:
B2、D2、F2、H2 单元格都添加按钮控件,按钮名字分别设置为:success、info、warning、error,如下图所示:
分别给表格中的 4 个按钮添加点击事件,触发弹出提示框的操作,如下图所示:
1)B2 单元格按钮点击事件 JavaScript 代码如下:
new NoticeJs({ title: '', type: 'success', text: '填报成功', position: 'topCenter', closeWith: ['button','click'], timeout: 30, modal: false, progressBar: true, callbacks: { beforeShow: [], onShow: [], afterShow: [], onClose: [], afterClose: [], onClick: [], onHover: [function() { console.log("success"); }] }, animation: { open: 'animated bounceInRight', close: 'animated bounceOutLeft' }}).show()
2)D2 单元格按钮点击事件 JavaScript 代码如下:
new NoticeJs({ type: 'info', text: '填报进行中,暂时不可操作', position: 'topCenter', timeout: 30, modal: true, animation: { open: 'animated bounceInRight', close: 'animated bounceOutLeft' }}).show()
3)F2 单元格点击事件 JavaScript 代码如下:
new NoticeJs({ type: 'warning', text: '重复提交', timeout: 30, animation: { open: 'animated bounceIn', close: 'animated bounceOut' }}).show()
4)H2 单元格点击事件 JavaScript 代码如下:
new NoticeJs({ type: 'error', text: '填报失败', position: 'topCenter', timeout: 30, animation: { open: 'animated flipInX', close: 'animated flipoutX' }}).show()
保存报表,点击填报预览,效果如下图所示:
注:不支持移动端。
已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\倒计时消息提示框.cpt
点击下载模板:
倒计时消息提示框.cpt
点击下载JavaScript 和CSS 文件:
frm 报表需要在 body 初始化事件中写 JavaScript 引入,其他操作同上面 cpt 报表的实现方法,如下图所示:
JavaScript 代码如下:
function dynamicLoadCss(url) { var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.type = 'text/css'; link.rel = 'stylesheet'; link.href = url; head.appendChild(link);} function dynamicLoadJs(url) { var oHead = document.getElementsByTagName('head').item(0); var oScript = document.createElement("script"); oScript.type = "text/javascript"; oScript.src = url; oHead.appendChild(oScript);} dynamicLoadCss("/webroot/help/css/noticejs.css");dynamicLoadCss("/webroot/help/css/animate.css");//引入cssdynamicLoadJs("/webroot/help/css/notice.js");//引入js
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉