一張圖解析FastAdmin中的表格列表的功能

 

https://ask.fastadmin.net/articles.html

\https://ask.fastadmin.net/article/323.html

https://ask.fastadmin.net/article/5567.html

https://ask.fastadmin.net/article/2527.html

https://www.cnblogs.com/lichihua/p/10466540.html

 

 

點擊圖片查看高清大圖

功能描述

請根據圖片上的數字索引查看對應功能說明。
1.時間篩選器
如果想在搜索欄使用時間區間進行搜索，則可以在JS中修改修改字段屬性，如

{field: 'createtime', title: __('Create Time'), formatter: Table.api.formatter.datetime, operate: 'BETWEEN', type: 'datetime', addclass: 'datetimepicker', data: 'data-date-format="YYYY-MM-DD"'},

其中type為類型，使用datetime將會把結果轉換成時間戳進行搜索，如果你的數據庫存儲的是日期時間型數據，則移除該type屬性，data指附件到input文本框上的屬性
最新版FastAdmin已經支持用戶體驗更好的datetimerange插件，使用方式是：

{field:'createtime', title: __('Create Time'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass:'datetimerange'}

2.狀態列表
默認我們的搜索都是一個文本框，如果需要改成下拉列表框，則需要使用如下代碼

{field: 'status', title: __('Status'), formatter: Table.api.formatter.status, searchList: {'normal': __('Normal'), 'hidden': __('Hidden')}, style: 'min-width:100px;'},

其中searchList使用的是一個JSON數據，同時searchList仍然支持數據、JSON對象、Ajax對象、Function函數。
普通搜索欄的搜索薦默認都是全部啟用的，如果想禁用字段在普通搜索欄的顯示，可以在字段屬性中添加operate: false來禁用，如下方代碼

{field: 'status', title: __('Status'), operate:false, formatter: Table.api.formatter.status}

3.添加、編輯、刪除、導入、批量操作按鈕
FastAdmin的添加、編輯、刪除按鈕默認是由{:build_toolbar()}生成的，默認是全部生成。如果我們只需要其中的部分按鈕，則可以傳入參數來實現，如{:build_toolbar('refresh,add')}，這樣將只會生成刷新和添加按鈕。同時也支持調整參數的位置來調整最后生成的位置，另外請注意{:build_toolbar()}還會根據當前管理員的權限判斷按鈕是否顯示，例如你使用{:build_toolbar('refresh,add')}，如果當前管理員沒有添加的權限，添加按鈕仍然不會顯示 。
目前build_toolbar支持的按鈕有：

refresh: 刷新按鈕
add: 添加
edit: 編輯
del: 刪除
import: 導入

批量操作按鈕是直接在視圖頁面上添加的HTML代碼，直接修改即可。
啟用導入請參考：https://forum.fastadmin.net/d/540

4.自定義搜索
FastAdmin中的Bootstrap-table表格的自定義搜索功能是非常強大的，我們可以按需要修改來實現自己的搜索功能，這里實現的功能是點擊自定義搜索則發起搜索分類ID為1的數據，代碼如下：

$(document).on("click", ".btn-singlesearch", function () {
    var options = table.bootstrapTable('getOptions');
    options.pageNumber = 1;
    options.queryParams = function (params) {
        return {
            search: params.search,
            sort: params.sort,
            order: params.order,
            filter: JSON.stringify({category_id: 1}),
            op: JSON.stringify({category_id: '='}),
            offset: params.offset,
            limit: params.limit,
        };
    };
    table.bootstrapTable('refresh', {});
    Toastr.info("當前執行的是自定義搜索");
    return false;
});

首先我們為自定義搜索這個按鈕綁定上點擊事件，這樣當我們點擊按鈕時則發起搜索請求。其次注意我們獲取了Bootstra-table表格的屬性配置，並修改了其中的pageNumber和queryParams，pageNumber指頁碼置為第一頁，queryParams是這里的重點，我們修改了其中的filter和op，filter是我們的過濾條件，op是我們的條件操作符，操作符支持=、!=、LIKE、NOT LIKE、>、>=、<、<=、IN(...)、NOT IN(...)、BETWEEN、NOT BETWEEN、LIKE %...%、IS NULL、IS NOT NULL，這里的filter和op支持同時搜索多個條件。

5.快速搜索
快速搜索在鍵入關鍵詞時將實時從服務端搜索數據，如果你的數據表數據較大，建議關鍵此功能，關閉的方法是使用search:false，其次快速搜索默認只會搜索主鍵id這個字段，如果你需要搜索其它字段，則需要在服務端你的控制器中定義$searchFields這個值，如下

protected $searchFields = 'id,name,title';

這樣在快速搜索時將會搜索id,name,title這三個字段。

6.瀏覽模式、顯示隱藏列、導出、通用搜索
瀏覽模式可以切換卡片視圖和表格視圖兩種模式，如果不需要此功能，可以設置showToggle: false
顯示隱藏列可以快速切換字段列的顯示和隱藏，如果不需要此功能，可以設置showColumns: false，如果想要表格中的字段列默認隱藏可以設置字段屬性visible: false即可默認隱藏
導出按鈕默認將導出整個表的所有行，如果需要僅導出當前分頁的數據，需要設置exportDataType: 'basic'，如果想導出選中的行，則可以設置為exportDataType: 'selected'，如果不需要此功能，可以設置showExport: false
通用搜索指表格上方的搜索，通用搜索的表單默認是隱藏的，如果需要默認顯示，需要設置searchFormVisible: true，如果不需要通用搜索功能，可以設置commonSearch: false。如果想要控制字段列不參考搜索則可以設置字段列屬性為operate: false即可。
7. 分類名稱(關聯搜索出分類表的名稱)
這里顯示的分類名稱是根據分類表關聯查詢出來的結果，如果我們啟用關聯查詢，我們必須在當前控制器中設置屬性protected $relationSearch = true;，同時我們的index方法也需要重寫，請參考下方的完整代碼中PHP部分。如果我們啟用了關聯查詢，當兩個表中的字段有沖突時，我們必須在字段中加上別名。請參考下方的完整代碼中JS部分。
8.標志和圖片
FastAdmin封裝了許多常用的方法，我們可以快速的調用即可。

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 快速生成多個按鈕
9.狀態
此處的狀態是根據第8項中的Table.api.formatter.status進行生成的。
10.按鈕組
按鈕組的功能是根據第8項中的Table.api.formatter.buttons進行生成的，代碼如下

{field: 'id', title: __('按鈕'), table: table, buttons: [
    {name: 'detail', text: '彈窗', title: '彈窗標題', icon: 'fa fa-list', classname: 'btn btn-xs btn-primary btn-dialog', url: 'page/detail', callback:function(data){}},
    {name: 'detail', text: 'Ajax', title: 'Ajax標題', icon: 'fa fa-flash', classname: 'btn btn-xs btn-success btn-ajax', url: 'page/detail', success:function(data, ret){}, error:function(){}},
    {name: 'detail', text: '選項卡', title: '選項卡標題', icon: 'fa fa-flash', classname: 'btn btn-xs btn-info btn-addtabs', url: 'page/detail'}
], operate:false, formatter: Table.api.formatter.buttons}

其中classname中的btn-dialog、btn-ajax、btn-addtabs，FastAdmin已經為這幾個固定的Class注冊了事件，所以可以直接使用，如果想要實現其它功能，需要自己手動編寫代碼綁定事件才可使用。
btn-dialog的按鈕會自動注冊callback事件
btn-ajax的按鈕會自動注冊成功和失敗的事件
11.操作
操作區域默認是排序、編輯、刪除這三個按鈕，此功能也是根據第8項中Table.api.formatter.operate來實現的。排序按鈕只在表中存在weigh字段時才會出現，編輯按鈕和刪除按鈕會根據管理員所擁有的權限進行按需顯示。其次Table.api.formatter.operate也支持buttons屬性來配置多個其它按鈕，如示例圖中的詳情按鈕。請參考下方完整代碼中JS部分。