Fastadmin框架JS前端框架中的组件和常见的属性的基本用法

作者 : admin123456 本文共2252个字,预计阅读时间需要6分钟 发布时间: 2021-07-14 共174人阅读

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

Fastadmin框架JS前端框架中的组件和常见的属性的基本用法

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

现在我需要做两件事:

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

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

Fastadmin框架JS前端框架中的组件和常见的属性的基本用法

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

Fastadmin框架JS前端框架中的组件和常见的属性的基本用法

注意看上图红框中的代码,你会发现原来文字显示是可以通过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也是一样的,大家阅读一下源码就知道该怎么用了。

 建议

 

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

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

本站所发布的资源均来源于互联网,仅限用于研究学习,不得将软件用于商业或者非法用途,否则一切后果请用户自负!如果侵犯了您的权益请与我们联系!您必须在下载后的24个小时之内,从您的手机和电脑中彻底删除。 如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请与我们联系处理!
互利网 » Fastadmin框架JS前端框架中的组件和常见的属性的基本用法

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了?
最常见的情况是下载不完整:可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。

发表评论