fastadmin 后台管理框架使用技巧(持续更新中)
fastadmin 后台管理框架使用技巧(持续更新中)
FastAdmin是一款以ThinkPHP 5.0框架为基础并整合Bootstrap组件打造的高效后台管理系统工具。了解更多信息,请访问官方文档:https://doc.fastadmin.net/docs/index.html
为了方便查阅,在使用过程中会整理一些小技巧供参考。实际上,在FastAdmin论坛上有一篇文章介绍了后台表格的功能描述得也挺清楚。如果有任何疑问,请先访问:一张图解析FastAdmin中的表格列表的功能
如果还没解决,那就继续往下看了
1、修改默认排序字段
在FastAdmin后台系统中, 如果数据表中配置了重量字段, 则在index页面显示时, 包含排序按钮会展示三个选项; 如果没有对应的数据表, 则仅提供修改和删除功能的两个选项。
如果不想继续使用默认的weigh字段进行排序的话,则只需改动一处即可完成表初始化时的排序设置。具体操作方法是将default参数中的排序方式替换为你所需的具体类型即可。
如图所示:

实际上,在require.js中位于大约65行处可以看到的是table在初始化过程中预设为dragsortfield:weigh设置。只需修改这一配置即可。
2、自定义菜单
默认情况下自带三个操作按钮分别为拖拽编辑和删除如果您需要自定义菜单按钮同样很简单在《解析fastadmin表格列表功能》这篇文章中提到它通常有三种形式包括弹出窗口ajax和新选项卡这些样式可以通过在class属性中添加不同实现效果其中弹出窗口采用btn-dialog类即可实现其主要功能仅用于数据展示并未涉及数据处理
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}
效果如图所示:

,
如果是要操作数据的话,比如自带的edit和add,需要再增加
1 cow_list: function () {
2 Controller.api.bindevent();
3 },
作为index处理需要注意特别处理。作为index方法涉及两个步骤:首先是调用GET方法渲染基础模板页面;随后通过AJAX接口获取所需数据。因此,在JavaScript代码中需要相应地调整相关的URL路径设置以确保正确性。例如可以直接指定所需的查询参数。

可以选择直接自定义查询条件。两者的主要区别在于后者通过在弹窗展示出的index页面上对通用搜索栏中的相关字段进行调整(例如,在原始设置中,默认情况下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` 快速生成切换按钮
AI写代码
我们可以通过自定义渲染实现多样化展示效果。具体而言,在展示index页面时会遇到问题:当进行订单查询操作时(即每次点击"浏览商品"功能),一个订单可能会关联多个商品数据项。由于当前展示逻辑无法直接呈现这些多条商品信息(如将所有商品信息合并到同一个展示位置),因此需要将每个订单对应的全部商品信息整合到同一个字段中。举例如下图所示:其中'goods'字段采用了与controller中的'data:with'关系配合的方式配置了一个一对多的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中使用控制器中的数据
如果要在JavaScript中调用Controller中的方法就不能直接使用this->view->assign()这个命令 而需要改为执行以下步骤: 首先 使用this->assignconfig("total" $total) 然后 在JavaScript环境中访问对应的配置项 即可以访问Config.total 或者参考文章:js中如何使用Controller中的数据
5、自定义配置
在fast中集成多种类型的配置信息种类繁多,在配置项目时非常便捷如比例参数设置和开关功能设置等
如果希望进行自定义配置设置,并且不想过于复杂的话
1 'radio' => __('Radio'),
2 'array' => __('Array'),
3 'custom' => __('Custom'),
4 'rank' =>'名次规则',
5 ];
6 return $typeList;
7 }
为了在application/admin/view/general/config/index.html文件中增添自定义配置的格式,请参考以下做法:例如我这个采用的是借鉴数组的结构。
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标签的title属性上必须要有设置内容;否则,在跳出页面时缺少上方标题部分。
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="申请提现">
8 <i class="fa fa-leaf"></i>申请提现
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 }
最终效果图如下:

