反馈已提交

网络繁忙

鼠标点击/悬浮时修改单元格背景接口

  • 文档创建者:RosieY
  • 历史版本:15
  • 最近更新:Catqiu 于 2024-01-05
  • 版本


    版本功能变动
    11.0

    和 10.0 区别:

    新增 addEffect 接口

    11.0.7移动端, APP\H5 版本 11.0.70 及以后支持该接口。
    安装了「FineVis数据可视化」插件 V1.8.0 及之后版本,FVS 可视化看板支持使用 addEffect 接口修改单元格背景、单元格字体。

    在使用接口前,请务必先仔细阅读 JS API 兼容说明,接口默认支持普通报表和决策报表(新版)。

    注:该接口不支持和自定义滚动条插件同时使用。

    addEffect

    方法addEffect(type, opts)

    鼠标点击或者悬浮时,单元格或所在行列背景颜色变化

         参数

    type: string,

    opts: {

    color: string, 

    trigger: string,

    single: boolean

    }

    type:变色类型,字符串

    • highlightRow:鼠标点击/悬浮时单元格所在行变色

    • highlightCol:鼠标点击/悬浮时单元格所在列变色

    • highlightCross:鼠标点击/悬浮时单元格所在行列变色

    • highlightCell:鼠标点击/悬浮时单元格变色

    opts:变化属性,json 格式

    1)color: 变化的颜色,颜色代码,字符串

    2)trigger: 鼠标的操作,字符串,默认为鼠标悬浮

    • mouseover :鼠标悬浮

    • mousedown:鼠标点击

    3)single:恢复逻辑,布尔型,默认 true

    • true:鼠标点击/悬浮其他位置时恢复

    • false:鼠标再次点击/悬浮此位置时恢复

       返回值void
         示例

    见示例章节

      应用示例

    鼠标悬浮单元格时,所在行显示红色,鼠标离开时恢复:

    更多示例见示例章节。

    2021-09-10_10-38-17.gif

       移动端APP\H5 版本 11.0.70 及以后支持该接口。

    以下内容为接口示例,分单元格所在行变色、单元格所在列变色、单元格所在行列变色、单元格变色,分别对应 type 参数的四个值。

    单元格所在行变色

    addEffect 第一个参数 type 值为 highlightRow 时,鼠标点击或者悬浮单元格,单元格所在行背景颜色发生改变。

    代码示例

    示例1:若获取到的报表对象定义为 report ,鼠标悬浮单元格时所在行背景显示为红色,离开时恢复

    report.addEffect('highlightRow',{
    color: 'red',
    trigger: 'mouseover',
    });

    示例2:若获取到的报表对象定义为 report ,鼠标点击单元格时所在行背景显示为红色,再次点击恢复

    report.addEffect('highlightRow',{
    color: 'red',
    trigger: 'mousedown',
    single:false
    });

    示例3:普通报表中,鼠标悬浮单元格时,所在行背景显示为红色,离开时恢复

    _g().addEffect('highlightRow', {
    color: 'red',
    trigger: 'mouseover',
    });

    示例4:普通报表中,鼠标点击单元格时,所在行背景显示为红色,再次点击恢复

    _g().addEffect('highlightRow',{
    color: 'red',
    trigger: 'mousedown',
    single:false
    });

    示例5:决策报表中,鼠标悬浮 report0 报表块单元格时,所在行背景显示为红色,离开时恢复

    _g().getWidgetByName('report0').addEffect('highlightRow', {
    color: 'red',
    trigger: 'mouseover',
    });

    示例6:决策报表中,鼠标点击 report0 报表块单元格时,所在行背景显示为红色,再次点击恢复

    _g().getWidgetByName('report0').addEffect('highlightRow', {
    color: 'red',
    trigger: 'mousedown',
    single: false
    });

    示例7:在FVS中,鼠标点击表格1单元格时,所在行背景显示为红色,再次点击恢复

    duchamp.getWidgetByName("表格1").addEffect('highlightRow', {
    color: 'red',
    trigger: 'mousedown',
           single:false
    });

    应用示例

    示例1:鼠标悬浮单元格时,所在行背景颜色显示为红色,离开时恢复

    点击下载模板:单元格所在行变色.cpt

    2021-09-10_10-38-17.gif

    示例2:鼠标点击单元格时,所在行背景颜色显示为红色,再次点击恢复

    点击下载模板:单元格所在行变色鼠标点击恢复.cpt

    2021-09-10_13-38-30.gif

    单元格所在列变色

    addEffect 第一个参数 type 值为 highlightCross 时,鼠标点击或者悬浮单元格,单元格所在的列背景颜色发生改变。

    代码示例

    示例1:若获取到的报表对象定义为 report ,鼠标悬浮单元格时所在列背景颜色显示为红色,离开时恢复

    report.addEffect('highlightCol',{
    color: 'red',
    trigger: 'mouseover',
    });

    示例2:若获取到的报表对象定义为 report ,鼠标点击单元格时所在列背景颜色显示为红色,再次点击恢复

    report.addEffect('highlightCol',{
    color: 'red',
    trigger: 'mousedown',
    single:false
    });

    示例3:普通报表中,鼠标悬浮单元格时,所在列背景颜色显示为红色,离开时恢复

    _g().addEffect('highlightCol', {
    color: 'red',
    trigger: 'mouseover',
    });

    示例4:普通报表中,鼠标点击单元格时,所在列背景颜色显示为红色,再次点击恢复

    _g().addEffect('highlightCol',{
    color: 'red',
    trigger: 'mousedown',
    single:false
    });

    示例5:决策报表中,鼠标悬浮 report0 报表块单元格时,所在列背景颜色显示为红色,离开时恢复

    _g().getWidgetByName('report0').addEffect('highlightCol', {
    color: 'red',
    trigger: 'mouseover',
    });

    示例6:决策报表中,鼠标点击 report0 报表块单元格时,所在列背景颜色显示为红色,再次点击恢复

    _g().getWidgetByName('report0').addEffect('highlightCol', {
    color: 'red',
    trigger: 'mousedown',
    single: false
    });

    示例7:在 FVS 中,鼠标点击表格1单元格时,所在列背景显示为红色,再次点击恢复

    duchamp.getWidgetByName("表格1").addEffect('highlightCol', {
    color: 'red',
    trigger: 'mousedown',
           single:false
    });

    应用示例

    示例1:鼠标悬浮单元格时,所在列背景颜色显示为红色,离开时恢复

    点击下载模板:单元格所在列变色.cpt

    2021-09-10_11-51-00.gif

    示例2:鼠标点击单元格时,所在列背景颜色显示为红色,再次点击恢复

    点击下载模板:单元格所在列变色鼠标点击恢复.cpt

    2021-09-10_13-51-35.gif

    单元格所在行列变色

    addEffect 第一个参数 type 值为 highlightCol 时,鼠标点击或者悬浮单元格,单元格所在的行列背景颜色发生改变。

    代码示例

    示例1:若获取到的报表对象定义为 report ,鼠标悬浮单元格时所在行列背景颜色显示为红色,离开时恢复

    report.addEffect('highlightCross',{
    color: 'red',
    trigger: 'mouseover',
    });

    示例2:若获取到的报表对象定义为 report ,鼠标点击单元格时所在行列背景颜色显示为红色,再次点击恢复

    report.addEffect('highlightCross',{
    color: 'red',
    trigger: 'mousedown',
    single:false
    });

    示例3:普通报表中,鼠标悬浮单元格时,所在行列背景颜色显示为红色,离开时恢复

    _g().addEffect('highlightCross', {
    color: 'red',
    trigger: 'mouseover',
    });

    示例4:普通报表中,鼠标点击单元格时,所在行列背景颜色显示为红色,再次点击恢复

    _g().addEffect('highlightCross',{
    color: 'red',
    trigger: 'mousedown',
    single:false
    });

    示例5:决策报表中,鼠标悬浮 report0 报表块单元格时,所在行列背景颜色显示为红色,离开时恢复

    _g().getWidgetByName('report0').addEffect('highlightCross', {
    color: 'red',
    trigger: 'mouseover',
    });

    示例6:决策报表中,鼠标点击 report0 报表块单元格时,所在行列背景颜色显示为红色,再次点击恢复

    _g().getWidgetByName('report0').addEffect('highlightCross', {
    color: 'red',
    trigger: 'mousedown',
    single: false
    });

    示例7:在FVS中,鼠标点击表格1单元格时,所在行列背景颜色显示为红色,再次点击恢复

    duchamp.getWidgetByName("表格1").addEffect('highlightCross', {
    color: 'red',
    trigger: 'mousedown',
           single:false
    });

    应用示例

    示例1:鼠标悬浮单元格时,所在行列背景颜色显示为红色,离开时恢复

    点击下载模板:单元格所在行列变色.cpt

    2021-09-10_14-09-57.gif

    示例2:鼠标点击单元格时,所在行列背景颜色显示为红色,再次点击恢复

    点击下载模板:单元格所在行列变色鼠标点击恢复.cpt

    2021-09-10_14-20-14.gif

    单元格变色

    addEffect 第一个参数 type 值为 highlightCell 时,鼠标点击或者悬浮单元格,单元格背景颜色发生改变。

    代码示例

    示例1:若获取到的报表对象定义为 report ,鼠标悬浮单元格时单元格背景颜色显示为红色,离开时恢复

    report.addEffect('highlightCell',{
    color: 'red',
    trigger: 'mouseover',
    });

    示例2:若获取到的报表对象定义为 report ,鼠标点击单元格时单元格背景颜色显示为红色,再次点击恢复

    report.addEffect('highlightCell',{
    color: 'red',
    trigger: 'mousedown',
    single:false
    });

    示例3:普通报表中,鼠标悬浮单元格时单元格背景颜色显示为红色,离开时恢复

    _g().addEffect('highlightCell', {
    color: 'red',
    trigger: 'mouseover',
    });

    示例4:普通报表中,鼠标点击单元格时单元格背景颜色显示为红色,再次点击恢复

    _g().addEffect('highlightCell',{
    color: 'red',
    trigger: 'mousedown',
    single:false
    });

    示例5:决策报表中,鼠标悬浮 report0 报表块单元格时单元格背景颜色显示为红色,离开时恢复

    _g().getWidgetByName('report0').addEffect('highlightCell', {
    color: 'red',
    trigger: 'mouseover',
    });

    示例6:决策报表中,鼠标点击 report0 报表块单元格时单元格背景颜色显示为红色,再次点击恢复

    _g().getWidgetByName('report0').addEffect('highlightCell', {
    color: 'red',
    trigger: 'mousedown',
    single: false
    });

    示例7:在FVS中,鼠标点击表格1单元格时单元格背景颜色显示为红色,再次点击恢复

    duchamp.getWidgetByName("表格1").addEffect('highlightCell', {
    color: 'red',
    trigger: 'mousedown',
           single:false
    });

    应用示例

    示例1:鼠标悬浮单元格时单元格背景颜色显示为红色,离开时恢复:

    点击下载模板:单元格变色鼠标离开恢复.cpt

    2021-12-16_16-35-39.gif

    示例2:鼠标点击单元格时单元格背景颜色显示为红色,再次点击恢复

    点击下载模板:单元格变色鼠标点击恢复.cpt

    2021-09-10_11-34-36.gif

    注意事项

    1)当报表中设置了单元格所在行变色,同时设置了冻结列,冻结列会将一行分割成A、B两部分,接口对A、B两部分分别生效,如下图所示:

    2023-03-15_16-37-33.png

    2)当报表中设置了单元格所在列变色,同时设置了冻结行,冻结行会将一行分割成A、B两部分,接口对A、B两部分分别生效,与第1)节原理相同。

    3)当开启新计算引擎时,接口不受冻结行或冻结列影响。

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持