联系
我们

工作日 9:00-18:00

13632615190

表格单元格格式化

在开发自己的业务系统的过程中,我们可能会有对表格(查询列表,可编辑子表,只读子表)单元格进行格式化的需求:根据条件显示不同的字体颜色。

需求场景:

比如查询列表的订单状态为“未支付”时显示红色,“已支付”时显示蓝色。

image.png

再比如可编辑子表中某个单元格的值满足某个条件(或者其他字段满足某个条件)后设置显示不同的颜色,比如下图中,当“数量大于20并且单价大于30”的时候,金额显示红色。

image.png


实现方法:

打开开发平台,选择对应要设置的表格后点击其属性“列设置”后面的按钮后进入“设置列表字段”窗口(下图是订单查询列表表格的“列设置”),选择要设置状态的列,每个列都有一个“格式化脚本”属性,可以设置格式化脚本,如下图:

image.png

比如我们要设置订单状态为“未支付”时显示红色,已支付时显示蓝色,则可以输入如下图所示的脚本。

image.png

脚本:

if(value=="未支付") {
    return ""+value+"";
} else if(value=="已支付") {
    return ""+value+"";
}

这段脚本是Javascript脚本,相信只要有一丁点Javascript知识都能看得懂,解读如下:

if(value == "未支付")的意思是,当这个单元格的值等于“未支付”时,执行下面大括号中的return ""+value+"";这里为了显示红色字体,我们使用了一个html标签进行封装,否则然后给html标签设置一个class="red"这个red是E6预定义好的CSS,所以可以直接使用。

下一个else if(value=="已支付") 的意思那就不需要再重述了,理解了上一个if这里应该都能理解。


上面这种方法是直接根据本单元格的值进行格式化,但是很多时候我们需要根据其他单元格的值来格式化本单元格,怎么实现呢?这就需要知道怎么读取其他单元格的值。比如我们前面说的当数量大于20并且单价大于30”的时候,金额显示红色的例子,我们根据数量和金额两个单元格的值做条件来设置金额单元格的值:

image.png

其格式化脚本如下:

if(row["__Amount__"] > 20 && row["__Price__"] > 30) {
    return ''+html+''
}

这里我们就不是直接使用value了,因为value指的是本单元格的值。

这里我们使用row["__Amount__"]来获得数量单元格的值,其中row表示本行数据,__Amount__是数量字段的数据库字段名(数据库字段名属于您自己设置的,所以您可以在开发平台中查看);

取单价__Price__的值同理。

通过if条件判断取到的数量和单价的值后和我们预先定义的数值(20,30)进行比较,满足则返回用html标签包装的值,这里的值用到了html,和前面的value又不一样了,怎么确定呢?


怎么知道该怎么做?

在E6表单页面中,表格的每个单元格都会对应一个格式化的javascript方法,如果你不设置“格式化脚本”则也会做一些默认的格式化事情,比如对于百分百单元格,自动加上百分号,对于数值单元格,自动保留几个小数等等。下面详细告诉你怎么查看取值的时候可以用到的变量:

1、在浏览器打开要格式化的查询列表或者表单页面(下图是表单页面),然后在某个空白出点击右键,点击菜单“查看框架源代码”(这里用的是谷歌浏览器,其他浏览器类似)

image.png

2、打开网页源代码后,按CTRL+F,比如我们要设置“金额”列,则输入“金额”进行查找,就可以找到我们这个单元格所对应的格式化方法(记住:输入“金额”查找可能会查找到很多包含金额的地方,你需要找到下面这种带:formatter:fmtDoubleOrdersItem__Amt__的才行,其中__Amt__表示表格这一列的数据库字段名,其他的非表格的元素是不会有formatter存在的)。

找到后,我们就可以通过formatter后面的方法名“fmtDoubleOrdersItem__Amt__”搜到这一列默认的格式化Javascript方法了。

image.png


方法讲解:

比如我们找到fmtDoubleOrdersItem__Amt__方法后,发现下图中蓝框部分就是我们在E6表格列的“格式化脚本”中填写的格式化脚本,而红框中的部分就是默认格式化这个单元格的脚本。默认部分的意思是,把这个单元格格式化为保留2位小数(小数位数在开发平台此列的属性中进行设置),格式化小数位数后的值赋值给了html变量,所以我们的“格式化脚本”中才能直接使用html变量来拼接返回的值。


E6的格式化方法有三个参数,其中:

1、第1个参数val表示的是本单元格的原始值,这里第一个参数可能会有所不一样(由于开发人员的问题可能有的用val,有的用value);

2、第2个参数row表示本行数据对象,用row["字段名"]可以获取某个字段的值,如果是引用字段则需要这么取:row["引用字段的引用单据ID_引用字段名"]来获取;

3、第3个参数index表示本行数据在当前表格中的序号,从0开始,比如第一行的index = 0;

image.png

通过这样的讲解,下次如果您需要格式化某个单元格的值的时候,而又不知道怎么取单元格的值,怎么取同一行其他单元格的值,就可以通过这种方式去找到可以使用的变量。