一張圖解析FastAdmin中的表格列表的功能javascript
功能描述
請根據圖片上的數字索引查看對應功能說明。php
1.時間篩選器
若是想在搜索欄使用時間區間進行搜索,則能夠在JS中修改修改字段屬性,如java
{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文本框上的屬性jquery
最新版FastAdmin已經支持用戶體驗更好的datetimerange插件,使用方式是:ajax
{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來禁用,以下方代碼json
{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支持的按鈕有:bootstrap
refresh: 刷新按鈕 add: 添加 edit: 編輯 del: 刪除 import: 導入
批量操做按鈕是直接在視圖頁面上添加的HTML代碼,直接修改便可。api
啓用導入請參考:http://forum.fastadmin.net/d/540app
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>