FastAdmin是一款基于ThinkPHP5+Bootstrap的極速后臺(tái)開(kāi)發(fā)框架，具體介紹，請(qǐng)查看文檔，文檔地址為:https://doc./docs/index.html

這里只整理一下在使用過(guò)程中用到的小技巧，以便用到的時(shí)候查看，其實(shí)，在fastadmin的論壇中，有一篇介紹后臺(tái)表格的文章，說(shuō)的也不錯(cuò)，如有問(wèn)題，請(qǐng)先點(diǎn)擊：一張圖解析FastAdmin中的表格列表的功能

如果還沒(méi)解決，那就繼續(xù)往下看了

1、修改默認(rèn)排序字段

在fastadmin后臺(tái)中，如果數(shù)據(jù)表里存在weigh字段，則index頁(yè)面顯示的時(shí)候，包括排序按鈕是顯示三個(gè)按鈕，如果沒(méi)有，則顯示修改和刪除兩個(gè)按鈕

如果不想要使用默認(rèn)字段weigh來(lái)排序的話，只需要改一個(gè)地方就好了，就是在table初始化的時(shí)候，把默認(rèn)的排序字段改成你想要其他的字段就行了

如圖所示：，其實(shí)，我們可以在require.js中大約65行出看到，table在初始化的時(shí)候，默認(rèn)是dragsortfield:weigh，只要改掉這個(gè)值就行了

2、自定義菜單

 在fastadmin中，默認(rèn)是自帶三個(gè)操作按鈕，分別是拖拽、編輯和刪除，如果想要自定義菜單按鈕的話，也挺簡(jiǎn)單，在“一張圖解析fastadmin表格列表的功能”文章中有提過(guò)，一般是有三種形式：彈出窗口、ajax和新選項(xiàng)卡，就是在classname中增加不同的樣式，彈窗："btn-dialog"，ajax："btn-magic btn-ajax"，新選項(xiàng)卡："btn-addtabs"，通過(guò)不同的樣式綁定了不同的事件，下面一個(gè)示例是彈窗的，而且只是數(shù)據(jù)展示，還沒(méi)有數(shù)據(jù)處理

 1 {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate,
 2     buttons:[
 3         {
 4             name: 'cow_list',
 5             hidden:false,
 6             title: '可用牛牛',
 7             classname: 'btn btn-xs btn-success btn-dialog',
 8             icon: 'fa fa-github-alt',
 9             url: 'farm/log/index',
10         },
11     ], formatter: Table.api.formatter.operate}

效果如圖所示：，

 如果是要操作數(shù)據(jù)的話，比如自帶的edit和add，需要再增加

1 cow_list: function () {
2     Controller.api.bindevent();
3 },

因?yàn)槭莍ndex，要特殊一些，因?yàn)閕ndex方法包含了get和ajax兩步操作，get渲染出主頁(yè)模板，然后再用ajax請(qǐng)求數(shù)據(jù)，所以還得修改js中index對(duì)應(yīng)的URL地址，比如直接獲取參數(shù)，或者直接自定義查詢條件，兩者區(qū)別在于后者直接修改了在彈窗出現(xiàn)的index頁(yè)面中通用搜索顯示時(shí)候的相應(yīng)字段的默認(rèn)值，比如user_id默認(rèn)為空，自定義之后，直接user_id為指定值了。

3、渲染數(shù)據(jù)

我們知道，fastadmin底層自帶了很多渲染數(shù)據(jù)的格式，比如

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

我們可以自定義渲染數(shù)據(jù)，比如訂單查詢的時(shí)候，一個(gè)訂單可能會(huì)對(duì)應(yīng)多條商品數(shù)據(jù)，這在index頁(yè)面顯示的時(shí)候，就不好顯示了，所以可以把每個(gè)訂單對(duì)應(yīng)的商品數(shù)據(jù)，都放在一個(gè)字段里，示例如下圖所示，此處goods字段是控制器中with的一對(duì)多的goods模型

 1   {field: 'goods',title:'商品',formatter:function (value,data,key) {
 2      var content = '';
 3      value.forEach((value,key)=>{
 4          content += value.title+'-';
 5          content += value.attr_name+'*';
 6          content += value.num+',';
 7      });
 8      return content;
 9   }},
10   // {field: 'address_address', title: __('Address_address')},

4、js中使用控制器中的數(shù)據(jù)

如果想在js中調(diào)用控制器中的方法，就不能使用$this->view->assign()了，得使用$this->assignconfig("total", $total)，然后在js中調(diào)用Config.total，或可參考文章：js中如何使用控制器中的數(shù)據(jù)

5、自定義配置

在fast中，自帶這很多類型的配置信息，類型比較豐富，有字符、文本、數(shù)組、單圖、多圖等，在做一下配置項(xiàng)的時(shí)候非常方便，比如一些比例設(shè)置、開(kāi)關(guān)設(shè)置等

如果想自定義配置的話，也很簡(jiǎn)單，首先在application/common/model/config.php中獲取配置類型的方法，可以追加自己想要的類型，比如：

1         'radio'    => __('Radio'),
2         'array'    => __('Array'),
3         'custom'   => __('Custom'),
4         'rank'     =>'名次規(guī)則',
5     ];
6     return $typeList;
7 }

然后在application/admin/view/general/config/index.html文件中，增加自定義配置的格式就行了，比如我這個(gè)是借用一下數(shù)組的格式

 1 {case rank}
 2 <dl class="fieldlist" data-name="row[{$item.name}]">
 3     <dd>
 4         <ins>名次</ins>
 5         <ins>分紅比例</ins>
 6     </dd>
 7     <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a></dd>
 8     <textarea name="row[{$item.name}]" class="form-control hide" cols="30" rows="5">{$item.value}</textarea>
 9 </dl>
10 {/case}

最后展示一下效果

6、自定義按鈕

這里的自定義按鈕并不是表格中的自定義菜單，而是工具欄按鈕，如圖所示：

html代碼，切記a標(biāo)簽的title屬性一定要有，否則在彈出框中沒(méi)有頂部的標(biāo)題：

 1     <a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;">
 2         <i class="fa fa-dollar"></i>
 3         <span class="extend">
 4             賬戶余額：<span id="price">0</span>
 5         </span>
 6     </a>
 7     <a class="btn btn-info btn-dialog btn-withdraw" href="shop/log/withdraw" data-name="withdraw" title="申請(qǐng)?zhí)岈F(xiàn)">
 8         <i class="fa fa-leaf"></i>申請(qǐng)?zhí)岈F(xiàn)
 9     </a>
10 </div>

在js中增加事件：

1 withdraw: function () {
2     Controller.api.bindevent();
3 },
4 api: {
5     bindevent: function () {
6         Form.api.bindevent($("form[role=form]"));
7     }
8 }

最終效果圖如下：

7、二級(jí)分類

在有的時(shí)候，需要有多級(jí)類別，比如添加商品的時(shí)候，需要先選擇父類，再選擇子類，其實(shí)，這個(gè)有點(diǎn)像三級(jí)聯(lián)動(dòng)，但是自己寫起來(lái)比較麻煩，在fast中有已經(jīng)寫好了，詳情請(qǐng)見(jiàn)插件中的開(kāi)發(fā)實(shí)例中，這里只是整理一部分。

效果如圖所示：父類是“心理”，然后下面有“心理測(cè)試”，“心理暗示”，兩個(gè)子類，這樣就能實(shí)現(xiàn)效果了

，

此處是源碼部分：

1 <div class="form-group">
2     <label class="control-label col-xs-12 col-sm-2">{:__('Category_id')}:</label>
3     <div class="col-xs-12 col-sm-8">
4         <div class="form-inline" data-toggle="cxselect" data-selects="first,second">
5             <select data-rule="required" style="width: 50%" class="first form-control" name="row[category_pid]" data-url="ajax/category?type=science&pid=0"></select>
<select data-rule="required" style="width: 50%" class="second form-control" name="row[category_id]" data-url="ajax/category" data-query-name="pid"></select>
6         </div>
7     </div>
8 </div>

這里重點(diǎn)是調(diào)用了ajax.php下的category方法，并傳遞兩個(gè)參數(shù)，注意傳遞pid=0之后，需要更改下category方法，這里就不說(shuō)明了 。