请上传宽度大于 1200px,高度大于 164px 的封面图片
    调整图片尺寸与位置
    滚轮可以放大缩小图片尺寸,按住图片拖动可调整位置,多余的会自动被裁剪掉
取消
RosieY(uid:485122)
职业资格认证:尚未取得认证
JS实现大屏数字增长效果
1. 概述 1.1 预期效果 实现数字增长效果,但是如果不使用该插件,希望单元格中的数字可以实现自动增长然后停下来的特效,那么该如何实现呢?效果下图所示: 注:这里的自动增长特效不是指实时刷新动态数据,只是针对一个数字实现从小到大增长然后停下来的效果,当然也可以结合刷新一起使用。 1.2 实现思路 模板 Web 属性下的预览设置界面添加加载结束事件,该方法同时支持 cpt 和 frm 报表,下面示例介绍 cpt 报表中实现数值增长的方法。 2. 示例 2.1 设计模板 1)新建一个 cpt 模板,设计器菜单栏点击模板>纸张背景,将纸张背景改为墨蓝色,如下图所示: 2)在 A2 单元格中添加公式:RANDBETWEEN(112234567,512456899)用来生成9位随机数。 3)在 B2 单元格添加人民币符号,C2 单元格中添加公式:split(A2,""),切割 A2 单元格中的数字,设置 C2 单元格横向扩展,将 C2 单元格设置字体为 UniDreamLED 。 UniDreamLED 为 LED 样式的字体,设计器未内置,需要手动添加,点击下载字体包:UnidreamLED.rar (10.2 K),解压后按照文档:设计器导入字体 进行添加。 4)设计器菜单栏点击模板>模板Web属性,分页预览设置下添加一个加载结束事件,如下图所示: JavaScript 代码如下: 注:代码中用到的 jQuery 选择器,为前端预览时控制台调试获取。 setTimeout(function() { var totalNum = $(".x-table").find("td").text(); //var totalNum = 889962321; var nums = 0; // 调用计时函数 setTimeout(timedCount(nums),10); // 循环计时函数, 多次调用自身函数, nums为被传递的参数 function timedCount(nums){ var count = Math.round(totalNum/30);//设置叠加次数,数量越大,加的越慢,反之越快 nums = nums+count; //document.getElementById('A2-0-3313').value =nums $(".x-table").find("td").text(nums); var n = String(nums).split(''); if(n.length==9){ $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) } else if(n.length==8){ $(".x-table").find("td").text(0) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) } else if(n.length==7){ $(".x-table").find("td").text(0) $(".x-table").find("td").text(0) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) } // 设置条件使停止计时 if (nums<totalNum) { setTimeout(function(){timedCount(nums)},50); }else{ $(".x-table").find("td").text(totalNum); var n = String(totalNum).split(''); if(n.length==9){ $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) } else if(n.length==8){ $(".x-table").find("td").text(0) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) }//数字长度不足8位时,首位填充0 else if(n.length==7){ $(".x-table").find("td").text(0) $(".x-table").find("td").text(0) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) $(".x-table").find("td").text(n) } //数字长度不足7位时,前两位填充0 } } },200);//延时,让页面加载完读取数据 2.2 效果预览 保存报表,点击分页预览,效果如下图所示: 注:不支持移动端。 3. 模板下载 点击下载模板:JS实现大屏数字增长效果.rar (2.43 K) 点击下载字体包:UnidreamLED.rar (10.2 K)
2021-07 文档月报
1、版本推送 7月版本更新,快来看看那些是你心心念念、期待已久的功能呢,试用后别忘了评论区反馈哦。 FR更新点击:2021-07-02 更新日志 BI更新点击:2021-07-09更新日志 期待的功能还没做,不要伤心,下面几个亮点功能,会不会是一份意外的收获呢。 FR「组件复用插件」 合并至设计器,此后功能随设计器更新,再也不用安装或更新插件了呢 FR 新增模板缺失插件提醒功能,模板中插件在新工程下未安装时弹窗提醒用户,是不是为你节省了排查时间呢 FR 新增「平台日志」插件,安装后可直接在平台导出日志,是不是方便了很多呢 BI 优化自助数据集更新设置,可设置跳过不需要更新的自助数据集,精准更新,避免不必要操作 BI 优化查看过滤条件,点击即可查看组件的过滤条件,再也不用进入编辑状态去查看过滤条件了呢 FR、BI 平台新增用户同步失败通知配置项,同步不成功即可提醒管理员,管理员再也不会手忙脚乱的查找问题了 FR、BI移动端支持自定义 App 登录页,可根据自身需求设置登录页,想怎么设置就怎么设置呢 2、内容推送 填报文档大翻新,新的目录按学习路径排列,从入门到进阶,快去试一试哦。 点击跳转到填报模块:填报JS文档汇总 模块整合,所有填报JS文档已从二次开发目录迁移到填报应用目录,按接口和应用场景分类放置哦。二次开发目录下放汇总页,详细示例放置在对应目录下,你觉得这样的方式方便学习和查找吗,赶快评论区留言发表意见吧。 3、功能通知 文档系统新增文档划词功能,期待你的火眼金睛找出文档问题哦。 文档划词、文档评论后会推送给文档同学,你的意见将被及时看到和回复!! DEMO首页更新,从这里你将获取到最新的学习资料和模板资源,点击跳转即可下载呢。 点击体验在线DEMO 点击体验大屏DEMO 4、资料推荐 可视化报表做的好不好,快用 GLAD 评分原则来评价一下吧! 点击即可查看 GLAD 评分原则:GLAD 原则 更多GLAD 原则内容,推荐学习  乐见数据-商业数据可视化思维  哦   还在愁公司员工离职没有合适的指标来衡量吗?还在愁员工流失率看板怎么做吗?收下这份员工流失率可视化分析吧! 点击即可查看详细思路:员工流失率可视化分析   还在愁怎么做出好看的大屏模板吗?试试用组件复用吧,帅的人都在用组件做模板了,你怎么还在调配色呢! 7月新增两组组件包,点击即可免费下载: 机械风组件包 商务风组件包   还在愁没有新的大屏素材吗?附上最近新增的大屏模板哦,悄悄告诉你,部分是可以用组件堆出来的哦。 点击图片即可下载学习,学习后记得评论区亮出你的作品哦!        
模拟一家公司,用FR打造一个人事管理系统
143740 无论任何类型的公司,人事工作都是不可或缺的。 公司人事部门如何能让公司人才供应和需求处于一个平衡状态,同时又能让人事部门员工没有那么强的工作压力, 有时候,一个完整且好用的人事管理系统,是至关重要的。 小数公司,一个研发自主品牌的小型互联网公司,随着员工数量逐年增加,人事工作越来越繁重复杂。 负责招聘、员工入职、员工岗位变动、日常考勤等工作的人事组员工梁楠、林晓晓、乔素越来越忙,感觉每天都在做大量的重复工作和不必要返工。 为减轻她们的工作压力,帮助提高她们的工作效率,该如何做呢? 可以利用 FineReport 报表展示和填报的功能,结合 FineReport 数据决策系统, 143697 制作一套「人事管理系统」。 143696 通过电子化、流程化,让人事工作规范、方便、操作快捷,从而提高员工的工作效率、减轻员工的工作压力。 和以往的 DEMO 相比,有业务背景的 DEMO,将提供一个通过 FineReport 应用直观落地的视角, 按角色梳理其所处位置的痛点和真正要解决的问题是什么,从而使用 FineReport 解决这个问题或推动这个业务; 同时结合多个功能模块的系统化 DEMO,更能展示如何协同使用 FineReport 各个功能模块。 快来一起看看通过 FineReport 填报、报表展示、数据决策系统如何打造小型「人事管理系统」吧~~ 点击 人事管理系统 即可查看业务场景痛点及对应的解决过程,并在线使用哦点击 免费下载 即可下载使用呢~~~~ 编辑于 2021-5-13 10:51
【工具栏JS实例】JS实现动态修改工具栏展示长度
1. 描述场景描述:使用填报预览的时候,选中单元格,数值在上方工具栏中会显示出来,但是,如果单元格文字很多,工具栏显示的宽度不够,数值会显示不全,如图:https://help.fanruan.com/uploads/201808/20180814134827_3240.png2. 思路在填报页面设置上,可以用“加载结束事件”控制自定义单元格展示栏的长度。 3. 操作步骤点击模板>模板 Web 属性>填报页面设置,选择为该模板单独设置,添加一个加载结束事件,自定义单元格展示栏的长度: https://help.fanruan.com/uploads/201808/1534225666Kci77hZj.png 代码如下:$("pre").parents("div:first").css("width",300).end().parents("table:first").css("width",300); 4. 预览效果 4.1 PC 端预览效果保存模板,选择填报预览方式,选中单元格,效果如下图: https://help.fanruan.com/uploads/201808/20180814134827_6723.png注:经过测试,移动端暂不支持该效果。 5. 已完成模板已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\工具栏JS实例\06-JS实现动态修改工具栏展示长度.cpt模板下载见附件: 编辑于 2021-2-1 15:42
【工具栏JS实例】JS控制工具栏居中/居右显示
1. 描述场景描述:在实际项目中,有时客户会要求把工具栏的按钮居中显示或者居右显示,这时就会用到这个功能。 2. 思路我们只需要在模板 Web 属性中“加载起始”事件上面,利用 JS 将工具栏的 CSS 样式进行调整即可。 3. 操作步骤 3.1 示例一: JS 控制工具栏按钮居中显示1) 打开报表打开%FR_HOME%/webapps/webroot/WEB-INF/reportlets/doc/Advanced/Father.cpt2) 模板设计点击菜单模板>模板 Web 属性>分页预览设置,选择“为该模板单独设置”添加加载起始事件,JS 为: $('.x-toolbar').css('vertical-align','middle'); $('table').css({'margin-left':'auto','margin-right':'auto'}); 如图所示:https://help.fanruan.com/uploads/201808/1534146986oHj8vBlf.png 3) 效果查看点击分页预览,可见工具栏居中显示。https://help.fanruan.com/uploads/201808/20180813155818_8491.png 3.2 示例二:JS 控制工具栏按钮居右显示1)报表设计参照上述过程,点击菜单模板>模板 Web 属性>分页预览设置,选择“为该模板单独设置”添加加载起始事件,JS 为:$('.x-toolbar').css('vertical-align','middle'); $('table').css({'float':'right'}); 2) 效果查看点击分页预览,可见工具栏居右显示。https://help.fanruan.com/uploads/201808/20180813155819_7350.png 3.3 示例三: 使用顶部和底部工具栏,同时在右1)报表设计参照上述过程,点击菜单模板>模板 Web 属性>分页预览设置,选择“为该模板单独设置”添加加载起始事件,JS 为: $('.x-toolbar').css('vertical-align','middle'); $('table').css({'float':'right'}); 2)效果查看当同时使用顶部工具栏和底部工具栏时,使用上面的方法会使两个工具栏都居右显示,如下图所示:https://help.fanruan.com/uploads/201808/20180813155819_4604.jpg 3.4 示例四: 使用顶部和底部工具栏,顶部在右底部在左1)报表设计如只需将顶部工具栏居右显示,可点击菜单模板>模板 Web 属性>分页预览设置,选择“为该模板单独设置”添加加载起始事件,添加 JS 为: $('.x-toolbar').eq(0).css('vertical-align','middle'); $('table').eq(0).css({'float':'right'}); 2)效果查看点击分页预览,效果如下图所示:https://help.fanruan.com/uploads/201808/20180813155819_1993.jpg 3.5 示例五: 使用顶部和底部工具栏,顶部在左底部在右1)报表设计若只下想设置底部工具栏为居右显示,则将 JS 修改为:$('.x-toolbar').eq(2).css('vertical-align','middle'); $('table').eq(2).css({'float':'right'}); 2)效果查看点击分页预览后,即可看到底部工具栏居右显示。https://help.fanruan.com/uploads/201808/20180813155819_5701.png注:需要添加加载起始事件,添加加载结束事件不起作用。 4. 预览效果 4.1 PC 端预览效果保存模板,选择分页预览,实现效果如各示例中所示。注:经过测试,移动端暂不支持该效果。1)示例一已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\工具栏JS实例\03-JS控制工具栏居中居右显示示例一(居中显示).cpt模板下载见附件2)示例二已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\工具栏JS实例\03-JS控制工具栏居中居右显示示例二(居右显示).cpt模板下载见附件3)示例三已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\工具栏JS实例\03-JS控制工具栏居中居右显示示例三(顶部和底部同时在右).cpt模板下载见附件4)示例四已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\工具栏JS实例\03-JS控制工具栏居中居右显示示例四(顶部右底部左).cpt模板下载见附件5)示例五已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\工具栏JS实例\03-JS控制工具栏居中居右显示示例五(顶部左底部右).cpt模板下载见附件 编辑于 2021-2-1 15:06 编辑于 2021-2-1 15:06
【分页预览JS实例】JS 实现图表系列间值的比较
1. 概述 1.1 问题描述 图表的特效>条件属性中,系列之间的数据不能直接进行比较。现在想要实现如下图所示的系列间值的比较,当饮料销量小于点心时,柱形配色变为红色。https://help.fanruan.com/uploads/20200307/1583565655318032.png1.2 实现思路通过 JS 实现系列间值的比较,并根据比较结果改变柱形配色。2. 示例 2.1 报表设计1)新建数据集 ds1,数据库查询语句为:SELECT * FROM 销量https://help.fanruan.com/uploads/20200307/1583565749632982.png2)合并一片区域的单元格,插入柱形图,如下图绑定图表数据: https://help.fanruan.com/uploads/20200307/1583565798163422.png3)在柱形图样式>标签下,勾选使用标签,点击自定义,然后编辑 JS。https://help.fanruan.com/uploads/20200307/1583565890695386.pngJS 代码如下:function(){ if(this.points.value<=this.points.value) this.points.color="red"; } 2.2 效果预览1)PC 端保存报表,点击分页预览,效果如下图所示:https://help.fanruan.com/uploads/20200307/1583565655318032.png2)移动端https://help.fanruan.com/uploads/20200307/1583566432689916.png3. 模板下载已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\JS 实现图表系列间值的比较.cpt模板下载见附件
【分页预览JS实例】JS实现隐藏行重新编号
1. 描述对扩展后的数据使用条件属性>行高隐藏行后,导致之前编好的序号被打乱,下面提供 JS 实现隐藏行重新编号的方法:2. 思路 通过 JavaScript 代码判断该行是否已经隐藏,不隐藏的才进行编号。 3. 示例1)创建数据查询,新建模板数据集 ds1,如下图所示:SELECT * FROM 销量 https://help.fanruan.com/uploads/20190723/1563853560278554.png 2)报表设计如下,A2 单元格为空,其左父格为 B2: https://help.fanruan.com/uploads/201904/1555773689UGUQpGkC.png 3)选中 B2 单元格,选择条件属性>行高,隐藏地区为华北的数据行。具体设置如下图所示:https://help.fanruan.com/uploads/201904/1555773742qJETOrSd.png 4)选中 F2 单元格,选择条件属性>行高,隐藏销量大于300的数据行。具体设置如下图所示:https://help.fanruan.com/uploads/20190723/1563860650110886.png5)打开模板>模板 Web 属性>分页预览设置,选择为该模板单独设置,添加加载结束事件:https://help.fanruan.com/uploads/201904/1555774201nKasK9gg.png $(".x-table tr:visible").each(function(i){ if(i>0){//第一行编号为0,因此要排除 $(this).find("td:first").text(i); } }) 如果第一行设置了重复与冻结,那么 JavaScript 代码修改如下,其他不变: $(".x-table:last tr:visible").each(function(i){ if(i>2){ $(this).find("td:first").text(i-2);//前面有.x-table的frozon-coner/frozon-north/frozon-west三个需要剔除 } })//如果不踢除,那么不设置条件属性的时候就会出错 4. 预览效果保存模板,点击分页预览,效果如下图所示: https://help.fanruan.com/uploads/201904/1555774314AA3cP3Ks.png注:不支持移动端预览5. 已完成模板已完成模板可参见%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\JS实现隐藏行重新编号.cpt 模板下载见附件 编辑于 2021-1-28 11:34 编辑于 2021-1-28 11:34
【分页预览JS实例】JS实现光标悬浮在超链上方直接显示所有选项
1. 概述1.1 问题描述 根据 超级链接 的方法可以为一个单元格添加超级链接,以实现钻取、跳转等多种功能。 但是当一个单元格元素包含多个超级链接时,必须要单击一次超链接元素,才会弹出超链接选项,对于使用者来说,交互体验不佳。 此处提供一个方法,当鼠标移动到超链接处时,直接显示多个超链接选项,而不需要二次点击,若只有一个超链则直接打开,效果如下图所示: 1.2 实现思路 利用单元格的 jQuery 事件 mouseover 来控制鼠标移动到单元格的动作,利用 mouseout 来执行鼠标移出单元格的动作。 但是其中需要判断是否包含超链接以及是否有多个超链接,另外还需要处理鼠标移出单元格时是否移动到菜单的判断。 2. 示例2.1 新建模板 新建一个工作簿,B2 单元格文本内容为超链接1,B3 单元格文本内容为超链接2。 B2 单元格添加 3 个超链接: B3 单元格添加 1 个超链接(作为对比): 2.2 添加加载结束事件 菜单栏选择模板>模板Web属性>分页预览设置,添加加载结束事件,如下图所示: JavaScript 代码如下: $('td').mouseover(function(){ //设置鼠标移动到单元格事件 var $link=$(this).find('.linkspan'); //如果包含超链接 if($link.length>0){ //如果包含多个超链接备选项,弹出菜单,否则不处理      if($link.attr('onclick').replace('return').indexOf('return')>=0){      //调用一次超链接点击事件 $link.click(); var x=window.event.x; var y=window.event.y; //设置弹出菜单的左、上方位置为鼠标当前位置,也可以按需要修改 $('.menu').css('left',x); $('.menu').css('top',y); } } }).mouseout(function(e){ ////设置鼠标出单元格事件,需要隐藏原来的菜单 var $link=$(this).find('.linkspan'); if($link.length>0){ var $target=$(e.toElement); if(!$target.hasClass('menu')){ //隐藏弹出菜单 $('.menu').hide(); }} }) 复制代码 2.3. 保存预览 保存报表,点击分页预览,效果如1.1 问题描述中所示。 注:不支持移动端。 3. 模板下载 已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\JS实现鼠标悬浮显示超链选项.cpt 模板下载见附件 4. 应用扩展 如果需要鼠标移动到超链接本身而不是移动到单元格就显示菜单的需求时,可用以下代码: $('td .linkspan').mouseover(function(){ //设置鼠标移动到超链接事件 var $link=$(this); //如果包含超链接 if($link.length>0){ //如果包含多个超链接备选项,弹出菜单,否则不处理      if($link.attr('onclick').replace('return').indexOf('return')>=0){      //调用一次超链接点击事件 $link.click(); var x=window.event.x; var y=window.event.y; //设置弹出菜单的左、上方位置为鼠标当前位置,也可以按需要修改 $('.menu').css('left',x); $('.menu').css('top',y); } } }).mouseout(function(e){ ////设置鼠标出超链接事件,需要隐藏原来的菜单 var $link=$(this); if($link.length>0){ var $target=$(e.toElement); if(!$target.hasClass('menu')){ //隐藏弹出菜单 $('.menu').hide(); }} }) 复制代码 编辑于 2021-1-28 10:56   编辑于 2021-1-28 10:56   编辑于 2021-9-16 11:41
「表单JS实例」JS实现自定义水球图
1. 概述 1.1 应用场景FineReport 扩展图表插件支持展现百分比数据的水球图,详细介绍可参见文档:水球图。但是如果用户想要自定义一个简单的水球图,也是可以通过 JS 代码实现的。示例中的自定义水球图效果如下图所示:https://help.fanruan.com/uploads/20191203/1575352257331743.gif1.2 功能介绍 根据指标值和目标值计算并展示百分比,水平面随百分比数据变化。 支持在百分比数据上方自定义标题信息。 只能显示单条百分比数据,不支持轮播效果,但扩展图表插件那个水球图是支持轮播的。 字体、水纹和边框的颜色支持自定义,修改相应的 JS 代码即可。 2. 示例 2.1 报表设计 1)新建一个空白的决策报表,body 的样式改为黑色背景色,布局方式改为绝对布局,缩放逻辑为固定大小,将绝对画布块拖拽到报表设计主体 body 中。 https://help.fanruan.com/uploads/20191203/1575355140124427.png2)绝对画布块缩放逻辑改为固定大小,调整好它的位置和大小,点击编辑按钮,在绝对画布块中添加一个报表块。https://help.fanruan.com/uploads/20191203/1575353724488216.png3)如下图设计插入的报表块https://help.fanruan.com/uploads/20191203/1575353927231426.png4)报表块的名称要改为report,然后不勾选可见。注:百分比数据=指标值/目标值。https://help.fanruan.com/uploads/20191203/1575354223100478.png2.2 引入JS文件1)下载文件:canvas.js,下载见附件。并将该 JS 文件放置到%FR_HOME%\webapps\webroot\help\css\目录下。2)菜单栏点击服务器>服务器配置>引用JavaScript,引用刚刚的 JS 文件。https://help.fanruan.com/uploads/20191203/1575354828881377.png2.3 添加JS事件 1)选中决策报表主体form,添加一个初始化事件,JS 代码如下:var head = document.getElementsByTagName('head'); if(!isInclude("canvas.js")){ var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'css/canvas.js'; head.appendChild(script); } function isInclude(name){ var js= /js$/i.test(name); var es=document.getElementsByTagName(js?'script':'link'); for(var i=0;i
【其他JS】JS实现打开模板隐藏左侧导航栏
1. 概述 1.1 问题描述有时因报表中需要显示的信息过多,而显示界面过小,无法完整展现所有的报表内容,我们可能会需要在打开决策报表之后自动把左侧的导航栏隐藏起来。效果如下图所示:(打开财务综合指标不能自动隐藏,打开利润中心加载后自动隐藏) https://help.fanruan.com/uploads/20191011/1570790117422290.gif 1.2 实现思路可以通过在决策报表 body 组件中添加初始化 JS 事件实现。2. 示例 以%FR_HOME%/webapps/webroot/WEB-INF/reportlets/demo/analytics/financial2/利润中心.frm为例:选择 body,添加初始化后事件,如下图所示: https://help.fanruan.com/uploads/20200508/1588916791836637.pngJavaScript 代码如下:$('.bi-icon-change-button.unpin-font', window.parent.document).click(); 保存后,进入决策系统将该报表挂载到目录查看即可。3. 模板下载模板下载见附件。 编辑于 2021-1-3 18:46
【分页预览JS实例】JS实现鼠标悬停列标题有超链时标题高亮显示
1. 问题描述当鼠标移动到可排序的列(列标题使用超级链接实现的排序)时,如何实现列标题高亮显示?如下图,当鼠标悬停到列标题有超链接的列时,列标题高亮显示。https://help.fanruan.com/uploads/201808/20180808154844_4488.gif 2. 示例参考 横向扩展列多列排序 做好点击列标题排序的报表。 https://help.fanruan.com/uploads/201808/20180808154844_8262.png 点击菜单模板>模板 Web 属性>分页预览设置,选择“为该模板单独设置”,添加一个“加载结束”事件。https://help.fanruan.com/uploads/201808/1533714502aKvhe4FC.png 编辑加载结束事件,添加下面的 JavaScript 代码:$("td").mouseover(function() { //鼠标悬浮在单元格上事件 var id = $(this).attr("id"); //获取鼠标当前所在单元格的id var num = id.search("-"); //获取id中“-”符号第一次出现的索引 var id1 = id.substr(0, num).replace(/+/ig, ""); //截取id值中的字母即列号 var id2 = id.substr(num, id.length - num); //截取id id = id1 + "1" + id2; //设置id为鼠标所在单元格的列表标题的单元格id,1表示列标题所在行 if ($('td').attr('class').indexOf('celink') !== -1) //判断列标题是否包含超链接的class { $('td').css({ 'background': 'yellow' }); //设置列标题单元格的背景色 } }); $("td").mouseleave(function() { //鼠标离开单元格事件 var id = $(this).attr("id"); var num = id.search("-"); var id1 = id.substr(0, num).replace(/+/ig, ""); var id2 = id.substr(num, id.length - num); id = id1 + "1" + id2; //设置id为鼠标所在单元格的列表标题的单元格id,1表示列标题所在行 $('td').css({ 'background': '#e7ebf1' }); //设置列标题单元格的背景色为原来的背景色 }); 代码中 id=id1+"1"+id2;中的 1 为预览效果中标题所在的行。此方法仅适用于列标题为同一行的,像多列排序中的带超级链接列标题不在同一行不适用此方法。保存模板,点击分页预览即可查看上面的效果。3. 模板下载模板下载见附件
【表单JS实例】JS实现开关按钮
1. 概述 1.1 预期效果实现开关按钮,前端预览打开和关闭按钮时,可以跟报表元素联动。例如按钮打开时显示单价列表,关闭时隐藏单价列表,点击禁用开关按钮可以让开关效果失效,如下图所示: https://help.fanruan.com/uploads/20200724/1595575045559006.gif1.2 实现思路 如果是 cpt 报表,直接在模板 Web 属性中引入外部 JavaScript 文件。使用公式实现开关样式,添加点击事件实现开关切换效果。 如果是 frm 报表,需要在 body 初始化事件中写外部 JavaScript 引用。使用公式实现开关样式,添加点击事件实现开关切换效果。 2. 示例 2.1 下载文件1)点击下载 JavaScript 文件:Qbutton.js2)将下载的 JavaScript 文件放到%FR_HOME%\webroot\help\css目录下,如下图所示:https://help.fanruan.com/uploads/20200724/1595577211522360.png2.2 引用文件新建决策报表,在 body 初始化事件中引入上面的 JavaScript 文件,如下图所示:https://help.fanruan.com/uploads/20200724/1595577541337447.pngJavaScript 代码如下: 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); } //封装的方法,无需任何改动 dynamicLoadJs("/webroot/help/css/Qbutton.js"); //调用方法,参数为js文件路径 2.3 准备数据新建数据查询数据集 ds1 ,SQL 查询语句为:SELECT * FROM S产品 limit 10https://help.fanruan.com/uploads/20200724/1595577796690745.png2.4 设计报表1)决策报表 body 中拖入 3 个组件:报表块 report0 和 report1 ,按钮控件 button0,如下图所示:https://help.fanruan.com/uploads/20200724/1595578941465447.png2)编辑报表块 report0 ,设计表格样式,如下图所示:https://help.fanruan.com/uploads/20200724/1595579635784670.png3)编辑报表块 report1,设计表格样式,如下图所示:https://help.fanruan.com/uploads/20200724/1595579763723890.png其中,B1 单元格插入公式'',并用HTML显示内容,通过该公式获取开关的样式,如下图所示: 可选 checked 属性,控制开关按钮显示状态 可选 disabled 属性,控制开关按钮可用状态 https://help.fanruan.com/uploads/20200724/1595579938858103.png4)选择按钮控件 button0,设置按钮名字为禁用开关按钮,如下图所示:https://help.fanruan.com/uploads/20200724/1595580607693577.png2.5 开关联动body 新增一个初始化事件用于为开关按钮绑定点击事件,获取值并传参给需要联动的组件,切换显示和隐藏单价列,如下图所示:https://help.fanruan.com/uploads/20200724/1595580777406717.pngJavaScript 代码如下:setTimeout(function() { $("#Qbutton").click(function() { //给开关按钮绑定点击事件 var state = this.checked; //获取按钮值,返回true和false _g().getWidgetByName("report0").gotoPage(1, "{checked:" + state + "}", true); //传参并刷新报表块report0 if (state) { $("#REPORT1 td").text('显示单价'); $("#REPORT1 td").css("color","#11c75d"); } else { $("#REPORT1 td").text('隐藏单价'); $("#REPORT1 td").css("color","#FF4651"); } //动态修改A1内容和字体颜色 }); }, 500) 2.6 禁用按钮 按钮控件 button0 添加点击事件,实现禁用按钮效果,如下图所示:https://help.fanruan.com/uploads/20200724/1595580997793622.pngJavaScript 代码如下:Qbutton.disabled = true;//开关按钮灰化无法选取 2.7 效果预览保存报表,点击表单预览,效果如下图所示:https://help.fanruan.com/uploads/20200724/1595575045559006.gif注:不支持移动端。3. 模板下载已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\JS实现开关按钮.frm模板下载见附件JavaScript 文件下载见附件 编辑于 2021-1-2 14:43
【表单JS实例】JS实现决策报表中鼠标移动时单元格样式改变
1. 概述 1.1 预期效果决策报表中报表块,像普通报表一样, 当 鼠标悬浮/点击/离开单元格时改变单元格字体颜色 或底色等样式,如下图所示:https://help.fanruan.com/uploads/20200804/1596524350996739.gif1.2 实现方法通过给决策报表报表块单元格添加「初始化后」 JS 事件实现。2. 示例 2.1 新建模板1)新建决策报表,添加数据库查询,SQL 语句为:SELECT * FROM 区域销售2)在决策报表中添加报表块 report0 并设置其样式,如下图所示:https://help.fanruan.com/uploads/20200803/1596442800471791.png2.2 添加 JS 事件选中 report0 ,点击「组件设置>事件」,添加「初始化后」事件,如下图所示:https://help.fanruan.com/uploads/20201107/1604761793264697.pngJavaScript 代码如下:setTimeout(function() { //鼠标经过时 $(".x-table.REPORT0table td span.linkspan").mousemove(function() { //所在单元格字体颜色为红色 $(this).css("color", "red"); //所在单元格背景为蓝色 $(this).css("background-color", "blue"); //所在单元格字体加粗 $(this).css("font-weight", "bold"); //所在单元格添加下划线 $(this).css("text-decoration", "underline"); //所在行单元格字体:11px $(this).find("td").css("font-size", "11px"); }); //鼠标点击时 $(".x-table.REPORT0table td span.linkspan").mousedown(function() { //所在单元格字体颜色为黄色 $(this).css("color", "yellow"); //所在单元格背景为黑色 $(this).css("background-color", "black"); //所在单元格字体加粗 $(this).css("font-weight", "bold"); //所在单元格添加上划线 $(this).css("text-decoration", "overline"); //所在行单元格字体:13px $(this).find("td").css("font-size", "13px"); }); //鼠标离开 $(".x-table.REPORT0table td span.linkspan").mouseout(function() { //所在单元格字体颜色为黑色 $(this).css("color", "black"); //所在单元格背景为白色 $(this).css("background-color", "white"); //所在单元格字体正常 $(this).css("font-weight", "normal"); //所在单元格无下划线 $(this).css("text-decoration", "none"); //所在行单元格字体:9px $(this).find("td").css("font-size", "9px"); }); }, 100);注:如果预览时效果不生效, 调大 setTimeout 的延时时间即可,比如调大到 500。 2.3 效果预览 保存模板,选择「表单预览」,效果如下图所示:https://help.fanruan.com/uploads/20200804/1596524331886600.gif注:不支持移动端。3. 模板下载已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\JS实现决策报表鼠标移动时单元格样式改变.frm模板下载见负附件 编辑于 2021-1-2 13:03
【表单JS实例】JS实现报表按钮获取报表块的页码数
1. 概述 1.1 问题描述在实际项目,有时候会用到决策报表中的报表块,那么如何能在决策报表的按钮中获取到报表块中的页码数呢?https://help.fanruan.com/uploads/201808/20180813105622_7384.gif 1.2 解决思路通过 JS 获取报表块的页码数:$('div').find('.fr-texteditor').val(); //获取报表块report0的当前页码数 _g().getWidgetByName("report0").totalPage; //获取报表块总页码数,其中report0是报表块的名字 2. 示例 2.1 新建决策报表1)新建一个数据集 ds1,SQL 语句:select * from 销量2)向决策报表中拖拽一个报表块,报表块设计如下图所示:https://help.fanruan.com/uploads/20191012/1570844517527147.png 2.2 设置报表块分页1)右击 A1 单元格,添加条件属性,选择行后分页,使用公式:ROW()%10=0,如下图所示:https://help.fanruan.com/uploads/20191012/1570844768886089.png2)返回表单,选中报表块,点击属性中报表块工具栏的https://help.fanruan.com/uploads/201808/20180813105623_7299.png,打开报表块工具栏设置,勾选使用工具栏,点击确定,如下图所示:https://help.fanruan.com/uploads/20191012/1570845030286069.png2.3 添加按钮向报表中拖入按钮控件,按钮名称为获取页码按钮,并添加点击事件,如下图所示:https://help.fanruan.com/uploads/20191012/1570845404575310.png具体 JS 代码为:var a = $('div').find('.fr-texteditor').val(); //获取报表块report0的当前页码数 var b = _g().getWidgetByName("report0").totalPage; //获取报表块总页码数,其中report0是报表块的名字 alert("当前页码是" + a); alert("总页码是" + b);3. 预览效果 3.1 PC 端https://help.fanruan.com/uploads/201808/20180813105623_8745.gif 3.2 移动端注:不支持移动端。4. 已完成模板已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\08-JS实现报表按钮获取报表块的页码数.frm 模板下载见附件 编辑于 2020-12-31 17:20
【表单JS实例】JS改变绝对画布块样式
1. 概述 1.1 问题描述决策报表中,绝对画布块没有样式设置的选项,因而用户无法对其边框、背景色、透明度、背景图片等样式属性进行修改,该如何实现呢?1.2 解决思路通过给绝对画布块添加初始化事件的 JS 代码,进而修改其样式属性。2. 示例 2.1 报表设计新建决策报表,添加两个绝对画布块,如下图所示:https://help.fanruan.com/uploads/20191009/1570601024803042.png 2.2 图片准备将要用到的背景图片image1.jpg放置到路径:%FR_HOME%\webapps\webroot\scripts\css目录下,如下图所示: 点击下载image1.jpg图片:image1.jpghttps://help.fanruan.com/uploads/20191009/1570601301294859.png2.3 添加初始化后事件选中绝对画布块 absolute0 ,点击控件设置>事件,添加初始化后事件,如下图所示: https://help.fanruan.com/uploads/20191009/1570601563346808.pngJS 代码如下:setTimeout(function() { $("div").css("border", "5px solid black"); //设置absolute0的边框大小、线型、颜色 $("div").css("opacity", "0.5"); //设置absolute0的背景透明度为0.4(0-1) $("div").css("background", "pink"); //设置absolute0的背景色为粉色 $("div").css('background', 'url(http://localhost:8075/webroot/scripts/css/image1.jpg)'); //设置absolute1的背景为图片image1.jpg }, 20); 3. 效果预览保存模板,预览模板,PC 端预览效果如下图所示:https://help.fanruan.com/uploads/20191009/1570601908409544.png注:不支持移动端4. 已完成模板已完成模板请参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\07-JS改变绝对画布块样式.frm模板下载见附件图片下载见附件 编辑于 2020-12-31 16:30
【表单JS实例】JS实现控件融入背景
1. 概述 1.1 预期效果 决策报表深色背景下,控件原本的白色显得很刺眼,如下图所示:https://help.fanruan.com/uploads/20200421/1587459645793413.png如何将控件背景修改成与主体背景颜色一致呢,效果如下图所示:https://help.fanruan.com/uploads/20200421/1587459774445646.png1.2 实现思路使用 JS 获取主体背景颜色,然后修改控件背景,以及其他控件属性。2. 示例 2.1 报表设计1)新建一个决策报表,设置 body 布局方式为绝对布局,如下图所示: https://help.fanruan.com/uploads/20200421/1587459899286203.png2)如下图依次添加下拉单选控件,日期控件,文本控件,数字控件和按钮控件,并给控件设置默认值。https://help.fanruan.com/uploads/20200813/1597281921612236.png3)日期控件需要取消勾选允许直接编辑,否则直接编辑日期控件内容时,会出现白色背景色。https://help.fanruan.com/uploads/20200813/1597282011740438.png4)按钮控件自定义背景,初始背景颜色设置为透明,如下图所示:https://help.fanruan.com/uploads/20200813/1597282225684156.png5)选中 body 添加初始化后事件,如下图所示:https://help.fanruan.com/uploads/20200729/1596008625642379.pngJavaScript 代码如下:setTimeout(function(){ //以下修改文本控件、数字控件的属性 $(".fr-texteditor").css({"background":"rgba(0,0,0,0)","color":"#c0c0c0"});//设置背景和字体颜色 $(".fr-texteditor").css("border","none");//去除边框 //以下修改下拉单选控件,下拉复选控件和日期控件的属性 $(".fr-trigger-text.fr-border-box").css({"background":"rgba(0,0,0,0)"});//设置控件本身背景 $(".fr-trigger-text").find("input").css({"background":"rgba(0,0,0,0)","color":"#c0c0c0"});//设置控件输入框背景和字体颜色 $(".fr-trigger-text").css("border","none");//去除边框 $(".fr-trigger-btn-up").css({"background":"rgba(0,0,0,0)","border":"none"});//设置控件右侧点击按钮 },100) 2.2 效果预览保存报表,点击表单预览,效果如下图所示:注:不支持移动端。https://help.fanruan.com/uploads/20200421/1587461054533290.png注:预览时,若控件出现如下白底效应,说明报表工程 JAR 包版本较低,可通过升级实现预期效果。https://help.fanruan.com/finereport/uploads/20201201/1606810398134110.png3. 模板下载已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\JS实现控件融入背景.frm模板下载见附件 编辑于 2020-12-29 17:27
【表单JS实例】报表块中点击单元格改变颜色再次点击恢复颜色
1. 描述 1.1 问题描述在报表块中,点击单元格背景色发生变化,再次点击单元格背景色恢复。https://help.fanruan.com/uploads/201808/20180813104648_4442.gif 1.2 解决思路但这些方案解决不了单元格颜色的恢复。对报表块添加初始化事件,使用 setTimeOut函数来定义单击事件,其中分别设置点击单元格后的背景色和恢复的背景色,根据点击时单元格的颜色决定设置背景色。2. 示例 2.1 报表设计 1)新建决策报表,新建数据集 ds1:select * from 销量。2)在决策报表中拖入一个报表块,报表块设计如下:https://help.fanruan.com/uploads/201808/20180813104648_7182.png2.2 添加初始化后事件给报表块添加初始化后事件,如下图所示:https://help.fanruan.com/uploads/20191015/1571123574336133.pngJS 代码如下:setTimeout(function() { //选择时背景颜色变量 var oldColor = "rgb(255, 255, 255)"; var newColor = "rgb(255, 0, 0)"; $('.x-table td').click(function() { if($(this).css('background-color') != newColor) { $(this).css('background', newColor); } else if($(this).css('background-color') == newColor) { $(this).css('background', oldColor); } }); }, 1000);如果想要保留一行颜色,具体 JS 代码如下:setTimeout(function() { //选择时背景颜色变量 var oldColor = "rgb(255, 255, 255)"; var newColor = "rgb(255, 0, 0)"; $('.x-table td').click(function() { $(this).css('background', newColor).siblings().css("background",oldColor); }); }, 1000);3. 预览效果保存模板,点击预览,效果如下图所示:https://help.fanruan.com/uploads/201808/20180813104648_7863.gif 注:不支持移动端。4. 已完成模板已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\05-报表块中点击单元格改变颜色再次点击恢复颜色.frm 模板下载见附件 编辑于 2020-12-29 17:16
【表单JS实例】JS实现决策报表报表块鼠标所在单元格/行的样式
1. 概述 1.1 问题描述在设计决策报表时,可能会遇到这样的需求:当鼠标滑过报表块单元格时,添加不同的显示效果。但由于决策报表的特殊性,不能像 普通 CPT 报表 通过添加加载结束事件来实现。这时,我们该如何来实现此功能呢?如下图所示:https://help.fanruan.com/uploads/20191008/1570520282426579.gifhttps://help.fanruan.com/uploads/20191008/1570520282266517.gif1.2 解决思路通过 JS 实现鼠标经过或点击指定行时改变该行的样式。 注:如果预览模板不生效,将 setTimeout 的延时时间调大点就行,比如将 100 改成 500。2. 示例一:改变单元格样式2.1 新建模板新建决策报表,添加数据库查询,SQL 语句为:SELECT * FROM S产品添加报表块 report0 ,样式如下图所示:https://help.fanruan.com/uploads/20191008/1570520615257926.png 2.2 添加初始化后事件选中 report0 ,点击控件设置,添加初始化后事件,如下图所示:https://help.fanruan.com/uploads/20191008/1570520919588669.png JS 代码如下:setTimeout(function() { //鼠标经过时 $(".x-table.REPORT0table td").mousemove(function() { //所在单元格字体颜色为红色 $(this).css("color", "red"); //所在单元格背景为蓝色 $(this).css("background-color", "blue"); //所在单元格字体加粗 $(this).css("font-weight", "bold"); //所在单元格添加下划线 $(this).css("text-decoration", "underline"); //所在行单元格字体:11px $(this).find("td").css("font-size", "11px"); }); //鼠标点击时 $(".x-table.REPORT0table td").mousedown(function() { //所在单元格字体颜色为黄色 $(this).css("color", "yellow"); //所在单元格背景为黑色 $(this).css("background-color", "black"); //所在单元格字体加粗 $(this).css("font-weight", "bold"); //所在单元格添加上划线 $(this).css("text-decoration", "overline"); //所在行单元格字体:13px $(this).find("td").css("font-size", "13px"); }); //鼠标离开 $(".x-table.REPORT0table td").mouseout(function() { //所在单元格字体颜色为黑色 $(this).css("color", "black"); //所在单元格背景为白色 $(this).css("background-color", "white"); //所在单元格字体正常 $(this).css("font-weight", "normal"); //所在单元格无下划线 $(this).css("text-decoration", "none"); //所在行单元格字体:9px $(this).find("td").css("font-size", "9px"); }); }, 100); 2.3 模板预览保存模板,预览效果如下图所示:https://help.fanruan.com/uploads/20191008/1570521049899492.gif3. 示例二:改变行样式 3.1 新建模板新建决策报表,添加数据库查询,SQL 语句为:SELECT * FROM S产品添加报表块 report1 ,样式如下图所示:https://help.fanruan.com/uploads/201910/20191008160557_5027.png 3.2 添加初始化后事件选中 report1 ,点击控件设置,添加初始化后事件,如下图所示:https://help.fanruan.com/uploads/20191008/1570521330778325.pngJS 代码如下:setTimeout(function() { //鼠标经过时 $(".x-table.REPORT1table tr").mousemove(function() { //单元格所在行字体颜色为红色 $(this).css("color", "red"); //单元格所在行背景为蓝色 $(this).css("background-color", "blue"); //单元格所在行字体加粗 $(this).css("font-weight", "bold"); //单元格所在行添加下划线 $(this).css("text-decoration", "underline"); //单元格所在行字体:11px $(this).find("td").css("font-size", "11px"); }); //鼠标点击时 $(".x-table.REPORT1table tr").mousedown(function() { //单元格所在行颜色为黄色 $(this).css("color", "yellow"); //单元格所在行背景为黑色 $(this).css("background-color", "black"); //单元格所在行字体加粗 $(this).css("font-weight", "bold"); //单元格所在行添加上划线 $(this).css("text-decoration", "overline"); //单元格所在行字体:13px $(this).find("td").css("font-size", "13px"); }); //鼠标离开 $(".x-table.REPORT1table tr").mouseout(function() { //单元格所在行字体颜色为黑色 $(this).css("color", "black"); //单元格所在行背景为白色 $(this).css("background-color", "white"); //单元格所在行字体正常 $(this).css("font-weight", "normal"); //单元格所在行无下划线 $(this).css("text-decoration", "none"); //单元格所在行字体:9px $(this).find("td").css("font-size", "9px"); }); }, 100); 3.3 模板预览保存模板,预览效果如下图所示:https://help.fanruan.com/uploads/20191008/1570521184679452.gif4. 效果预览 4.1 示例一:改变单元格样式https://help.fanruan.com/uploads/20191008/1570521451722579.gif4.2 示例二:改变行样式https://help.fanruan.com/uploads/20191008/1570521463657363.gif注:不支持移动端5. 已完成模板已完成模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\02-JS实现决策报表报表块鼠标所在单元格或行的样式.frm模板下载见附件注:如果预览模板不生效,将 setTimeout 的延时时间调大点就行,比如将 100 改成 500。 编辑于 2020-12-29 14:34 编辑于 2020-12-29 14:36
【表单JS实例】决策报表里使用延时函数实现某些JS效果
1. 概述 1.1 问题描述有的时候有些 JS 代码在 cpt 里可以运行成功,但是在决策报表里会没有效果举例: 分页预览改变鼠标悬停所在行背景色 的代码,在决策报表的报表块使用,预览时没有效果。1.2 解决思路 这是由于决策报表里没有加载结束后事件,只有初始化后事件,但是我们需要在决策报表加载结束后再执行这段代码,因此我们在代码前面加上 setTimeout() 延时函数就可以起作用了。 setTimeout(function(){ },1000); 注:setTimeout()延时函数支持移动端。2. 示例 2.1 模板制作1)新建决策报表,新建数据集 ds1:SELECT * FROM 订单。2)将报表块拖入报表主体,报表块设计如下图所示:https://help.fanruan.com/uploads/201808/20180813154724_6149.png2.2 添加初始化后事件选中报表块,添加初始化后事件,如下图所示:https://help.fanruan.com/uploads/201808/20180813154724_6817.png JS 代码如下:setTimeout(function() { var background_color = "rgb(255,0,0)"; var frozen_back_color = new Array(); var back_color = new Array(); var $last_tr; var i = 0; $(".x-table tr").bind("mouseenter", function() { if(typeof($last_tr) != "undefined") { if(typeof($(this).attr("id")) != "undefined") { if(typeof($("#content-container #frozen-west").attr("id")) != "undefined") { $("#content-container #" + $last_tr.attr("id")).each(function() { $(this).children("td").each(function() { $(this).css("background-color", frozen_back_color); }); i = i + 1; }); i = 0; } else { $last_tr.children("td").each(function() { $(this).css("background-color", back_color); }); } frozen_back_color = ; back_color = ; } } if(typeof($(this).attr("id")) != "undefined") { if(typeof($("#content-container #frozen-west").attr("id")) != "undefined") { $("#content-container #" + $(this).attr("id")).each(function() { frozen_back_color = new Array(); $(this).children("td").each(function() { frozen_back_color = $(this).css("background-color"); $(this).css("background-color", background_color); }); i = i + 1; }); i = 0; } else { $(this).children("td").each(function() { back_color = $(this).css("background-color"); $(this).css("background-color", background_color); }); } } }); $(".x-table tr").bind("mouseleave", function() { if(typeof($(this).attr("id")) != "undefined") { $last_tr = $(this); } }); }, 1000); 3. 预览效果 3.1 PC 端https://help.fanruan.com/uploads/201808/20180813154724_3240.gif 3.2 移动端注:示例中的 JS 不支持移动端。 4. 已完成模板已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\27-决策报表里使用延时函数实现某些js效果.frm 模板下载见附件 编辑于 2020-12-28 17:34
【表单JS实例】JS实现隐藏tab块标题
1.1 问题描述用户希望可以自定义设置 Tab 的展现与隐藏,比如不同用户可以查看不同的 Tab 块,或者隐藏一些无关 Tab 页的内容,该如何实现呢?1.2 解决思路通过 JS 隐藏 Tab 标题。注:通过 JS 的方法,可能导致 Tab 内部组件不能根据正确的宽高进行自适应,因此建议通过设计器自带属性——设置 tabpane 高度为 0 的方法,来实现隐藏。 详情请参考:Tab 布局 第 3.6 章。注:此功能不支持移动端和 HTML5 方式预览。 2. 示例:隐藏整个 Tab 标题 2.1 打开模板打开模板 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\analytics\financial2\生产库存分析.frm下载模板见附件2.2 添加初始化事件在决策报表右上角控件设置中,选择 tabpane0 控件,添加初始化事件,如下图所示:https://help.fanruan.com/uploads/201808/20180813111958_8153.png JAR 包在 2018-1-24 之前,隐藏 Tab 标题的 JS 代码如下:$('div:lt(1)',this.element.parent()).hide();//隐藏 Tab 标题JAR 包在 2018-1-24 及之后,隐藏 Tab 标题的 JS 代码如下:this.element.parent().hide();注:是添加到 tabpane 块组件的初始化事件,不是 Tab 块里面的每个 Tab 页签的初始化事件。2.3 效果预览保存模板,预览效果如下图所示:https://help.fanruan.com/uploads/201808/20180813111958_4616.jpg3. 已完成模板已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\12-JS实现隐藏tab块标题-示例一.frm 下载模板见附件 编辑于 2020-12-28 15:08
12345下一页
个人成就
内容被浏览3,431,163
加入社区4年74天
返回顶部