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

大圖:

一、默認生成的CRUD是沒有菜單名稱和描述顯示的，若是須要顯示則能夠在後臺修改，權限管理->菜單規則，給對應菜單的添加上備註信息後便可顯示，支持HTML

 

二、TAB過濾選項卡

在一鍵生成CRUD時，若是表中存在status字段且爲ENUM類型，則會生成相應的TAB過濾選項卡，若是須要生成其它字段的過濾選項卡則能夠在使用php think crud時使用--headingfilterfield=你的字段名稱來指定字段

 

三、.通用搜索

通用搜索的的內容是根據bootstrap-table配置的字段columns決定的，渲染的內容及格式由FastAdmin自動進行渲染，若是須要禁用或刪除某一選項，能夠在JS中配置operate:false來刪除通用搜索中的選項。例如一般狀況下咱們的在JS中進行字段的配置以下：

{field: 'createtime', title: __('Create Time')},

這裏默認是啓用的通用搜索，針對通用搜索，有如下幾個經常使用的配置：

operate:'=' //用於查詢時的操做符，默認爲=，爲false表示禁用此字段的通用搜索，支持!=、LIKE、NOT LIKE、>、<、>=<=、FIND_IN_SET、IN、NOT IN、BETWEEN、NOT BETWEEN、RANGE、NOT RANGE、NULL、NOT NULL、false
searchList: //用於渲染列表的數據，支持的格式有JSON Array、JSON Object、$.getJSON、Function
addclass: //用於給input或select添加額外的class屬性
type: //用於定義input文本框的類型,默認爲text
data: //用於給input或select添加額外的屬性

經常使用配置示例以下：

//時間區間搜索
{field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime},
//金額區間搜索
{field: 'money', title: __('Money'), operate: 'RANGE'},
//下拉列表搜索
{field: 'flag', title: __('Flag'), searchList: {"hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label},
//動態下拉列表搜索
{field: 'type', title: __('Type'), searchList: $.getJSON("ajax/dynamicselect")},
//禁用通用搜索
{field: 'keywords', title: __('Keywords'), operate: false},

若是咱們須要徹底自定義咱們的通用搜索欄，咱們能夠在配置bootstrap-table時定義searchFormTemplate選項來徹底重寫咱們的通用搜索欄，具體請參考開發示例插件中的自定義搜索示

 

四、工具欄按鈕

FastAdmin在一鍵CRUD時會自動生成添加、編輯、刪除、導入、更多按鈕的HTML，這些按鈕會根據用戶所擁有的權限控制基是否顯示或隱藏。咱們能夠在控制器對應的index.html視圖文件中任意修改或刪除對應的按鈕。請特別注意這幾個自動生成的按鈕都經過基擁有的class屬性來綁定相關的事件，例如添加按鈕擁有btn-add這個class、框架所已經佔用的class以下：

btn-add: 添加按鈕使用
btn-edit: 編輯按鈕使用
btn-del: 刪除按鈕使用
btn-import: 導入按鈕使用
btn-more: 更多按鈕使用
btn-multi: 指操做使用
btn-disabled: 添加此class後則只有在列表有選中數據時按鈕纔會變爲可以使用

若是咱們想點擊添加按鈕後默認全屏，則能夠給添加按鈕加上data-area='["100%","100%"]'便可默認全屏
若是咱們想自定義按鈕並添加事件，咱們須要在視圖中添加相應的HTML代碼，而後在對應的JS文件中添加按鈕的執行事件，切記不可在視圖中直接編寫JS或jQuery代碼來綁定事件

 

五、動態渲染統計信息

不少時候咱們須要在頁面額外顯示服務端傳回的動態數據，此時咱們只須要在index.html視圖中添加

<a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;">
    <i class="fa fa-dollar"></i>
    <span class="extend">
        金額：<span id="money">0</span>
        單價：<span id="price">0</span>
    </span>
</a>

而後在控制器對應的JS中的index方法中添加如下的JS

//當表格數據加載完成時
table.on('load-success.bs.table', function (e, data) {
    //這裏能夠獲取從服務端獲取的JSON數據
    console.log(data);
    //這裏咱們手動設置底部的值
    $("#money").text(data.extend.money);
    $("#price").text(data.extend.price);
});

注意務必將這段代碼添加在var table = $("#table");以後
其中data.extend.money和data.extend.price就是咱們在服務端動態返回的數據，以下

$result = array("total" => $total, "rows" => $list, "extend" => ['money' => 1024, 'price' => 888]);
return json($result);

經過以上配置便可動態顯示服務端返回的額外數據

 

六、搜索框

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

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

這樣在快速搜索時將會搜索id,name,title這三個字段。
若是須要修改默認文本框的placeholder，能夠在表格初始化前定義

$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function(){return "自定義placeholder文本";};

 

七、工具按鈕 瀏覽模式、顯示隱藏列、導出、通用搜索

瀏覽模式能夠切換卡片視圖和表格視圖兩種模式，若是不須要此功能，能夠設置showToggle: false
顯示隱藏列能夠快速切換字段列的顯示和隱藏，若是不須要此功能，能夠設置showColumns: false，若是想要表格中的字段列默認隱藏能夠設置字段屬性visible: false便可默認隱藏
導出按鈕默認將導出整個表的全部行，若是須要僅導出當前分頁的數據，須要設置exportDataType: 'basic'，若是想導出選中的行，則能夠設置爲exportDataType: 'selected'，若是不須要此功能，能夠設置showExport: false
通用搜索指表格上方的搜索，通用搜索的表單默認是隱藏的，若是須要默認顯示，須要設置searchFormVisible: true，若是不須要通用搜索功能，能夠設置commonSearch: false。若是想要控制字段列不參考搜索則能夠設置字段列屬性爲operate: false便可。

 

 

八、表頭  字段配置

默認字段的控制是根據控制器對應的JS來配置的，所以字段配置是經過JS，而在咱們的視圖index.html中是沒有任何字段配置的，一般咱們的配置以下：

columns: [
    [
        {checkbox: true},
        {field: 'id', title: __('Id')},
        {field: 'admin_id', title: __('Admin_id')},
        {field: 'category.name', title: __('分類名稱'), formatter:Table.api.formatter.search},
        {field: 'category_id', title: __('Category_id'), visible: false},
        {field: 'flag', title: __('Flag'), searchList: {"hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label},
        {field: 'genderdata', title: __('Genderdata'), searchList: {"male": __('Genderdata male'), "female": __('Genderdata female')}, formatter: Table.api.formatter.normal},
        {field: 'title', title: __('Title')},
        {field: 'image', title: __('Image'), formatter: Table.api.formatter.image},
        {field: 'images', title: __('Images'), formatter: Table.api.formatter.images},
        {field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime},
        {field: 'updatetime', title: __('Updatetime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime, visible: false},
        {field: 'weigh', title: __('Weigh'), operate: false, visible: false},
        {field: 'switch', title: __('Switch'), searchList: {"1": __('Yes'), "0": __('No')}, formatter: Table.api.formatter.toggle},
        {field: 'status', title: __('Status'), searchList: {"normal": __('Normal'), "hidden": __('Hidden')}, formatter: Table.api.formatter.status},
    ]
]

字段配置的參數有

checkbox:true, //是否爲首列複選框
field:'name' //字段名稱,若是啓用了關聯查詢這裏可使用別名,好比:category.name,請注意服務端返回的字段一一對應，若是使用了一個不存在的字段，將不會渲染任何數據
title:'名稱' //字段標題,顯示於頭部的標題
operate:'=' //通用搜索的操做符,詳見上方通用搜索介紹
visible:false //字段是否可見，爲false時將默認不可見
formatter:Table.api.formatter.search //格式化顯示的內容,FastAdmin內部定義了許多通用的格式化方法
events: //定義元素響應的事件
searchList: //定義通用搜索下拉列表的數據
addclass: //通用搜索文本框或下拉列表的額外class
type: //通用搜索文本框的類型
data: //通用搜索文本框或下拉列表的額外屬性

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` 快速生成切換按鈕

 

九、checked多選框列  

若是咱們須要不須要複選框則移除{checkbox: true}便可

 

 10，分類列  分類名稱(關聯搜索出分類表的名稱)

這裏顯示的分類名稱是根據分類表關聯查詢出來的結果，若是咱們啓用關聯查詢，咱們必須在當前控制器中設置屬性protected $relationSearch = true;，同時咱們的index方法也須要重寫，請參考下方的完整代碼中PHP部分。若是咱們啓用了關聯查詢，當兩個表中的字段有衝突時，咱們必須在字段中加上別名。請參考下方的完整代碼中JS部分。

十一、標誌

咱們可使用formatter:Table.api.formatter.flag來渲染標誌字段，默認會數據庫的值渲染如下幾種顏色

{index: 'success', hot: 'warning', recommend: 'danger', 'new': 'info'}

若是咱們須要擴展額外的值，則可使用

custom:{aaa: 'info', bbb:'danger'}

 

十二、圖片和圖片組

咱們可使用

formatter:Table.api.formatter.image
formatter:Table.api.formatter.images

以上兩種方式來渲染圖片或圖片組
請注意若是是圖片組的狀況下,數據值應該是以,進行分隔的

 

1三、開關

咱們可使用formatter:Table.api.formatter.toggle來生成開關組件
默認狀況下是根據數據庫值1和0來表示開和關
咱們能夠經過額外的配置和定義開和關，好比

yes: 'open', no: 'close'

則此時會根據數據庫值是open仍是close來展現開關，
開關在點擊的時候默認是隻容許修改數據庫的status字段的，若是咱們開關不是status字段，咱們須要在服務端對應的控制器中定義protected $multiFields="id,name,swith";，多個字段以,進行分隔

 

 1四、狀態

 

咱們可使用formatter:Table.api.formatter.status來渲染狀態
默認根據如下值進行狀態的顏色渲染

{normal: 'success', hidden: 'gray', deleted: 'danger', locked: 'info'}

若是咱們狀態有額外的值，咱們可使用custom來進行擴展，以下

custom: {rejected:'danger', agreed:'success'}

狀態渲染顯示的文本是根據searchList配置的值進行渲染的

 

·1五、自定義按鈕

按鈕組的功能是根據第8項中的Table.api.formatter.buttons進行生成的，代碼以下

 {
    field: 'buttons',
    width: "120px",
    title: __('按鈕組'),
    table: table,
    events: Table.api.events.operate,
    buttons: [
        {
            name: 'detail',
            text: __('彈出窗口打開'),
            title: __('彈出窗口打開'),
            classname: 'btn btn-xs btn-primary btn-dialog',
            icon: 'fa fa-list',
            url: 'example/bootstraptable/detail',
            callback: function (data) {
                Layer.alert("接收到回傳數據：" + JSON.stringify(data), {title: "回傳數據"});
            },
            visible: function (row) {
                //返回true時按鈕顯示,返回false隱藏
                return true;
            }
        },
        {
            name: 'ajax',
            text: __('發送Ajax'),
            title: __('發送Ajax'),
            classname: 'btn btn-xs btn-success btn-magic btn-ajax',
            icon: 'fa fa-magic',
            url: 'example/bootstraptable/detail',
            confirm: '確認發送',
            success: function (data, ret) {
                Layer.alert(ret.msg + ",返回數據：" + JSON.stringify(data));
                //若是須要阻止成功提示，則必須使用return false;
                //return false;
            },
            error: function (data, ret) {
                console.log(data, ret);
                Layer.alert(ret.msg);
                return false;
            }
        },
        {
            name: 'addtabs',
            text: __('新選項卡中打開'),
            title: __('新選項卡中打開'),
            classname: 'btn btn-xs btn-warning btn-addtabs',
            icon: 'fa fa-folder-o',
            url: 'example/bootstraptable/detail'
        }
    ],
    formatter: Table.api.formatter.buttons
}

按鈕配置支持的參數有：

name 按鈕惟一標識,其中add/edit/del/dragsort已經被佔用,請勿使用。咱們能夠在HTML視圖文件的table使用data-buttons-標識來控制顯示
text 按鈕的文本內容,若是不須要顯示文本可忽略
title 鼠標移上去的標題或彈窗/選項顯示的標題
icon 按鈕的圖標,請使用font-awesome圖標庫
classname 按鈕的class, 其中classname中的btn-dialog、btn-ajax、btn-addtabs，FastAdmin已經爲這幾個固定的Class註冊了事件，因此能夠直接使用，若是想要實現其它功能，須要本身手動編寫代碼綁定事件纔可以使用。
url 按鈕的連接/Ajax事件請求的URL/彈窗連接/選項卡連接，直接function和string類型,此連接會自動在連接後添加ids/{ids},{ids}爲當行主鍵ID，若是須要傳遞其它字段值，請在URL中使用{字段名}佔位便可
refresh 自動刷新,只針對btn-ajax事件
confirm 確認框提示文字,配置後會在確認操做再執行對應的事件，只針對btn-ajax/btn-dialog/btn-addtabs事件
success 事件成功的回調,只針對btn-ajax事件
error 事件失敗的回調,只針對btn-ajax事件
callback 彈窗回傳的回調,只針對btn-dialog事件
hidden 是否隱藏按鈕,按鈕默認顯示,支持function和bool類型
visible 是否顯示按鈕,按鈕默認顯示,支持function和bool類型
extend 按鈕擴展信息,能夠任意定製按鈕的參數,好比咱們想在新窗口中打開連接，則配置extend:' target="_blank"'便可

 

1六、操做

 

操做區域默認是排序、編輯、刪除這三個按鈕，此功能也是根據第8項中Table.api.formatter.operate來實現的。排序按鈕只在表中存在weigh字段時纔會出現，編輯按鈕和刪除按鈕會根據管理員所擁有的權限進行按需顯示。若是咱們須要重寫編輯(排序、刪除)按鈕的相關屬性，則可使用buttons來定義編輯(排序、刪除)的相關屬性。其次Table.api.formatter.operate也支持buttons屬性來配置多個其它按鈕，如示例圖中的詳情按鈕。請參考下方完整代碼中JS部分

 

1七、

分頁信息顯示的文字能夠經過在表格初始化前定義

 

$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function (pageFrom, pageTo, totalRows) {
    return '顯示第 ' + pageFrom + ' 到第 ' + pageTo + ' 條記錄，總共 ' + totalRows + ' 條記錄';
};

分頁大小或分頁大小選項能夠在表格初始化時傳入如下參數進行配置

pageSize: 10,
pageList: [10, 25, 50, 'All'],

 

1八、分頁工具欄

翻頁信息會根據服務端返回的數據行數自動進行渲染，若是返回的行數不知足分頁條件時，此項是不會顯示的

 

完整代碼：

php

 

<?php
namespace app\admin\controller;
use app\common\controller\Backend;
/**
 * 測試管理
 *
 * @icon fa fa-circle-o
 * @remark 此列表是經過php think crud -t test一鍵生成的針對數據表的查看、添加、編輯、刪除、批量修改等功能，只需在設計表時符合FastAdmin相關字段名稱、備註要求，便可生成相關的表單組件
 */
class Test extends Backend
{
    protected $model = null;
    protected $relationSearch = true;
    public function _initialize()
    {
        parent::_initialize();
        $this->model = model('Test');
    }
    /**
     * 查看
     */
    public function index()
    {
        if ($this->request->isAjax())
        {
            list($where, $sort, $order, $offset, $limit) = $this->buildparams();
            $total = $this->model
                    ->with("category")
                    ->where($where)
                    ->order($sort, $order)
                    ->count();
            $list = $this->model
                    ->with("category")
                    ->where($where)
                    ->order($sort, $order)
                    ->limit($offset, $limit)
                    ->select();
            $result = array("total" => $total, "rows" => $list, "extend" => ['money' => 1024, 'price' => 888]);
            return json($result);
        }
        return $this->view->fetch();
    }
}

js

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格參數配置
            Table.api.init({
                extend: {
                    index_url: 'test/index',
                    add_url: 'test/add',
                    edit_url: 'test/edit',
                    del_url: 'test/del',
                    multi_url: 'test/multi',
                    table: 'test',
                }
            });

            var table = $("#table");

            //當表格數據加載完成時
            table.on('load-success.bs.table', function (e, data) {
                //這裏能夠獲取從服務端獲取的JSON數據
                console.log(data);
                //這裏咱們手動設置底部的值
                $("#money").text(data.extend.money);
                $("#price").text(data.extend.price);
            });

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'weigh',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'admin_id', title: __('Admin_id')},
                        {field: 'category.name', title: __('分類名稱'), formatter:Table.api.formatter.search},
                        {field: 'category_id', title: __('Category_id'), visible: false},
                        {field: 'flag', title: __('Flag'), searchList: {"hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label},
                        {field: 'genderdata', title: __('Genderdata'), searchList: {"male": __('Genderdata male'), "female": __('Genderdata female')}, formatter: Table.api.formatter.normal},
                        {field: 'title', title: __('Title')},
                        {field: 'image', title: __('Image'), formatter: Table.api.formatter.image},
                        {field: 'images', title: __('Images'), formatter: Table.api.formatter.images},
                        {field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclas