反馈已提交

网络繁忙

表格行列对象接口

  • 文档创建者:RosieY
  • 历史版本:31
  • 最近更新:Carly 于 2024-09-11
  • 版本

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

    和 10.0 区别:

    10.0 无此类接口

    11.0.7-决策报表新增 setHeight、getHeight、getCell、setWidth、getCell、getIndex、setStyle、showToolTip 接口
    11.0.7-FineVis数据可视化」插件 V1.8.0 及之后版本,FVS 可视化看板支持 setHeight、getHeight、getCell、setWidth、getWidth、getIndex、setStyle、showToolTip 接口
    11.0.1011.0.70普通报表支持setHeight、getHeight、getCell、setWidth、getWidth、getCell、getIndex、setStyle、showToolTip 接口
    11.0.14-决策报表支持getWidth

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

    setHeight

    方法setHeight(height)

    设置单元格行高,需要先通过 getRow(index) 方法获取到单元格行。

         参数

    height: number

    height:  行高

       返回值void
         示例

    示例1:若获取到的表格行对象定义为 row ,将该行行高设置为 25

    row.setHeight(25);

    示例2:决策报表中将 report0 报表块第 3 行的行高设置为 25

    _g().getWidgetByName('report0').getRow(3).setHeight(25);

    示例3:普通报表中将第3行的行高设置为 25

    _g().getRow(3).setHeight(25);

    示例4:将 FVS 可视化看板中的「表格1」组件第 1 行的行高设置为 40:

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

    示例5:决策报表将 report0 报表块第 1 行的行高设置为 45

    _g().getWidgetByName('report0').getRow(1).setHeight(45);
      应用示例

    点击按钮,将第 1 行的行高设置为 45:

    点击下载模板:点击修改单元格行高.frm

    FVS 可视化看板:点击修改单元格行高.fvs

    2022-08-23_14-28-40.gif

    注:该接口不支持冻结列的情况

       移动端不支持移动端

    getHeight

    方法getHeight()

    获取单元格行高,需要先通过 getRow(index) 方法获取到单元格行。

         参数

    -

    -

       返回值number行高,数字
         示例

    示例1:若获取到的表格行对象定义为 row ,获取该行的行高

    row.getHeight();

    示例2:获取决策报表中将 report0 报表块第 3 行的行高

    _g().getWidgetByName('report0').getRow(3).getHeight();

    示例3:获取普通报表中第 3 行的行高:

    _g().getRow(3).getHeight();

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

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

    示例5:获取决策报表 report0 报表块第 1 行的行高后弹窗显示

    var a=_g().getWidgetByName('report0').getRow(1).getHeight();
    FR.Msg.alert("提示","第一行的行高是"+a );
      应用示例

    点击按钮,获取决策报表 report0 报表块第 1 行的行高后弹窗显示:

    点击可下载模板:获取第一行单元格行高.frm

    FVS 可视化看板:点击获取单元格行高.fvs

    2022-08-23_14-59-40.gif

       移动端支持移动端

    setWidth

    方法setWidth(width)

    设置单元格列宽,需要先通过 getColumn(index) 方法获取到单元格列。

         参数

    width: number

    width:  列宽度

       返回值void
         示例

    示例1:若获取到的表格列对象定义为 col ,将该列列宽设置为 25

    col.setWidth(25);

    示例2:决策报表中将 report0 报表块第 3 列的列宽设置为 25

    _g().getWidgetByName('report0').getColumn(3).setWidth(25);

    示例3:将普通报表中第 3 列的列宽设置为 25

    _g().getColumn(3).setWidth(25);

    示例4: FVS 可视化看板中的「表格1」组件第 3 列的列宽设置为 45

    duchamp.getWidgetByName("表格1").getColumn(3).setWidth(45);

    示例5:决策报表将 report0 报表块第 1 列的列宽设置为 45

    _g().getWidgetByName('report0').getColumn(1).setWidth(45);
      应用示例

    点击按钮,将第 1 列的列宽设置为 45:

    点击下载模板:点击修改单元格列宽.frm

    FVS 可视化看板:点击修改单元格列宽.fvs

    2022-08-23_15-36-07.gif

    注:该接口不支持冻结行的情况

       移动端不支持移动端

    getWidth

    方法getWidth()

    获取单元格列宽,需要先通过 getColumn(index) 方法获取到单元格列。

         参数

    -

    -

       返回值number列宽,数字
         示例

    示例1:若获取到的表格列对象定义为 col ,获取该列的列宽

    row.getWidth();

    示例2:获取决策报表中将 report0 报表块第 3 列的列宽

    _g().getWidgetByName('report0').getColumn(3).getWidth();

    示例3:获取普通报表第 3 列的列宽

    _g().getColumn(3).getWidth();

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

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

    示例5:获取决策报表 report0 报表块第 1 列的列宽后弹窗显示

    var a=_g().getWidgetByName('report0').getColumn(1).getWidth();
    FR.Msg.alert("提示","第一列的列宽是"+a );
      应用示例

    点击按钮,获取决策报表 report0 报表块第 3 列的列宽后弹窗显示:

    点击可下载模板:获取第一列单元格列宽.frm

    FVS 可视化看板:获取单元格列宽.fvs

    2022-08-23_15-49-10.gif

       移动端支持移动端

    getCell

    方法

    getCell(row/col)

    获取单元格某一列上第 row 行的单元格对象/某一行上第 col 列的单元格对象,需要先通过 getColumn(index)/getRow(index)方法获取到单元格列/行其中参数为单元格扩展后的位置

         参数

    row:number

    col:number

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

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

       返回值

    object

    object :单元格 cell 对象
         示例

    示例1:若获取到的表格列对象定义为 col ,获取该列上第 1 行的单元格

    col.getCell(1);

    示例2:若获取到的表格行对象定义为 row ,获取该行上第 1 列的单元格

    row.getCell(1);

    示例3:获取决策报表中 report0 报表块第 1 行第 1 列的单元格

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

    或者:

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

    示例4:获取普通报表中第 1 行第 1 列的单元格

    _g().getRow(1).getCell(1);

    或者:

    _g().getColumn(1).getCell(1);

    示例5:将 FVS 模板中「表格组件」第 2 列第 1 行的单元格的字体设置为红色、14 号

    duchamp.getWidgetByName("表格组件").getColumn(2).getCell(1).setStyle({
    fontSize: 14,
    color: 'red'
    });

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

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


      应用示例

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

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

    点击下载 FVS 模板:获取列再定位到行后修改单元格样式.fvs

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

       移动端支持移动端

    getIndex

    方法

    getIndex()

    获取单元格行对象/单元格列对象的位置索引,如扩展后单元格在第 4 行,则行索引为 4

         参数

    -

    -

       返回值

    object

    行索引/列索引,数字,为扩展后的行列
         示例

    示例1:若获取到的表格行对象定义为 row ,返回该行索引

    row.getIndex();

    示例2:若获取到的表格列对象定义为 col ,获取该列的列索引

    col.getIndex();

    示例3:获取普通报表中第 1 行的行索引

    _g().getRow(1).getIndex();

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

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

    示例5:获取决策报表中 report0 报表块第 1 行的行索引

    var a=_g().getWidgetByName('report0').getRow(1).getIndex();
    FR.Msg.alert("提示","第一列的行索引是"+a );
      应用示例

    点击按钮,获取决策报表中将 report0 报表块第 1 行的行索引

    点击可下载模板:返回行列索引.frm

    FVS 可视化看板:获取表格行索引.fvs

    2022-08-23_16-49-31.gif

       移动端支持移动端

    setStyle

    方法

    setStyle(opts)

    设置单元格行/列对象的样式。在行列对象上使用时,需要先通过 getRow(index)/getColumn(index) 方法获取到单元格行/列。

         参数

    opts: Object

    {

        fontFamily: String

        fontSize: number

        fontWeight: String

        color: String

      ........

    }

    opts: 单元格格式属性,如边框、背景、字体颜色等,详细可查看:样式属性style

       返回值

    -

    -
         示例

    示例1:若获取到的单元格行对象定义为 row ,设置该单元格的样式为字体颜色红色、字号14 号

    cell.setStyle({
    fontSize: 14,
    color: 'red'
    });

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

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

    示例3:将普通报表第一行单元格的样式设置为字体颜色红色、字号14 号

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

    示例4: FVS 可视化看板中的「表格1」组件第一列单元格的样式设置为字体颜色红色、字号 20 号

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

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

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

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

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

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

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

       移动端支持移动端

    showToolTip

    方法

    showToolTip(opts)

    给报表块单元格行/列添加提示。在行列对象上使用时,需要先通过 getRow(index)/getColumn(index) 方法获取到单元格行/列。

         参数

    opts: Object

    {

        show: boolean,

        content: { 

            text: string, // 文字

            image: string, // 图片

            header: string // 标题

        }

        style: { 

        }

    }

    注:普通报表不支持 header 和 image 参数

    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:将获取到的报表块行对象定义为 row,为行对象设置一个标题为“提示”,内容为红色“地区销售数据”字样的提示框: 

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

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

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

    示例3:给决策报表中 report0 报表块第 1 列单元格设置一个标题为“提示”,内容为网页图片帆软 LOG 的提示框: 

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

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

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

    示例5:给 FVS 可视化看板中的「表格1」组件第 1 列单元格设置一个标题为“提示”,内容为网页图片帆软 LOG 的提示框

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

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

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

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

    2022-08-23_17-45-39.gif

       移动端不支持移动端

    附件列表


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

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

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

    不再提示

    10s后关闭



    AI

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