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

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:[
         {
             name: 'cow_list',
             hidden:false,
             title: '可用牛牛',
             classname: 'btn btn-xs btn-success btn-dialog',
             icon: 'fa fa-github-alt',
             url: 'farm/log/index',
         },
     ], 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) {
      var content = '';
      value.forEach((value,key)=>{
          content += value.title+'-';
          content += value.attr_name+'*';
          content += value.num+',';
      });
      return content;
   }},
   // {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'     =>'名次规则',
     ];
     return $typeList;
 }

然后在application/admin/view/general/config/index.html文件中，增加自定义配置的格式就行了，比如我这个是借用一下数组的格式

 {case rank}
 <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>申请提现
     </a>
 </div>

在js中增加事件：

 withdraw: function () {
     Controller.api.bindevent();
 },
 api: {
     bindevent: function () {
         Form.api.bindevent($("form[role=form]"));
     }
 }

最终效果图如下：

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方法，这里就不说明了 。

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"}
             <button onclick="on_sub(true);" class="btn btn-success">取消咨询</button>
         {/if}
         {if condition="$row['admin_refund_status'] eq 0"}
             <button onclick="on_sub(false);" class="btn btn-warning">同意退款</button>
         {/if}
         <!--            <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) {
             var url = on ? 'Consult/cancel' : 'Consult/refund';
             url = url + '?ids={:input("ids")}';
             $('#edit-form').attr('action',url);
         }
     </script>
 </div>

自动生成的edit页面，提交的时候默认是edit

9、手动增加软删除

在最开始设计表用命令生成增删改查的时候，如果一开始没有设计delete_time字段，就不能实现软删除，所以在后来想要再添加的时候，稍微有点麻烦，其实完全可以重新生成一个测试表，仿照新生成的model改一下就行了，强烈建议一开始就把软删除加上，不然如果已经写了接口再添加的话，你会骂娘的，关于软删除，更多可以查看手册：软删除

 use traits\model\SoftDelete;

 class Product extends Model
 {
     use SoftDelete;
     // 自动写入时间戳字段
     protected $autoWriteTimestamp = 'int';

     // 定义时间戳字段名
     protected $createTime = 'createtime';
     protected $updateTime = 'updatetime';
     protected $deleteTime = 'delete_time';//默认就是deleteTime,所以此处直接可以省略可以不写

需要注意的是：tp5底层实现软删除的delete_time字段默认值是null，而不是0，所以这个地方一定要注意！

10、手动更改toggle

一般toggle开关针对的是status字段，而且默认值是0或1，但是系统用户与后台管理员的status是字符串normal与hidden，所以要是也想实现toggle开关，可以添加yes:'normal',no:'hidden'，还是直接上代码吧

 {
     field: 'status', title: __("Status"),
     searchList: {'hidden': __('Hidden'), 'normal': __('Normal')},
     formatter: function (value, row, index) {
         if(row.id == Config.admin.id){
             return '';
         }
         return Table.api.formatter.toggle.call(this, value, row, index);
     },
     yes: 'normal',
     no: 'hidden'
 },

然后，处理事件 我直接手写的

 /**
  * 批量更新
  * @internal
  */
 public function multi($ids = "")
 {
     // 管理员禁止批量操作
     //暂不考虑ids 是多个的情况下
     if ($ids > 1) {
         $status = $this->model->where('id',$ids)->value('status');
         $new_status = $status == 'normal' ? 'hidden' : 'normal' ;
         $this->model->save([
             'status'=>$new_status,
         ],['id'=>$ids]);
         $this->success('操作成功');
     } else {
         $this->error('超级管理员不能隐藏');
     }
 }

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

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) {
         return {
             css: {
                 "min-width": "150px",
                 "white-space": "nowrap",
                 "text-overflow": "ellipsis",
                 "overflow": "hidden",
                 "max-width":"300px"
             }
         };
     },formatter:function (value,row,index,field) {
         var span=document.createElement('span');
         span.setAttribute('title',value);
         span.innerHTML = value;
         return span.outerHTML;
     }},

通过cssStyle自定义样式，然后再自定义formatter即可，效果如下所示

14、data_rule 验证规则

常用的data_rule就是required了，表示该字段不能为空，其他的还有 mobile，tel，email，url，chinese等，更多规则直接参考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、