反馈已提交

网络繁忙

修改单元格背景接口

  • 文档创建者:RosieY
  • 编辑次数:6次
  • 最近更新:RosieY 于 2022-05-17
  • 版本

    版本功能变动
    11.0

    和 10.0 区别:

    新增 addEffect 接口

    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

       移动端支持移动端


    以下内容为接口示例,分单元格所在行变色、单元格所在列变色、单元格所在行列变色、单元格变色,分别对应 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
    });

    应用示例

    示例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
    });

    应用示例

    示例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
    });

    应用示例

    示例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
    });

    应用示例

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

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

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

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

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

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

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

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

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

    不再提示

    10s后关闭