fastadmin如何在列表操作列區域添加按鈕及控制已有按鈕顯示

在FastAdmin中，我們可以一鍵生成CRUD數據，目前最新版本生成CRUD數據已經支持權限控制按鈕顯示。一般情況下我們生成的列表在操作區域都會存在排序、編輯、刪除三個按鈕，如下圖

在這里簡單介紹一下如果添加和修改這里的按鈕顯示，同時根據權限控制它的顯示。這里我們以單頁管理為示例，首先打開/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'}
],

這段代碼意思是配置一個按鈕數組，這里我們只配置了一個數據，效果圖如下。在開發過程中可以按照需求添加多個按鈕的。

下面簡單介紹一下幾個配置的含義
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:;
dropdown:按鈕分組名稱，用於將按鈕分組下拉
refresh:是否在執行完事件后刷新列表，常配合classname:'btn-ajax'使用
confirm:提示確認信息，常配合classname屬性為btn-ajax、btn-dialog、btn-addtabs使用
extend:擴展屬性，用於擴展按鈕的自定義屬性
hidden:控制按鈕是否隱藏屬性,支持function
visible:控制按鈕是否顯示屬性,支持function
disable:控制按鈕是否禁用屬性,支持function

功能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按鈕進行權限控制，可添加data-operate-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這個按鈕就不會顯示了。

如果需要隱藏默認的編輯或刪除按鈕，可以將相應的值置為空即可，如下：

<table id="table" class="table table-striped table-bordered table-hover" 
       data-operate-edit="" 
       data-operate-del="" 
       width="100%">
</table>

看完以后，是不是發現好簡單了~~