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

阿新 • • 發佈：2020-07-30

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

功能描述
請根據圖片上的數字索引檢視對應功能說明。

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程式碼，直接修改即可。

啟用匯入請參考：http://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部分。

完整程式碼
PHP程式碼

<?php

namespace app\admin\controller;

use app\common\controller\Backend;

/**
 * 單頁管理
 *
 * @icon fa fa-circle-o
 * @remark 用於管理普通的單頁面,通常用於關於我們、聯絡我們、商務合作等單一頁面
 */
class Page extends Backend
{

    protected $model = null;
    protected $relationSearch = true;

    public function _initialize()
    {
        parent::_initialize();
        $this->model = model('Page');
    }

    /**
     * 檢視
     */
    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);

            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: 'page/index',
                    add_url: 'page/add',
                    edit_url: 'page/edit',
                    del_url: 'page/del',
                    multi_url: 'page/multi',
                    table: 'page',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                sortName: 'weigh',
                columns: [
                    [
                        {field: 'state', checkbox: true},
                        {field: 'id', title: __('Id'), operate: false},
                        {field: 'category_id', title: __('Category_id'), operate: '='},
                        {field: 'category.name', title: __('Category'), operate: '=', formatter: Table.api.formatter.search},
                        {field: 'title', title: __('Title'), operate: 'LIKE %...%', placeholder: '關鍵字，模糊搜尋'},
                        {field: 'flag', title: __('Flag'), formatter: Table.api.formatter.flag, operate: false},
                        {field: 'image', title: __('Image'), formatter: Table.api.formatter.image, operate: false},
                        {field: 'views', title: __('Views'), operate: false},
                        {field: 'comments', title: __('Comments'), operate: false},
                        {field: 'weigh', title: __('Weigh'), operate: false},
                        {field: 'status', title: __('Status'), formatter: Table.api.formatter.status, searchList: {'normal': __('Normal'), 'hidden': __('Hidden')}, style: 'min-width:100px;'},
                        {field: 'createtime', title: __('Create Time'), formatter: Table.api.formatter.datetime, operate: 'BETWEEN', type: 'datetime', addclass: 'datetimepicker', data: 'data-date-format="YYYY-MM-DD"'},
                        {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'},
                                {name: 'detail', text: 'Ajax', title: 'Ajax標題', icon: 'fa fa-flash', classname: 'btn btn-xs btn-success btn-ajax', url: 'page/detail'},
                                {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},
                        {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}
                    ]
                ],
                //普通搜尋
                commonSearch: true,
                titleForm: '', //為空則不顯示標題，不定義預設顯示：普通搜尋
            });

            // 為表格繫結事件
            Table.api.bindevent(table);
            
            //指定搜尋條件
            $(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;
            });

            //獲取選中項
            $(document).on("click", ".btn-selected", function () {
                Layer.alert(JSON.stringify(table.bootstrapTable('getSelections')));
            });

            //啟動和暫停按鈕
            $(document).on("click", ".btn-start,.btn-pause", function () {
                //在table外不可以使用新增.btn-change的方法
                //只能自己呼叫Table.api.multi實現
                Table.api.multi("changestatus", 0, table, this);
            });
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});

HTML程式碼：

<div class="panel panel-default panel-intro">
    {:build_heading()}

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        {:build_toolbar()}
                        <a class="btn btn-info btn-disabled disabled btn-selected" href="javascript:;"><i class="fa fa-leaf"></i> 獲取選中項</a>
                        <div class="dropdown btn-group {:$auth->check('page/multi')?'':'hide'}">
                            <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                            <ul class="dropdown-menu text-left" role="menu">
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li>
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>
                            </ul>
                        </div>
                        <a class="btn btn-success btn-singlesearch" href="javascript:;"><i class="fa fa-user"></i> 自定義搜尋</a>
                        <a class="btn btn-success btn-change btn-start" data-params="action=start" data-url="example/bootstraptable/change" href="javascript:;"><i class="fa fa-play"></i> 啟動</a>
                        <a class="btn btn-danger btn-change btn-pause" data-params="action=pause" data-url="example/bootstraptable/change" href="javascript:;"><i class="fa fa-pause"></i> 暫停</a>
                    </div>
                    <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>
                </div>
            </div>

        </div>
    </div>
</div>

轉自：http://forum.fastadmin.net/d/323

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

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

一張圖解析FastAdmin中的FormBuilder表單生成器

轉：一張圖告訴你，如何構建內網隱蔽通道

【轉】一次java系統執行緒佔用CPU過高問題的解決

【轉】一千行MySQL學習筆記

【轉】一文讀懂PCA演算法的數學原理

容器（四）一張圖搞懂容器所有操作【21】

【轉】python圖片切分（一張圖片切分為多張小圖片）

徹底搞懂 Kubernetes 的底層網路，看這幾張圖就夠了【轉】

【轉】go 解析16進位制字串中的bit, byte.

宋寶華：世上最好的共享記憶體(Linux共享記憶體最透徹的一篇)【轉】

【轉】CentOS7一鍵部署OpenStack

Linux下用火焰圖進行效能分析【轉】

樸英敏：用crash工具分析Linux核心死鎖的一次實戰【轉】

prometheus告警技術初探（一）【轉】

【轉】多圖+程式碼 | 詳解Python操作Excel神器openpyxl的各種操作！

【轉】前端筆記之Vue（一）初識SPA和Vue&webpack配置和vue安裝&指令

【轉】學習ReactNative筆記整理一___JavaScript基礎

用callgraph生成的函式呼叫關係圖【轉】

【轉】EA建模-繪製順序圖

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

相關推薦