字段 Formatter ​

Formatter 是将数据库的数据转换成另外一种方式显示的方法，用于表格展示，Formatter 适用于的场景有很多，例如图片展示场景，数据库存的是图片地址，而展示的时候是图片。系统提供了各种场景下的 Formatter，同时也允许自定义 Formatter。定义 Formatter 最简单的方式就是通过数据字典方式定义。

在定义数据字典的时候把值对应的颜色也一起定义，定义完成后在功能设计器/字段明显中找到需要转换显示的字段，在显示格式一栏填入 Formatter

显示格式的拼装规则是字典真实值+Formatter，如字典真实值是 useractivestatus，那么它的显示格式应为 useractivestatusFormatter

定义 Formatter 完成后切换到 Grid 设计，点击生成 Grid 页面按钮，如下图所示

当提示处理成功后，你会看到如下页面效果

通过配置字典来设置 Formatter 能解决大部分问题，但是例如图片转换，金额转换等场景是没有办法通过配置字典来解决，为了应对这种情况，平台提供了预设的 Formatter 来解决这些问题。

editChekboxFormatter ​

editChekboxFormatter 将数据转换为 checkbox，效果如下图所示

icoFormatter ​

icoFormatter 将数据转换为 icon 图标，效果如下图所示

passwordFormatter ​

passwordFormatter 将数据加密显示,只显示前面 3 位数和后面 3 位数

encryptionFormatter ​

encryptionFormatter 将数据全部加密显示，类似的 Formatter 还有 encryptionFormatter4 将数据前后 4 个字段加密，encryptionFormatter3 将数据前后 3 个字段加密

fileIcoFormatter ​

fileIcoFormatter 将附件数据转换为附件图标

fontBoldFormatter ​

fontBoldFormatter 将字体加粗显示

fontRedFormatter ​

fontRedFormatter 将字体颜色改为红色显示，同样的还有 fontGreenFormatter，将字体改为绿色显示

percentageFormatter ​

percentageFormatter 将 1 以下小数转为保留 2 位小数的百分比显示，并根据不同的数值大小显示对应的颜色

formatAmount ​

formatAmount 用于格式化金额数值，金额每隔三位加一个逗号，最大保留小数点后 5 位，如下图所示:

rowImgFormatter ​

rowImgFormatter 将图片地址转换为图片显示，如下图所示

dateTimeFormatter ​

dateTimeFormatter 将时间戳格式化，将时间戳改为年月日时分秒显示，如下图所示

dateFormatter ​

dateFormatter 将时间戳格式化，将时间戳改为年月日显示，如下图所示

timeFormatter ​

timeFormatter 将时间戳格式化，将时间戳改为时分秒显示，如下图所示

shortdateFormatter ​

shortdateFormatter 将时间戳格式化，将时间戳改为月-日显示，如下图所示

checkGridButtonFormatter ​

checkGridButtonFormatter 将 gridBtn 页面类型的按钮显示为行内按钮

htmlTextFormatter ​

htmlTextFormatter 去掉 html 相关语法标签，只显示其内容，例如<h1>111</h1>，那么经过 htmlTextFormatter 后，只显示 111

自定义 Formatter ​

注意：由于技术原因，通过在h5中通过自定义js定义的formatter的，需要在vue中重新定义

Vue ​

如果系统预设的 Formatter 不满足你的需求，那么你可以通过自定义 Formatter 从而达到你想要的效果。

在工程代码 src/common/dictionary-formatter.ts 文件中定义 Formatter，如 fileIcoFormatter 所示

其中 1 为格式的名字，以 Formatter 结尾，2 为函数类型，3 为当前行的数据，4 为当前字段的数据

定义完 Formatter 后需要在 dictonaryFormatterCollection 中进行注册

key 值为除去 Formatter 前缀，如 fileIcoFormatter，那么 key 为 fileIco,如果需要进行 html 转义还需在 HtmlFormatterTypes 进行注册，如下图所示，默认是不进行 html 转义，Formatter 方法返回什么就显示什么。