基于ThinkPHP5和Bootstrap的極速后臺(tái)開(kāi)發(fā)框架呕缭，詳見(jiàn)開(kāi)發(fā)文檔：https://doc.fastadmin.net/docs/index.html
benny也是段時(shí)間接觸到了它，算是入門(mén)理解級(jí)別谒撼，但覺(jué)得這個(gè)框架的好處就是可以提高我們的開(kāi)發(fā)效率，一鍵生成開(kāi)發(fā)文檔和后臺(tái)管理系統(tǒng)谎柄，對(duì)于長(zhǎng)期寫(xiě)后臺(tái)數(shù)據(jù)接口開(kāi)發(fā)的你們來(lái)說(shuō)房交，不用寫(xiě)后臺(tái)管理系統(tǒng)的html和js代碼簡(jiǎn)直是太完美了徐绑。特此介紹完畢，有興趣的可以去官網(wǎng)了解一下忌穿。
以下是框架自帶的后臺(tái)管理系統(tǒng)表格列表功能詳解：
1.時(shí)間篩選器
如果想在搜索欄使用時(shí)間區(qū)間進(jìn)行搜索抒寂，則可以在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為類(lèi)型掠剑，使用datetime將會(huì)把結(jié)果轉(zhuǎn)換成時(shí)間戳進(jìn)行搜索屈芜，如果你的數(shù)據(jù)庫(kù)存儲(chǔ)的是日期時(shí)間型數(shù)據(jù)，則移除該type屬性朴译，data指附件到input文本框上的屬性
最新版FastAdmin已經(jīng)支持用戶(hù)體驗(yàn)更好的datetimerange插件井佑，使用方式是：
{field:'createtime', title: __('Create Time'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass:'datetimerange'}
2.狀態(tài)列表
默認(rèn)我們的搜索都是一個(gè)文本框，如果需要改成下拉列表框眠寿，則需要使用如下代碼
{field: 'status', title: __('Status'), formatter: Table.api.formatter.status, searchList: {'normal': __('Normal'), 'hidden': __('Hidden')}, style: 'min-width:100px;'},
其中searchList使用的是一個(gè)JSON數(shù)據(jù)躬翁，同時(shí)searchList仍然支持?jǐn)?shù)據(jù)、JSON對(duì)象盯拱、Ajax對(duì)象盒发、Function函數(shù)。
普通搜索欄的搜索薦默認(rèn)都是全部啟用的狡逢，如果想禁用字段在普通搜索欄的顯示迹辐，可以在字段屬性中添加operate: false來(lái)禁用，如下方代碼
{field: 'status', title: __('Status'), operate:false, formatter: Table.api.formatter.status}
3.添加甚侣、編輯明吩、刪除、導(dǎo)入殷费、批量操作按鈕
FastAdmin的添加印荔、編輯低葫、刪除按鈕默認(rèn)是由{:build_toolbar()}生成的，默認(rèn)是全部生成仍律。如果我們只需要其中的部分按鈕嘿悬，則可以傳入?yún)?shù)來(lái)實(shí)現(xiàn)，如{:build_toolbar('refresh,add')}水泉，這樣將只會(huì)生成刷新和添加按鈕善涨。同時(shí)也支持調(diào)整參數(shù)的位置來(lái)調(diào)整最后生成的位置，另外請(qǐng)注意{:build_toolbar()}還會(huì)根據(jù)當(dāng)前管理員的權(quán)限判斷按鈕是否顯示草则，例如你使用{:build_toolbar('refresh,add')}钢拧，如果當(dāng)前管理員沒(méi)有添加的權(quán)限，添加按鈕仍然不會(huì)顯示 炕横。
目前build_toolbar支持的按鈕有：
refresh: 刷新按鈕
add: 添加
edit: 編輯
del: 刪除
import: 導(dǎo)入
批量操作按鈕是直接在視圖頁(yè)面上添加的HTML代碼源内，直接修改即可。
啟用導(dǎo)入請(qǐng)參考：https://forum.fastadmin.net/d/540
4.自定義搜索
FastAdmin中的Bootstrap-table表格的自定義搜索功能是非常強(qiáng)大的份殿，我們可以按需要修改來(lái)實(shí)現(xiàn)自己的搜索功能膜钓，這里實(shí)現(xiàn)的功能是點(diǎn)擊自定義搜索則發(fā)起搜索分類(lèi)ID為1的數(shù)據(jù)，代碼如下：
$(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("當(dāng)前執(zhí)行的是自定義搜索");
return false;
});
首先我們?yōu)樽远x搜索這個(gè)按鈕綁定上點(diǎn)擊事件卿嘲，這樣當(dāng)我們點(diǎn)擊按鈕時(shí)則發(fā)起搜索請(qǐng)求颂斜。其次注意我們獲取了Bootstra-table表格的屬性配置，并修改了其中的pageNumber和queryParams拾枣，pageNumber指頁(yè)碼置為第一頁(yè)沃疮，queryParams是這里的重點(diǎn)，我們修改了其中的filter和op放前，filter是我們的過(guò)濾條件忿磅，op是我們的條件操作符，操作符支持=凭语、!=葱她、LIKE、NOT LIKE似扔、>吨些、>=、<炒辉、<=豪墅、IN(...)、NOT IN(...)黔寇、BETWEEN偶器、NOT BETWEEN、LIKE %...%、IS NULL屏轰、IS NOT NULL颊郎，這里的filter和op支持同時(shí)搜索多個(gè)條件。
5.快速搜索
快速搜索在鍵入關(guān)鍵詞時(shí)將實(shí)時(shí)從服務(wù)端搜索數(shù)據(jù)霎苗，如果你的數(shù)據(jù)表數(shù)據(jù)較大姆吭，建議關(guān)閉此功能，關(guān)閉的方法是使用search:false唁盏，其次快速搜索默認(rèn)只會(huì)搜索主鍵id這個(gè)字段内狸，如果你需要搜索其它字段，則需要在服務(wù)端你的控制器中定義$searchFields這個(gè)值，如下
protected $searchFields = 'id,name,title';
這樣在快速搜索時(shí)將會(huì)搜索id,name,title這三個(gè)字段。
如果需要修改默認(rèn)文本框的placeholder，可以在表格初始化前定義
$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function(){return "自定義placeholder文本";};
6.瀏覽模式、顯示隱藏列侄刽、導(dǎo)出、通用搜索
瀏覽模式可以切換卡片視圖和表格視圖兩種模式侣灶，如果不需要此功能锰茉，可以設(shè)置showToggle: false
顯示隱藏列可以快速切換字段列的顯示和隱藏，如果不需要此功能恕曲，可以設(shè)置showColumns: false鹏氧，如果想要表格中的字段列默認(rèn)隱藏可以設(shè)置字段屬性visible: false即可默認(rèn)隱藏
導(dǎo)出按鈕默認(rèn)將導(dǎo)出整個(gè)表的所有行，如果需要僅導(dǎo)出當(dāng)前分頁(yè)的數(shù)據(jù)佩谣，需要設(shè)置exportDataType: 'basic'把还，如果想導(dǎo)出選中的行，則可以設(shè)置為exportDataType: 'selected'茸俭，如果不需要此功能吊履，可以設(shè)置showExport: false
通用搜索指表格上方的搜索，通用搜索的表單默認(rèn)是隱藏的调鬓，如果需要默認(rèn)顯示艇炎，需要設(shè)置searchFormVisible: true，如果不需要通用搜索功能腾窝，可以設(shè)置commonSearch: false缀踪。如果想要控制字段列不參考搜索則可以設(shè)置字段列屬性為operate: false即可。
7. 分類(lèi)名稱(chēng)(關(guān)聯(lián)搜索出分類(lèi)表的名稱(chēng))
這里顯示的分類(lèi)名稱(chēng)是根據(jù)分類(lèi)表關(guān)聯(lián)查詢(xún)出來(lái)的結(jié)果虹脯，如果我們啟用關(guān)聯(lián)查詢(xún)驴娃，我們必須在當(dāng)前控制器中設(shè)置屬性protected $relationSearch = true;，同時(shí)我們的index方法也需要重寫(xiě)循集，請(qǐng)參考下方的完整代碼中PHP部分唇敞。如果我們啟用了關(guān)聯(lián)查詢(xún)，當(dāng)兩個(gè)表中的字段有沖突時(shí)，我們必須在字段中加上別名疆柔。請(qǐng)參考下方的完整代碼中JS部分蕉世。
8.標(biāo)志和圖片
FastAdmin封裝了許多常用的方法，我們可以快速的調(diào)用即可婆硬。
Table.api.formatter.icon快速將字段渲染成一個(gè)按鈕狠轻，僅支持Fontawesome按鈕
Table.api.formatter.image快速將字段渲染成圖片展示的形式
Table.api.formatter.images快速將字段渲染成多圖片展示的形式,字段數(shù)據(jù)請(qǐng)以,進(jìn)行分隔
Table.api.formatter.status快速將字段渲染成狀態(tài)，默認(rèn)normal/hidden/deleted/locked這四個(gè)狀態(tài)
Table.api.formatter.url快速將字段渲染成URL框
Table.api.formatter.search快速將字段渲染成可搜索的鏈接彬犯，點(diǎn)擊后將執(zhí)行搜索
Table.api.formatter.addtabs快速將字段渲染成可添加到選項(xiàng)卡的鏈接向楼，點(diǎn)擊后將把鏈接添加到選項(xiàng)卡
Table.api.formatter.flag快速將字段渲染成標(biāo)志，僅支持index/hot/recommend/new這四種標(biāo)志
Table.api.formatter.label快速將字段渲染Label標(biāo)簽
Table.api.formatter.datetime快速時(shí)間戳數(shù)據(jù)渲染成日期時(shí)間數(shù)據(jù)
Table.api.formatter.operate操作欄固定按鈕
Table.api.formatter.buttons快速生成多個(gè)按鈕
Table.api.formatter.toggle快速生成切換按鈕
9.狀態(tài)
此處的狀態(tài)是根據(jù)第8項(xiàng)中的Table.api.formatter.status進(jìn)行生成的谐区。如果需要傳入其它狀態(tài)湖蜕，請(qǐng)使用custom參數(shù)，參數(shù)配置為{狀態(tài)1: 'success', 狀態(tài)2: 'grey'}
10.按鈕組
按鈕組的功能是根據(jù)第8項(xiàng)中的Table.api.formatter.buttons進(jìn)行生成的宋列，代碼如下
{field: 'id', title: __('按鈕'), table: table, buttons: [
{name: 'name1', text: '彈窗', title: '彈窗標(biāo)題', icon: 'fa fa-list', classname: 'btn btn-xs btn-primary btn-dialog', url: 'page/detail', callback:function(data){}},
{name: 'name2', text: 'Ajax', title: 'Ajax標(biāo)題', icon: 'fa fa-flash', classname: 'btn btn-xs btn-success btn-ajax', url: 'page/detail', success:function(data, ret){}, error:function(){}},
{name: 'name3', text: '選項(xiàng)卡', title: '選項(xiàng)卡標(biāo)題', icon: 'fa fa-flash', classname: 'btn btn-xs btn-info btn-addtabs', url: 'page/detail'}
], operate:false, formatter: Table.api.formatter.buttons}
按鈕配置支持的參數(shù)有：
name按鈕唯一標(biāo)識(shí),其中add/edit/del/dragsort已經(jīng)被占用,請(qǐng)勿使用昭抒。我們可以在HTML視圖文件的table使用data-buttons-標(biāo)識(shí)來(lái)控制顯示
text按鈕的文本內(nèi)容,如果不需要顯示文本可忽略
title鼠標(biāo)移上去的標(biāo)題或彈窗/選項(xiàng)顯示的標(biāo)題
icon按鈕的圖標(biāo),請(qǐng)使用font-awesome圖標(biāo)庫(kù)
classname按鈕的class, 其中classname中的btn-dialog、btn-ajax炼杖、btn-addtabs灭返，F(xiàn)astAdmin已經(jīng)為這幾個(gè)固定的Class注冊(cè)了事件，所以可以直接使用坤邪，如果想要實(shí)現(xiàn)其它功能熙含，需要自己手動(dòng)編寫(xiě)代碼綁定事件才可使用。
url按鈕的鏈接/Ajax事件請(qǐng)求的URL/彈窗鏈接/選項(xiàng)卡鏈接艇纺，直接function和string類(lèi)型,此鏈接會(huì)自動(dòng)在鏈接后添加ids/{ids},{ids}為當(dāng)行主鍵ID怎静，如果需要傳遞其它字段值，請(qǐng)?jiān)赨RL中使用{字段名}占位即可
refresh自動(dòng)刷新,只針對(duì)btn-ajax事件
confirm確認(rèn)框提示文字,配置后會(huì)在確認(rèn)操作再執(zhí)行對(duì)應(yīng)的事件黔衡，只針對(duì)btn-ajax/btn-dialog/btn-addtabs事件
success事件成功的回調(diào),只針對(duì)btn-ajax事件
error事件失敗的回調(diào),只針對(duì)btn-ajax事件
callback彈窗回傳的回調(diào),只針對(duì)btn-dialog事件
hidden是否隱藏按鈕,按鈕默認(rèn)顯示,支持function和bool類(lèi)型
visible是否顯示按鈕,按鈕默認(rèn)顯示,支持function和bool類(lèi)型
extend按鈕擴(kuò)展信息,可以任意定制按鈕的參數(shù),比如我們想在新窗口中打開(kāi)鏈接蚓聘，則配置extend:' target="_blank"'即可
11.操作
操作區(qū)域默認(rèn)是排序、編輯盟劫、刪除這三個(gè)按鈕夜牡，此功能也是根據(jù)第8項(xiàng)中Table.api.formatter.operate來(lái)實(shí)現(xiàn)的。排序按鈕只在表中存在weigh字段時(shí)才會(huì)出現(xiàn)捞高，編輯按鈕和刪除按鈕會(huì)根據(jù)管理員所擁有的權(quán)限進(jìn)行按需顯示氯材。其次Table.api.formatter.operate也支持buttons屬性來(lái)配置多個(gè)其它按鈕，如示例圖中的詳情按鈕硝岗。請(qǐng)參考下方完整代碼中JS部分氢哮。
來(lái)源：https://forum.fastadmin.net/thread/323，經(jīng)驗(yàn)分享型檀，感謝Karson冗尤。
