chatgpt前端页面实现前端formatter

转载

冷月星 2024-03-25 07:09:09

文章标签 chatgpt前端页面实现字段 List 数据 文章分类 深度学习人工智能

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行的位置：

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

现在我需要做两件事：

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

为了知道该如何配置，我查看了源码：

请看上图源码中，红框中的代码，你会发现颜色是使用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的代码：

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

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

最终代码为：

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

效果为：

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