历史版本15 :表格行列对象接口 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

版本编辑

报表服务器版本移动端版本功能变动
11.0.1011.0.70普通报表支持setHeight、getHeight、getCell、setWidth、getWidth、getCell、getIndex、setStyle、showToolTip 接口。
11.0.7-安装了「FVS大屏编辑模式」插件 V1.8.0 及之后版本,FVS大屏模板支持 setHeight、getHeight、getCell、setWidth、getWidth、getIndex、setStyle、showToolTip 接口。
11.0.7-决策报表新增 setHeight、getHeight、getCell、setWidth、getWidth、getCell、getIndex、setStyle、showToolTip 接口。
11.0
-

和 10.0 区别:

10.0 无此类接口

注:FVS 大屏编辑模式插件不支持移动端 ,以下 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」组件第 3 行的行高设置为 40:

duchamp.getWidgetByName("表格1").getRow(3).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.getHeight();

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

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

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

_g().getColumn(3).getHeight();

示例4:获取 FVS 大屏模板中的「表格1」组件第 3 列的列宽

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

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

var a=_g().getWidgetByName('report0').getColumn(1).getHeight();
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:将决策报表中 report0 报表块第 1 列第 1 行的单元格的字体设置为红色、14 号

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

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

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

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 列的列索引

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

点击按钮,获取决策报表中将 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: { 

    }

}

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

   移动端支持移动端