如何正确使用表格组件的formatter属性

fastadmin前端表格组件使用的是bootstrap-table,如果我们想要自定义表格的内容,可以使用formatter属性。最常规的用法如下:

columns: [
    [
                       
        {
           field: 'type', title: __('type'), 
           formatter: function (value,row) {
              if (value === 0) return '普通存储';
              if (value === 1) return '低频存储';
           }
        },
        {
           field: 'url', title: __('url'), 
           formatter: function (value,row) {
              return '<a href="' + value + '">' + row.name + '</a>';
           }
        }
    ]
]

简单来说formatter可以定义为一个function返回一段html代码,而这个function的第一个参数为当前字段值,第二个参数为一整行数据。

fastadmin为了方便大家快速开发,封装了一些常见的formatter供大家直接使用,如:

> `Table.api.formatter.icon` 快速将字段渲染成一个按钮,仅支持Fontawesome按钮
> `Table.api.formatter.image` 快速将字段渲染成图片展示的形式
> `Table.api.formatter.images` 快速将字段渲染成多图片展示的形式,字段数据请以`,`进行分隔
> `Table.api.formatter.status` 快速将字段渲染成状态,默认`normal/hidden/deleted/locked`这四个状态
> `Table.api.formatter.url` 快速将字段渲染成URL框
> `Table.api.formatter.search` 快速将字段渲染成可搜索的链接,点击后将执行搜索
> `Table.api.formatter.addtabs` 快速将字段渲染成可添加到选项卡的链接,点击后将把链接添加到选项卡
> `Table.api.formatter.flag` 快速将字段渲染成标志,仅支持`index/hot/recommend/new`这四种标志
> `Table.api.formatter.label` 快速将字段渲染Label标签
> `Table.api.formatter.datetime` 快速时间戳数据渲染成日期时间数据
> `Table.api.formatter.operate` 操作栏固定按钮
> `Table.api.formatter.buttons` 快速生成多个按钮
> `Table.api.formatter.toggle` 快速生成切换按钮

使用方法为:

field: 'status', title: __('status'), formatter: Table.api.formatter.status

但是我们在使用过程中经常遇到一个问题,比如status字段,我们数据库存的是0和1,或者normal,hidden等,使用Table.api.formatter.status 渲染时,如何将字段值转为中文?如何设置使用的颜色?

其实karson为我们提供了一些属性可以配置,只不过官方文档中并没有说明有哪些属性可以配置,导致一些新人不知所措。

我写这个帖子的目的就是帮助大家解除这个疑惑。

俗话说授之以鱼不如授之以渔。

本帖并不打算直接将可配置的属性列举出来,而是教大家如何通过源码去找到自己想要的属性配置。

首先,你要知道封装formatter的代码在 public/assets/js/require-table.js 大约372行的位置:

image.png

以status为例,假设现在有个表格,status字段的值为0和1,分别代表“启用”和“禁用”。

现在我需要做两件事:

  1. 将0和1分别显示为“禁用”和“启用”
  2. 启用使用绿色图标,禁用使用红色图标

为了知道该如何配置,我查看了源码:

image.png

请看上图源码中,红框中的代码,你会发现颜色是使用custom属性来配置的,并且该属性默认是{normal: 'success', hidden: 'gray', deleted: 'danger', locked: 'info'}

而我的status字段值是0或者1,因此我们需要配置custom属性为:custom: {0: 'success', 1: 'error'}

那么文字怎么转换为中文呢?可以看到Table.api.formatter.status其实最后调用了Table.api.formatter.normal,于是我们再查看normal的代码:

image.png

注意看上图红框中的代码,你会发现原来文字显示是可以通过searchList属性来配置的。

所以我们需要配置searchList属性为:searchList: {1: '启用', 0: '禁用'}

最终代码为:

{
   field: 'status', 
   title: __('status'), 
   operate: false, 
   formatter: Table.api.formatter.status,
   custom: {0: 'success', 1: 'error'},
   searchList: {0: '启用', 1: '禁用'}
}

效果为:

image.png

这里是以status为例,其他的formatter也是一样的,大家阅读一下源码就知道该怎么用了。

建议

本人经常在群里或社区中解答别人的问题,有人叫我大神,其实我不是大神,那么我为啥能够解答别人的问题呢?

因为我看源码呀。其实很多时候有人问问题的时候,我其实也是不知道答案的,但是我会去通过源码找到答案然后再解答别人。就如formatter的问题,群里就经常有人问什么什么该怎么弄,我就打开源码阅读一下,很快就找到答案了。

所以,建议大家有关于fastadmin使用上的问题,第一先看官方文档,第二查找社区,尤其是社区这个帖子:一张图解析FastAdmin中的表格列表的功能。第三自己阅读源码,第四才是在群里提问。

阅读源码是提高自己水平最好的方式。

6 条评论

发布
问题