fastadmin 后台管理框架使用技巧(持續更新中)

FastAdmin是一款基於ThinkPHP5+Bootstrap的極速后台開發框架，具體介紹，請查看文檔，文檔地址為:https://doc.fastadmin.net/docs/index.html

這里只整理一下在使用過程中用到的小技巧，以便用到的時候查看，其實，在fastadmin的論壇中，有一篇介紹后台表格的文章，說的也不錯，如有問題，請先點擊：一張圖解析FastAdmin中的表格列表的功能

如果還沒解決，那就繼續往下看了

1、修改默認排序字段

在fastadmin后台中，如果數據表里存在weigh字段，則index頁面顯示的時候，包括排序按鈕是顯示三個按鈕，如果沒有，則顯示修改和刪除兩個按鈕

如果不想要使用默認字段weigh來排序的話，只需要改一個地方就好了，就是在table初始化的時候，把默認的排序字段改成你想要其他的字段就行了

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

2、自定義菜單

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

{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate,
    buttons:[  3  {  4             name: 'cow_list',
            hidden:false,
            title: '可用牛牛',
            classname: 'btn btn-xs btn-success btn-dialog',
            icon: 'fa fa-github-alt',
            url: 'farm/log/index',
10          　 extend:'data-area=\'["60%","70%"]\'',

11　　 },
2 ], formatter: Table.api.formatter.operate}

效果如圖所示：，

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

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

因為是index，要特殊一些，因為index方法包含了get和ajax兩步操作，get渲染出主頁模板，然后再用ajax請求數據，所以還得修改js中index對應的URL地址，比如直接獲取參數，或者直接自定義查詢條件，兩者區別在於后者直接修改了在彈窗出現的index頁面中通用搜索顯示時候的相應字段的默認值，比如user_id默認為空，自定義之后，直接user_id為指定值了。

3、渲染數據

我們知道，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` 快速生成多個按鈕 > `Table.api.formatter.toggle` 快速生成切換按鈕

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

  {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中使用控制器中的數據

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

5、自定義配置

在fast中，自帶這很多類型的配置信息，類型比較豐富，有字符、文本、數組、單圖、多圖等，在做一下配置項的時候非常方便，比如一些比例設置、開關設置等

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

        'radio'    => __('Radio'),
        'array'    => __('Array'),
        'custom'   => __('Custom'),
        'rank'     =>'名次規則',
 ]; 6     return $typeList; 7 }

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

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

最后展示一下效果

6、自定義按鈕

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

html代碼，切記a標簽的title屬性一定要有，否則在彈出框中沒有頂部的標題：

    <a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;">
        <i class="fa fa-dollar"></i>
        <span class="extend">
            賬戶余額：<span id="price">0</span>
        </span>
    </a>
    <a class="btn btn-info btn-dialog btn-withdraw" href="shop/log/withdraw" data-name="withdraw" title="申請提現">
        <i class="fa fa-leaf"></i>申請提現  9     </a>
</div>

在js中增加事件：這段代碼很重要，自定義什么方法就給什么方法綁定event事件

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

最終效果圖如下：

 下面又是一個詳細的補充，因為在這個位置，自定義按鈕，使用btn-dialog，像一些title，data-title=“彈窗標題”，href=“跳轉地址” ，data-area='["40%","35%"]'都好說，data-params也不好使，只能在href后綁定參數，但是不能像btn-edit一樣傳遞選中行的參數ids，

所以如果想傳遞選中行的參數，得手動在js中綁定參數，就是下面這種，或者在每一行的operate里添加自定義按鈕，在那里參數ids是fast底層綁定的，

最終效果圖：

index.html中的相關代碼：

<a href="javascript:;" class="btn btn-success btn-disabled disabled" id="btn-recharge-credit"><i class="fa fa-plus"></i> 充值銷賬</a>
<a href="javascript:;" class="btn btn-success btn-disabled disabled" id="btn-change-credit"><i class="fa fa-cny"></i> 調整額度</a>
<a href="javascript:;" class="btn btn-success btn-multi btn-disabled disabled" data-params="state=1"><i class="fa fa-eye"></i>解凍</a>
<a href="javascript:;" class="btn btn-success btn-multi btn-disabled disabled" data-params="state=0"><i class="fa fa-eye-slash"></i>凍結</a>

充值銷賬和調整額度是自己加的，解凍凍結是系統自帶的multi方法

相關js代碼部分：

// 為表格綁定事件
Table.api.bindevent(table);  3 
// 點擊充值銷賬按鈕
$(document).on("click", "#btn-recharge-credit", function () {  6     let ids = Table.api.selectedids(table);  7     console.log(ids);//注意ids 為數組
    // var url = 'jq/finance/credit_account/edit?ids='+ids;//彈出窗口
    // Fast.api.open(url, '充值銷賬',{
    // callback:function (value) {
    // console.log(value);
    // }
    // });
    //還是按照ids個數多個彈框吧
    for (let index in ids) { 16         var url = 'jq/finance/credit_account/edit?ids='+ids[index];//彈出窗口
        Fast.api.open(url, '充值銷賬',{area:['40%', '35%']}); 18  } 19 }); 20 // 點擊調整額度按鈕
$(document).on("click", "#btn-change-credit", function () { 22     let ids = Table.api.selectedids(table); 23     console.log(ids);//注意ids 為數組
    // var url = 'jq/finance/credit_account/recharge?ids='+ids;//彈出窗口
    // Fast.api.open(url, '調整額度',{
    // callback:function (value) {
    // console.log(value);
    // }
    // });
    for (let index in ids) { 31         var url = 'jq/finance/credit_account/recharge?ids='+ids[index];//彈出窗口
        Fast.api.open(url, '調整額度',{ 33             area:['35%', '30%'] 34  }); 35  } 36 });

標題，還可以自定義css樣式：Fast.api.open(url, '<span style="color: red">充值銷賬</span>',{area:['40%', '35%']});

下面這段代碼很重要，如果不加的話，頁面提交就是原始提交，不走ajax了，而且很多遠程selectpage都失效了

add: function () {  2  Controller.api.bindevent();  3 },  4 //充值銷賬，直接借助edit方法
edit: function () {  6  Controller.api.bindevent();  7 },  8 //調整額度，這段很重要
recharge:function() { 10  Controller.api.bindevent(); 11 }, 12 api: { 13     bindevent: function () { 14         Form.api.bindevent($("form[role=form]")); 15  } 16 }

7、二級分類

在有的時候，需要有多級類別，比如添加商品的時候，需要先選擇父類，再選擇子類，其實，這個有點像三級聯動，但是自己寫起來比較麻煩，在fast中有已經寫好了，詳情請見插件中的開發實例中，這里只是整理一部分。

效果如圖所示：父類是“心理”，然后下面有“心理測試”，“心理暗示”，兩個子類，這樣就能實現效果了

，

此處是源碼部分：

<div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('Category_id')}:</label>
    <div class="col-xs-12 col-sm-8">
        <div class="form-inline" data-toggle="cxselect" data-selects="first,second">
            <select data-rule="required" style="width: 50%" class="first form-control" name="row[category_pid]" data-url="ajax/category?type=science&amp;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>
        </div>
    </div>
</div>

 這里重點是調用了ajax.php下的category方法，並傳遞兩個參數，注意傳遞pid=0之后，需要更改下category方法，這里就不說明了 。

補充：在fast自動生成的selectpage時，默認是傳id的，如果要自定義參數的話，可直接在url后追加，值得注意的是，像一些“>”、“<”等符號必須轉義才能用，不然會被當成普通字符串處理，

以下是實現自定義條件為 custom[type][] = <，custom[type][] = 3, 即type < 3，其中，&#60;位小於號<的十進制，也可以采用轉義字符&lt;，就像字符&用&amp;表示一樣

   <div class="form-group col-lg-6 col-md-6">
      <label class="control-label col-xs-12 col-sm-4">{:__('Out_bill_unit')}:</label>
      <div class="col-xs-12 col-sm-8">
        <input id="c-out_bill_unit" data-rule="required" data-source="jq/product/Agent_company/selectpage?custom[type][]=&#60;&amp;custom[type][]=3" class="form-control selectpage" name="row[out_bill_unit]" type="text" value="">
      </div>
  </div>

8、詳情內自定義審核按鈕

 一般在查看詳情的時候，有修改操作，自動生成的就是這個樣子，默認就是確定及重置操作，其中確定是提交到form表單指定的action地址上，已經滿足了日常修改的需求

 但有時候，只有一個提交是不夠的，特別是用到審核的時候，既有審核通過，也有審核拒絕，都是提交，那改怎么辦呢，其實就是動態的修改form表單action指定的地址，

實現后效果如下：

 這是代碼：

<div class="form-group layer-footer">
    <label class="control-label col-xs-12 col-sm-2"></label>
    <div class="col-xs-12 col-sm-8">
 {if condition="$row['admin_status'] eq 0"}  5             <button onclick="on_sub(true);" class="btn btn-success">取消咨詢</button>
 {/if}  7  {if condition="$row['admin_refund_status'] eq 0"}  8             <button onclick="on_sub(false);" class="btn btn-warning">同意退款</button>
 {/if} 10         <!-- <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>-->
        <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
    </div>
    <input type="hidden" id="is_true" name="is_true" value="0">
    <script>
        var on_sub = function (on) { 16             var url = on ? 'Consult/cancel' : 'Consult/refund'; 17  url = url + '?ids={:input("ids")}'; 18  $('#edit-form').attr('action',url); 19  } 20     </script>
</div>

自動生成的edit頁面，提交的時候默認是edit

9、手動增加軟刪除

在最開始設計表用命令生成增刪改查的時候，如果一開始沒有設計delete_time字段，就不能實現軟刪除，所以在后來想要再添加的時候，稍微有點麻煩，其實完全可以重新生成一個測試表，仿照新生成的model改一下就行了，強烈建議一開始就把軟刪除加上，不然如果已經寫了接口再添加的話，你會罵娘的，關於軟刪除，更多可以查看手冊：軟刪除

use traits\model\SoftDelete;  2 
class Product extends Model  4 {  5     use SoftDelete;  6     // 自動寫入時間戳字段
    protected $autoWriteTimestamp = 'int';  8 
    // 定義時間戳字段名
    protected $createTime = 'createtime'; 11     protected $updateTime = 'updatetime'; 12     protected $deleteTime = 'delete_time';//默認就是deleteTime,所以此處直接可以省略可以不寫

需要注意的是：tp5底層實現軟刪除的delete_time字段默認值是null，而不是0，所以這個地方一定要注意！

10、手動更改toggle

一般toggle開關針對的是status字段，而且默認值是0或1，但是系統用戶與后台管理員的status是字符串normal與hidden，所以要是也想實現toggle開關，可以添加yes:'normal',no:'hidden'，還是直接上代碼吧

{  2     field: 'status', title: __("Status"),  3     searchList: {'hidden': __('Hidden'), 'normal': __('Normal')},  4     formatter: function (value, row, index) {  5         if(row.id == Config.admin.id){  6             return '';  7  }  8         return Table.api.formatter.toggle.call(this, value, row, index);  9  }, 10     yes: 'normal', 11     no: 'hidden'
},

然后，處理事件 我直接手寫的

/**  2  * 批量更新  3  * @internal  4  */
public function multi($ids = "")  6 {  7     // 管理員禁止批量操作  8  //暫不考慮ids 是多個的情況下
    if ($ids > 1) { 10         $status = $this->model->where('id',$ids)->value('status'); 11         $new_status = $status == 'normal' ? 'hidden' : 'normal' ; 12         $this->model->save([ 13             'status'=>$new_status,
        ],['id'=>$ids]); 15         $this->success('操作成功'); 16     } else { 17         $this->error('超級管理員不能隱藏'); 18  } 19 }

如果有其他更好的方法，歡迎留言交流！

11、設置某字段正序或倒序按鈕

{field: 'id', title: __('Id'),operate:false,sortable: true},

 這個太簡單了，實在是不想多說了，其實就是字段在sql中的asc和desc，所以對於先查詢出來，再二次加工的那種就不生效了

12、二級分類

在很多地方都用到二級分類，包括商品的一級分類是什么，二級分類是什么，選擇范圍只能是該一級分類下的二級分類，不多說了，還是直接上代碼吧

這段代碼在fastadmin的開發實例中有，可以參考那個，不過修改只提供了一種，這里還有更簡單的方式

  <select class="first form-control" style="width: 50%" data-rule="required"
name="row[jq_category_id]" data-url="jq/ajax/category" >
      <option selected="selected" value="{$row.jq_category_id|htmlentities}">{$row.jq_category_name|htmlentities}</option>
  </select>
   <select class="second form-control" style="width:50%" data-rule="required"
 name="row[jq_category_child_id]" data-url="jq/ajax/category"
data-query-name="pid" value="{$row.jq_category_child_id|htmlentities}">
      <option selected="selected" value="{$row.jq_category_child_id|htmlentities}">{$row.jq_category_child_name|htmlentities}</option>
   </select>

  <select class="first form-control" style="width: 50%" data-rule="required"
 name="row[jq_insurance_company_id]" data-url="jq/ajax/company?type=1" data-value="{$row.jq_insurance_company_id|htmlentities}">
  </select>
  <select class="second form-control" style="width: 50%" data-rule="required"
 name="row[jq_insurance_child_company_id]" data-value="{$row.jq_insurance_child_company_id|htmlentities}"
 data-url="jq/ajax/company?type=3" data-query-name="pid">
  </select>

13、控制table中字段的長度

在列表展示中，如果像一些字段比如簡介或備注之類的東西，內容太長，全部顯示有點不友好，這里是限制長度，給個width(百分比或ps都行)，字符過長顯示...，鼠標放上去，顯示全部

{field: 'des', title: __('Des'), operate:false,cellStyle:function (value,row,index,field) {  2         return {  3  css: {  4                 "min-width": "150px",  5                 "white-space": "nowrap",  6                 "text-overflow": "ellipsis",  7                 "overflow": "hidden",  8                 "max-width":"300px"
 } 10  }; 11     },formatter:function (value,row,index,field) { 12         var span=document.createElement('span'); 13         span.setAttribute('title',value); 14         span.innerHTML = value; 15         return span.outerHTML; 16     }},

通過cssStyle自定義樣式，然后再自定義formatter即可，效果如下所示

 14、data_rule 驗證規則

常用的data_rule就是required了，表示該字段不能為空，常用的還有 mobile，tel，email，url，range(0~)，length(1~5)等，多個驗證用空格連接，或使用豎杠|。

更多規則直接參考nice-validator，因為fastadmin就是用的這個插件，或者直接參考文檔表單驗證部分，里面更全

<div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('Claim_mobile')}:</label>
    <div class="col-xs-12 col-sm-8">
        <input id="c-claim_mobile" data-rule="required mobile|tel" class="form-control" name="row[data][claim_mobile]" type="text" value="">
    </div>
</div>

 15、關於table的搜索問題

關閉表格中左側的切換視圖、顯示列 和導出數據等按鈕：

<table 2  id="table"
 class="table table-striped table-bordered table-hover table-nowrap"
 data-show-export="false"
 data-show-toggle="false"
 data-show-columns="false"
 width="100%">
</table>，也可以在js文件中控制

showToggle: false,//隱藏切換按鈕
showColumns: false,//隱藏顯示列按鈕
showExport: false,//隱藏導出數據按鈕
search:false,//隱藏快速搜索
searchFormVisible: true,//默認打開通用搜索
showSearch: false,//隱藏通用搜索按鈕

16、關於使用地圖位置（經緯度）選擇插件的注意點
在使用經緯度插件的時候，data-toggle="addresspicker" 最好是不要放在button標簽或者a標簽里面，因為如果在button和a標簽外面有form表單的話，會觸發整個表單的提交工作，
添加還好點，因為添加的時候其他字段有驗證會阻止當前表單的提交工作，但是edit編輯的時候就不能阻止了，當想修改經緯度的時候，剛一點擊就觸發了保存操作，就修改不了了，
所以最好的是，放一個div標簽，給個btn的class就行了

<div class="btn btn-success" data-toggle="addresspicker" data-lat-id="c-lat" data-lng-id="c-lon">選取經緯度</div>