如何在列表操作列区域添加按钮及控制已有按钮显示

Karson 2017-8-15 1679

在FastAdmin中,我们可以一键生成CRUD数据,目前最新版本生成CRUD数据已经支持权限控制按钮显示。一般情况下我们生成的列表在操作区域都会存在排序、编辑、删除三个按钮,如下图
https://cdn.forum.fastadmin.net/uploads/201708/15/1a29f90a301155e9924b9745801fde4b
在这里简单介绍一下如果添加和修改这里的按钮显示,同时根据权限控制它的显示。这里我们以单页管理为示例,首先打开/public/assets/js/backend/page.js这个文件,找到如下行

{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}

我们修改一下该行数据,改成

{
    field: 'operate', title: __('Operate'), table: table,
    buttons: [
        {name: 'detail', text: '详情', title: '详情', icon: 'fa fa-list', classname: 'btn btn-xs btn-primary btn-dialog', url: 'page/detail'}
    ],
    events: Table.api.events.operate, formatter: Table.api.formatter.operate
}

其中主要增加的部分是

buttons: [
    {name: 'detail', text: '详情', title: '详情', icon: 'fa fa-list', classname: 'btn btn-xs btn-primary btn-dialog', url: 'page/detail'}
],

这段代码意思是配置一个按钮数组,这里我们只配置了一个数据,效果图如下。在开发过程中可以按照需求添加多个按钮的。
https://cdn.forum.fastadmin.net/uploads/201708/15/fafe5eb2aeff9bad77425f90b8a97ac7
下面简单介绍一下几个配置的含义
name : 唯一标识,其中index/add/edit/del/multi/dragsort这几个框架已经暂用,请勿使用
text : 按钮上的文本,可以为空时,为空时按钮将不显示文字信息,为空时最好配置上icon的值
title : 按钮的标题信息,当鼠标移到上面时显示的文字,同时作为dialog弹出窗时的标题信息
icon : 按钮上的按钮信息,可使用Font-awesome的按钮,当text为空时请务必填写该值
classname : 按钮的class标签的值,建议btn btn-xs为必选,这样可以和其它按钮更加协调搭配,可搭配用的按钮颜色有btn-primary、btn-success、btn-danger、btn-warning,还有额外的功能class如btn-dialog、btn-addtabs、btn-ajax,下面会详细介绍。
url : 按钮点击后跳转的链接,可选且可使用相对链接。为空时按钮的链接为javascript:;

功能Class

btn-dialog : 点击按钮后将会以弹窗的形式打开url这个链接
btn-addtabs : 点击按钮后将会在顶部选项卡中新增一个选项卡并跳转
btn-ajax : 点击按钮后将会发起一个Ajax请求

根据权限控制按钮显示

经过上述的操作,添加按钮已经成功了,如何根据权限控制按钮的显示呢?这里我们需要找到index.html这个视图,其中table的内容如下

<table id="table" class="table table-striped table-bordered table-hover" 
       data-operate-edit="{:$auth->check('page/edit')}" 
       data-operate-del="{:$auth->check('page/del')}" 
       width="100%">
</table>

其中应该很显示可以看到我们给表格添加了额外的data属性,默认添加了edit、del这两个权限检测, 这里我们需要加上detail的权限控制,如下

<table id="table" class="table table-striped table-bordered table-hover" 
       data-operate-edit="{:$auth->check('page/edit')}" 
       data-operate-del="{:$auth->check('page/del')}" 
       data-operate-detail="{:$auth->check('page/detail')}" 
       width="100%">
</table>

其中data-operate-detail这里的detail对应的就是我们按钮中的name值,而{:$auth->check('page/detail')}中的page/detail对应的就是我们方法的控制器和方法。
只需要上面这一行代码,如果管理员没有page/detail这个权限,则detail这个按钮就不会显示了。
看完以后,是不是发现好简单了~~

最后于 2017-8-15 被Karson编辑
最新回复 (15)
  • 小熊 2017-8-18
    感谢TA
    0 引用 2

    @Karson 试过了,还是报错。

  • 小星星 10月前
    感谢TA
    0 引用 3

    为什么我完全复制的示例代码新按钮还是没有生成?https://cdn.forum.fastadmin.net/uploads/201710/07/bcbbcfda0bc186fa9d0de181a2882748

  • Karson 楼主 打赏 10月前
    感谢TA
    0 引用 4

    @小星星 看起来没啥问题,清除下缓存 试试。

  • 谐戏 10月前
    感谢TA
    0 引用 5

    强!

  • 新欣技术 10月前
    感谢TA
    0 引用 6

    按照这个文档操作可以对自建的按钮增加权限,但遇到点问题,就是超级管理员可见,其它用户组成员不可见,究其原因是:新增了按钮,可能会增加控制方法,所以需要对新的方法创建新的权限节点,需要命令操作
    php think menu -c XXXX -d 1 先删除
    php think menu -c XXXX 后新建
    就可以在权限管理-角色组中给相关组分配权限了。
    https://cdn.forum.fastadmin.net/uploads/201710/15/de1e67401cbafd345649463678c42497

  • Karson 楼主 打赏 10月前
    感谢TA
    0 引用 7

    @新欣技术 其次可以在语言包添加权限节点的标识即可显示中文。

  • 新欣技术 10月前
    感谢TA
    0 引用 8

    加了
    修改/fastadmin/application/admin/lang|zh-cn.php
    https://cdn.forum.fastadmin.net/uploads/201710/15/9b28de9efff6d5cdff697cd93a917221
    但是像Sendaliyzm、do_get等几个,不是这个控制器里的。

  • Karson 楼主 打赏 10月前
    感谢TA
    0 引用 9

    @新欣技术 可以放在通用的语言包zh-cn.php文件中

  • lnlingyuan 10月前
    感谢TA
    0 引用 10

    @Karson 我也是这样的情况,清除缓存还是一样

  • 我是文明人 9月前
    感谢TA
    0 引用 11

    请问一下,他是在哪里添加的 ids呢。自动添加的呢。

    <a href="/fastadmin/public/admin/page/detail/ids/5" class="btn btn-xs btn-primary btn-dialog" title="详情"><i class="fa fa-list"></i> 详情</a>
  • 感谢TA
    0 引用 12

    我把实例上的代码复制粘贴的,然而页面上还是默认的三个按钮 排序 编辑 和删除 没有新增的详情

  • 感谢TA
    0 引用 13

    请教一下HTML模板 怎么让默认的三个按钮按自己需要显示 比如我想去掉那个排序的按钮

  • Nolyn 8月前
    感谢TA
    0 引用 14

    求助,如果想要根据权限判断某一列是否显示,这种能实现吗?

  • Karson 楼主 打赏 8月前
    感谢TA
    0 引用 15
  • zhoushuqiang 2月前
    感谢TA
    0 引用 16

    image.png
    image.png
    这样改的话,可以根据数据库的某些字段,进行是否添加菜单操作。欢迎大神指点

  • HCH 1月前
    感谢TA
    0 引用 17

    image.png
    image.png
    按照这里的方法试了,也把对应的URL改了,在js和html里都改了,但还是没有显示效果,
    image.png
    请问还有哪里要修改才可以显示新添加的操作按钮吗

  • 未登录
    17
返回