反馈已提交

网络繁忙

表格对象接口

  • 文档创建者:RosieY
  • 历史版本:34
  • 最近更新:帆软应用复用-Cat 于 2023-12-18
  • 版本

    报表服务器版本移动端版本功能变动
    11.0
    -

    和 10.0 区别:

    10.0 无此类接口

    11.0.7-决策报表新增支持 getCell、getRow、getColumn、getRowCount、getColumnCount、onMouseClick、onMouseMoveInCell、onMouseMoveOutCell、scrollTo、getScrollOffset、setRadius、showToolTip 接口。
    11.0.7-

    安装了「FineVis数据可视化」插件 V1.8.0 及之后版本,FVS 可视化看板支持 getCell、getRow、getColumn、getRowCount、getColumnCount、onMouseClick、onMouseMoveInCell、scrollTo、getScrollOffset、setRadius、showToolTip 接口。

    11.0.1011.0.70普通报表支持getCell、getRow、getColumn、getRowCount、getColumnCount、onMouseClick、onMouseMoveInCell、onMouseMoveOutCell、scrollTo、getScrollOffset、setRadius、showToolTip 接口。

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

    getCell

    方法

    getCell(row,col)

    获取第 row 行, 第 col 列的单元格对象,其中参数为单元格扩展后的位置。获取单元格对象后,可以使用报表块单元格对象接口对单元格进行设置。

         参数

    row:number

    col:number

    注: 合并的单元格,col、row 需要输入合并后单元格的首行号/首列号,否则返回 undefined

    row:单元格行号,数字,从 1 开始

    col:单元格列号,数字,从 1 开始

       返回值

    object

    object :单元格 cell 对象
         示例

    示例1:若获取到的报表块定义为 report,获取该报表块的 A1 单元格

    report.getCell(1,1);

    示例2:决策报表中获取 report0 报表块中 A1 单元格

    _g().getWidgetByName('report0').getCell(1,1);

    示例3:普通报表中获取 A1 单元格

    _g().getCell(1,1);

    示例4:将普通报表中 A1 单元格的字体设置为红色、14 号

    _g().getCell(1,1).setStyle({
    fontSize: 14,
    color: 'red'
    });

    示例5:将决策报表中 report0 报表块 A1 单元格的字体设置为红色、14 号

    _g().getWidgetByName('report0').getCell(1,1).setStyle({
    fontSize: 14,
    color: 'red'
    });

    示例6:获取 FVS可视化看板中「表格1」组件中 A1 单元格

    duchamp.getWidgetByName("表格1").getCell(1,1);

    示例7:将 FVS 可视化看板中「表格1」组件 A1 单元格的字体设置为红色、20 号

    duchamp.getWidgetByName("表格1").getCell(1,1).setStyle({
    fontSize: 20,
    color: 'red'
    });
      应用示例

    点击按钮,将决策报表中 report0 报表块 A1 单元格的字体设置为红色、14 号:

    点击可下载模板:获取单元格后修改单元格样式.frm

    FVS 可视化看板:JS修改表格组件单元格样式.fvs

    2022-08-16_19-47-08.gif

       移动端支持移动端

    getRow

    方法

    getRow(index)

    获取第 index 行所有单元格对象,其中参数为单元格扩展后的行号。获取单元格对象后,可以使用报表块单元格对象接口对单元格进行设置。

         参数

    index:number

    index:行号,数字,从 1 开始

       返回值

    object

    object :单元格行对象
         示例

    示例1:若获取到的报表块定义为 report,获取该报表块第一行单元格对象

    report.getRow(1);

    示例2:决策报表中获取 report0 报表块中第一行单元格对象

    _g().getWidgetByName('report0').getRow(1);

    示例3:普通报表中获取第一行单元格对象

    _g().getRow(1);

    示例4:将普通报表中,第一行单元格的字体都设置为红色、14号

    _g().getRow(1).setStyle({
    fontSize: 14,
    color: 'red'
    });

    示例5:将决策报表中 report0 报表块的第一行单元格的字体都设置为红色、14 号

    _g().getWidgetByName('report0').getRow(1).setStyle({
    fontSize: 14,
    color: 'red'
    });

    示例6:获取 FVS 可视化看板中「表格1」组件中第一行单元格对象

    duchamp.getWidgetByName("表格1").getRow(1);

    示例7:将 FVS 可视化看板中「表格1」组件的第一行单元格的字体都设置为红色、20 号

    duchamp.getWidgetByName("表格1").getRow(1).setStyle({
    fontSize: 20,
    color: 'red'
    });
      应用示例

    点击按钮,将决策报表中 report0 报表块的第一行单元格的字体都设置为红色、14 号:

    点击可下载模板:获取行后修改行单元格样式.frm

    FVS 可视化看板:JS修改表格组件行单元格样式.fvs

    2022-08-16_21-17-07.gif

       移动端支持移动端

    getColumn

    方法

    getColumn(index)

    获取第 index 列所有单元格对象,其中参数为单元格扩展后的列号。获取单元格对象后,可以使用报表块单元格对象接口对单元格进行设置。

         参数

    index:number

    index:列号,数字,从 1 开始

       返回值

    object

    object :单元格列对象
         示例

    示例1:若获取到的报表块定义为 report,获取该报表块第一列单元格对象

    report.getColumn(1);

    示例2:决策报表中获取 report0 报表块中第一列单元格对象

    _g().getWidgetByName('report0').getColumn(1);

    示例3:普通报表中获取第一列单元格对象

    _g().getColumn(1)

    示例4:将普通报表中,第一列单元格的字体都设置为红色、14 号

    _g().getColumn(1).setStyle({
    fontSize: 14,
    color: 'red'
    });

    示例5:将决策报表中 report0 报表块的第一列单元格的字体都设置为红色、14 号

    _g().getWidgetByName('report0').getColumn(1).setStyle({
    fontSize: 14,
    color: 'red'
    });

    示例6:获取 FVS 可视化看板中「表格1」组件中第一列单元格对象

    duchamp.getWidgetByName("表格1").getColumn(1);

    示例7:将 FVS 可视化看板中「表格1」的第一列单元格的字体都设置为红色、20 号

    duchamp.getWidgetByName("表格1").getColumn(1).setStyle({
    fontSize: 20,
    color: 'red'
    });
      应用示例

    点击按钮,将决策报表中 report0 报表块的第一列单元格的字体都设置为红色、14 号:

    点击可下载模板:获取列后修改列单元格样式.frm

    FVS 可视化看板:JS修改表格组件列单元格样式.fvs

    2022-08-16_21-46-29.gif

       移动端支持移动端

    getRowCount

    方法

    getRowCount()

    获取报表块共有多少行,计算的是扩展后的行数

    注:分页预览下仅获取当前页展示的总行数。

         参数

    -

    -

       返回值

    number

    报表块的总行数,数字
         示例

    示例1:若获取到的报表块定义为 report,获取该报表块的总行数

    report.getRowCount();

    示例2:决策报表中获取 report0 报表块的总行数

    _g().getWidgetByName('report0').getRowCount();

    示例3:普通报表中,获取单元格行数:

    _g().getRowCount();

    示例4:获取 FVS 可视化看板中「表格1」组件的总行数

    duchamp.getWidgetByName("表格1").getRowCount();

    示例5:获取决策报表中 report0 报表块的总行数后,通过弹窗显示总行数

    var a=_g().getWidgetByName('report0').getRowCount();
    FR.Msg.alert("提示","报表块共"+a +"行");
      应用示例

    点击按钮,获取决策报表中 report0 报表块的总行数:

    点击可下载模板:获取表格共有多少行.frm

    FVS 可视化看板:JS获取表格组件总行数.fvs

    2022-08-17_9-11-21.gif

       移动端支持移动端

    getColumnCount

    方法

    getColumnCount()

    获取报表块共有多少列,计算的是扩展后的列数

    注:分页预览下仅获取当前页展示的总列数。

         参数

    -

    -

       返回值

    number

    报表块的总列数,数字
         示例

    示例1:若获取到的报表块定义为 report,获取该报表块的总列数

    report.getColumnCount();

    示例2:获取决策报表中 report0 报表块的总列数

    _g().getWidgetByName('report0').getColumnCount();

    示例3:普通报表中,获取单元格行数

    _g().getColumnCount();

    示例4:获取 FVS 可视化看板中「表格1」组件的总列数

    duchamp.getWidgetByName("表格1").getColumnCount();

    示例5:获取决策报表中 report0 报表块的总列数后,通过弹窗显示总列数

    var a=_g().getWidgetByName('report0').getColumnCount();
    FR.Msg.alert("提示","报表块共"+a +"列");
      应用示例

    点击按钮,获取决策报表中 report0 报表块的总列数:

    点击可下载模板:获取表格共有多少列.frm

    FVS 可视化看板:JS获取表格组件总列数.fvs

    2022-08-17_9-33-57.gif

       移动端支持移动端

    onMouseClick

    方法

    onMouseClick(func)

    用于绑定鼠标/手指点击事件,当鼠标/手指点击表格时,触发绑定的这个事件

         参数

    func:Function

    func:回调方法,函数形式

       返回值

    -

    -
         示例

    示例1:若获取到的报表块定义为 report,给该报表块绑定一个点击后弹窗提醒的事件

    report.onMouseClick(
    function() {
    FR.Msg.alert("警告", "不要乱动");
    }
    );

    示例2:给决策报表中 report0 报表块绑定一个点击后弹窗提醒的事件

    _g().getWidgetByName('report0').onMouseClick(
    function() {
    FR.Msg.alert("警告","不要乱动");
    }
    );

    示例3:给普通报表绑定一个点击后弹窗提醒的事件

    _g().onMouseClick(
    function() {
    FR.Msg.alert("警告","不要乱动");
    }
    );

    示例4:给 FVS 可视化看板中「表格1」组件绑定一个点击后弹窗提醒的事件

    duchamp.getWidgetByName("表格1").onMouseClick(
        function() {
    duchamp.Msg.alert({
               title: "警告" ,
               message:"不要乱动"});
    }
    );

    示例5:给决策报表 report0 报表块绑定一个点击后开启跑马灯的事件

    _g().getWidgetByName('report0').onMouseClick(
    function() {
    _g().getWidgetByName('report0').startMarquee()
    }
    );
      应用示例

    给决策报表 report0 报表块绑定点击后开启跑马灯的事件,当鼠标点击报表块时,开启跑马灯:

    点击可下载模板:点击表格开启跑马灯.frm

    FVS 可视化看板:点击表格开启跑马灯.fvs

    2022-08-17_11-05-33.gif

       移动端不支持移动端

    onMouseMoveInCell

    方法

    onMouseMoveInCell(func)

    用于绑定鼠标/手指移入单元格事件,当鼠标/手指移入单元格时,触发绑定的这个事件

         参数

    func:Function

    func:回调方法,函数形式

       返回值

    -

    -
         示例

    示例1:若获取到的报表块定义为 report,给该报表块绑定一个移入表格后弹窗提醒的事件

    report.onMouseMoveInCell(
    function() {
    FR.Msg.alert("警告", "不要乱动");
    }
    );

    示例2:给决策报表中 report0 报表块绑定一个鼠标移入后弹窗提醒的事件

    _g().getWidgetByName('report0').onMouseMoveInCell(
    function() {
    FR.Msg.alert("警告","不要乱动");
    }
    );

    示例3:给普通报表绑定一个鼠标移入后弹窗提醒的事件

    _g().onMouseMoveInCell(
    function() {
    FR.Msg.alert("警告", "不要乱动");
    }
    );

    示例4:给 FVS 可视化看板中「表格1」组件绑定一个移入表格后弹窗提醒的事件

    duchamp.getWidgetByName("表格1").onMouseMoveInCell(
        function() {
    duchamp.Msg.alert({
               title: "警告" ,
               message:"不要乱动"});
    }
    );

    示例5:给决策报表 report0 报表块绑定一个鼠标移入后开启跑马灯的事件

    _g().getWidgetByName('report0').onMouseMoveInCell(
    function() {
    _g().getWidgetByName('report0').startMarquee()
    }
    );
      应用示例

    给决策报表 report0 报表块绑定鼠标移入后弹窗事件,当鼠标移入报表块时,弹窗提醒:

    点击可下载模板:鼠标移入表格时弹窗提醒.frm

    FVS 可视化看板:鼠标移入表格组件弹窗提醒.fvs

    2022-08-17_14-21-58.gif

       移动端不支持移动端

    onMouseMoveOutCell

    方法

    onMouseMoveOutCell(func)

    用于绑定鼠标/手指移出单元格事件,当鼠标/手指移出单元格时,触发绑定的这个事件

         参数

    func:Function

    func:回调方法,函数形式

       返回值

    -

    -
         示例

    示例1:若获取到的报表块定义为 report,给该报表块绑定一个移出表格单元格后弹窗提醒的事件

    report.onMouseMoveOutCell(
    function() {
    FR.Msg.alert("警告", "你已不在表格上");
    }
    );

    示例2:给决策报表中 report0 报表块绑定一个移出表格单元格后弹窗提醒的事件

    _g().getWidgetByName('report0').onMouseMoveOutCell(
    function() {
    FR.Msg.alert("警告","你已不在表格上");
    }
    );

    示例3:给普通报表绑定一个鼠标移出后弹窗提醒的事件

    _g().onMouseMoveOutCell(
    function() {
    FR.Msg.alert("警告","你已不在表格上");
    }
    );

    示例4:给决策报表 report0 报表块绑定一个移出表格单元格后表格第一行颜色变化的事件:

    _g().getWidgetByName('report0').onMouseMoveOutCell(
    function() {
    _g().getWidgetByName('report0').getRow(1).setStyle({
    color: 'red'
    });
    }
    );

    示例5:给 FVS 可视化看板中「表格1」组件绑定一个移出单元格后第一行变色事件

    duchamp.getWidgetByName("表格1").onMouseMoveOutCell(
            function() {
                    duchamp.getWidgetByName("表格1").getRow(1).setStyle({
                            fontSize: 20,
                            color: 'red'
                    });
            }
    );


      应用示例

    给决策报表 report0 报表块绑定鼠标移出单元格后第一行变色事件,当鼠标移出 A1 单元格后,报表块第一行颜色变化成红色:

    点击可下载模板:鼠标移出表格时颜色变化.frm

    FVS 可视化看板:鼠标移出单元格颜色变化.fvs

    2022-08-17_15-51-12.gif

       移动端不支持移动端

    scrollTo

    方法

    scrollTo(opts)

    设置报表块滚动一段距离

         参数

    opts: Object 

    {

        x: number, 

        y: number 

    }

    opts:   滚动距离,json 格式

    • x:横向滚动距离,数字类型,可选字段,不指定则保持现状

    • y:垂直滚动距离,数字类型,可选字段,不指定则保持现状

       返回值

    -

    -
         示例

    示例1:若获取到的报表块定义为 report,设置该报表块横向滚动 50 纵向滚动 100 :

    report.scrollTo({
    x: 50,//横向
    y: 100 //纵向
    });

    示例2:将决策报表中 report0 报表块横向滚动 50 纵向滚动 100:

    _g().getWidgetByName('report0').scrollTo({
    x: 50,//横向
    y: 100 //纵向
    });

    示例3:将普通报表横向滚动 50 纵向滚动 100:

    _g().scrollTo({
    x: 50,//横向
    y: 100 //纵向
    });

    示例4:将 FVS 可视化看板中「表格1」组件横向滚动 50 纵向滚动 100:

    duchamp.getWidgetByName("表格1").scrollTo({
           x: 50,//横向
           y: 100 //纵向
    });

    示例5:将决策报表 report0 报表块横向滚动 50 纵向滚动 100:

    _g().getWidgetByName('report0').scrollTo({
    y: 100 //纵向
    });
      应用示例

    将决策报表 report0 报表块横向不变,纵向滚动 100:

    点击可下载模板:设置报表块自动滚动到某个位置.frm

    FVS 可视化看板:设置表格滚动到某个位置.fvs


       移动端支持移动端,FVS 插件仅 V2.1.0 及之后版本支持移动端

    getScrollOffset

    方法

    getScrollOffset()

    获取报表块滚动到的位置

         参数

    -

    -

       返回值

    opts: Object 

    {

        x: number, 

        y: number 

    }

    opts:   滚动位置,json 格式

    • x:横向滚动距离,数字类型,可选字段,不指定则保持现状

    • y:垂直滚动距离,数字类型,可选字段,不指定则保持现状

         示例

    示例1:若获取到的报表块定义为 report,获取该报表块当前滚动到的位置

    report.getScrollOffset();

    示例2:获取决策报表中 report0 报表块当前滚动到的位置

    _g().getWidgetByName('report0').getScrollOffset();

    示例3:获取普通报表当前纵向滚动条所在的位置

    var a=_g().getScrollOffset().y;
    FR.Msg.alert("提示","当前纵向位置"+a );

    示例4:获取 FVS 可视化看板中「表格1」组件当前纵向滚动到的位置

    duchamp.getWidgetByName("表格1").getScrollOffset().y;

    示例5:获取决策报表中 report0 报表块当前滚动到的位置并弹窗提醒当前位置

    var a=_g().getWidgetByName('report0').getScrollOffset().y;
    FR.Msg.alert("提示","当前纵向位置"+a );
      应用示例

    获取决策报表中 report0 报表块当前滚动到的位置并弹窗提醒当前位置:

    点击可下载模板:获取报表块滚动到的位置.frm

    FVS 可视化看板:获取表格滚动到的某个位置.fvs

    2022-08-17_17-02-56.gif

       移动端支持移动端,FVS 插件仅 V2.1.0 及之后版本支持移动端

    setRadius

    方法

    setRadius(radius, range, single)

    给报表所有单元格设置圆角,单元格必须有背景色,否则无法看出效果。

         参数

    radius: number

    range: Object 

    {

        row: [row1:number,row2:number,), 

        column: [column1:number,column  2:number], 

        cell: [col:number, row:number] 

    }

    single: boolean

    1)radius:圆角程度,数字

    2)range:圆角范围,json 格式,可选字段,默认为整个表格单元格

    • row:圆角行的范围,可选字段,代表 row1 行 到 row2 行,row1 和row2 都是数字

    • column:圆角列的范围,可选字段,代表 column1 列到 column2 列,column1 和 column2 都是数字

    • cell:圆角单元格的范围,可选字段,代表col 列,row 行的单元格,col 和 row 都是数字

    3)single: 决定圆角的形式,布尔型,默认为false

    • true:选区内每个单元格圆角

    • false:整个选区为圆角

       返回值

    -

    -

         示例

    示例1:若获取到的报表块定义为 report,给该报表块整体设置一个 25 的圆角:

    report.setRadius(25);

    示例2:给决策报表中 report0 报表块整体设置一个 25 的圆角:

    _g().getWidgetByName('report0').setRadius(25);

    示例3:给决策报表中 report0 报表块 A1 单元格设置一个 25 的圆角:

    _g().getWidgetByName('report0').setRadius(25, {
    cell: [1,1]
    }, false); 

    示例4:给决策报表中 report0 报表块第 1 行到第 3 行整体设置一个 25 的圆角:

    _g().getWidgetByName('report0').setRadius(25, {
    row: [1,3],
    }, false); 

    示例5:给决策报表中 report0 报表块第 2 列到第 5 列整体设置一个 25 的圆角:

    _g().getWidgetByName('report0').setRadius(25, {
    column: [2,5]
    }, false); 

    示例6:给普通报表第 1 行到第 3 行整体设置一个 25 的圆角:

    _g().setRadius(25, {
    row: [1,3],
    }, false); 

    示例7:给 FVS 可视化看板中「表格1」组件单元格整体设置一个 25 的圆角:

    duchamp.getWidgetByName("表格1").setRadius(25);
      应用示例

    点击按钮,给决策报表中 report0 报表块第 1 行设置一个 25 的圆角:

    点击可下载模板:设置单元格圆角.frm

    FVS 可视化看板:设置单元格行圆角.fvs

    2022-08-22_17-55-44.gif


       移动端不支持移动端

    showToolTip

    方法

    showToolTip(opts)

    设置报表块所有单元格提示

         参数

    opts: Object

    {

        show: boolean,

        content: { 

            text: string, // 文字

            image: string, // 图片

            header: string // 标题

        }

        style: { 

        }

    }

    opts: 弹窗选项,是个对象

    1)show:是否会出现弹窗,布尔型,true 为出现,false 为不出现

    2)content:可选字段,不指定即为显示文字,内容为单元格中的值

    • text: 提示的内容,字符串

    • image: 图片 URL 路径,字符串,图片格式支持 pn   g、jpg。图片来源可以为网页图片,如:

    https://www.fanruan.com/images/logo-fanruan.png

    也可以将图片放置在报表工程目录 %FR_HOME%\webapps\webroot 下,通过 URL 访问。如:

    http://localhost:8075/webroot/11.jpg
    • header: 标题

    3)style: 可选字段,不指定则为默认样式,支持的样式可参考:单元格样式属性style

       返回值

    -

    -

         示例

    示例1:若获取到的报表块定义为 report,给该报表块设置一个标题为“提示”,内容为红色“地区销售数据”字样的提示框: 

    report.showToolTip({
    show: true, // 是否会出现弹窗
    content: { // 可选字段,不指定即为显示文字
    text: "地区销售数据", // 文字
    header: "提示" // 标题
    },
    style: { // 可选字段,不指定为默认样式,支持css标准样式的字段
    color: "#DC143C"
    //符合css规则
    }
    });

    示例2:给决策报表中 report0 报表块设置一个标题为“提示”,内容为红色“地区销售数据”字样的提示框: 

    _g().getWidgetByName('report0').showToolTip({
    show: true, // 是否会出现弹窗
    content: { // 可选字段,不指定即为显示文字,内容为cell.getValue();
    text: "地区销售数据", // 文字
    header: "提示" // 标题
    },
    style: { // 可选字段,不指定为默认样式,支持css标准样式的字段
    color: "#DC143C"
    //符合css规则
    }
    });

    示例3:给普通报表设置一个标题为“提示”,内容为网页图片帆软 LOG 的提示框: 

    _g().showToolTip({
    show: true, // 是否会出现弹窗
    content: { // 可选字段,不指定即为显示文字,内容为cell.getValue();
    image: "https://www.fanruan.com/images/logo-fanruan.png",
    header: "提示" // 标题
    }
    });

    示例4:给决策报表中 report0 报表块设置一个没有标题,内容为红色“地区销售数据”字样的提示框: 

    _g().showToolTip({
    show: true, // 是否会出现弹窗
    content: { // 可选字段,不指定即为显示文字,内容为cell.getValue();
    image: "https://www.fanruan.com/images/logo-fanruan.png",
    header: "提示" // 标题
    }
    });

    示例5:给 FVS 可视化看板中「表格1」组件设置一个标题标题为“提示”,内容为单元格值默认样式的提示框

    duchamp.getWidgetByName("表格1").showToolTip({
    show: true, // 是否会出现弹窗
    content: { 
    header: "提示" // 标题
    }
    });


      应用示例

    给决策报表中 report0 报表块设置一个标题为“提示”,内容为红色“地区销售数据”字样的提示框: 

    点击可下载模板:鼠标悬浮单元格文字提示.frm

    FVS 可视化看板:鼠标悬浮单元格文字提示.fvs

    2022-08-23_12-02-58.gif

       移动端不支持移动端

    附件列表


    主题: 二次开发
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

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

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

    不再提示

    10s后关闭



    AI

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