fastadmin 各种开发技巧，问题总合集，持续跟新中....

使用

搜索的使用

自定义按钮

在这里插入图片描述

在这里插入图片描述
需改后的代码

  {
   
                            field: 'operate', title: __('Operate'), table: table,
                            buttons: [
                                {
   name: 'detail', text: '详情', title: '详情', icon: 'fa fa-list', classname: 'btn btn-xs btn-primary btn-dialog', url: 'version/detail'},
                                {
   name: 'edit', text: '编辑我', title: '编辑我', icon: 'fa fa-list', classname: 'btn btn-xs btn-primary btn-dialog', url: 'version/edit'}
                            ],
                            events: Table.api.events.operate, formatter: Table.api.formatter.operate
                        }

下面简单介绍一下几个配置的含义
name:唯一标识,其中index/add/edit/del/multi/dragsort这几个框架已经暂用,如果使用将会覆盖已有属性
text:按钮上的文本，可以为空时，为空时按钮将不显示文字信息，为空时最好配置上icon的值
title:按钮的标题信息，当鼠标移到上面时显示的文字，同时作为dialog弹出窗时的标题信息
icon:按钮上的按钮信息，可使用Font-awesome的按钮，当text为空时请务必填写该值
classname:按钮的class标签的值，建议btn btn-xs为必选，这样可以和其它按钮更加协调搭配，可搭配用的按钮颜色有btn-primary、btn-success、btn-danger、btn-warning，还有额外的功能class如btn-dialog、btn-addtabs、btn-ajax，下面会详细介绍。
url : 按钮点击后跳转的链接，可选且可使用相对链接。为空时按钮的链接为javascript:;
dropdown:按钮分组名称，用于将按钮分组下拉
refresh:是否在执行完事件后刷新列表，常配合classname:'btn-ajax’使用
confirm:提示确认信息，常配合classname属性为btn-ajax、btn-dialog、btn-addtabs使用
extend:扩展属性，用于扩展按钮的自定义属性
hidden:控制按钮是否隐藏属性,支持function
visible:控制按钮是否显示属性,支持function
disable:控制按钮是否禁用属性,支持function

自定义按钮完整代码

 {
   
    field: 'buttons',
    width: "120px",
    title: __('按钮组'),
    table: table,
    events: Table.api.events.operate,
    buttons: [
        {
   
            name: 'detail',
            text: __('弹出窗口打开'),
            title: __('弹出窗口打开'),
            classname: 'btn btn-xs btn-primary btn-dialog',
            icon: 'fa fa-list',
            url: 'example/bootstraptable/detail',
            callback: function (data) {
   
                Layer.alert("接收到回传数据：" + JSON.stringify(data), {
   title: "回传数据"});
            },
            visible: function (row) {
   
                //返回true时按钮显示,返回false隐藏
                return true;
            }
        },
        {
   
            name: 'ajax',
            text: __('发送Ajax'),
            title: __('发送Ajax'),
            classname: 'btn btn-xs btn-success btn-magic btn-ajax',
            icon: 'fa fa-magic',
            url: 'example/bootstraptable/detail',
            confirm: '确认发送',
            success: function (data, ret) {
   
                Layer.alert(ret.msg + ",返回数据：" + JSON.stringify(data));
                //如果需要阻止成功提示，则必须使用return false;
                //return false;
            },
            error: function (data, ret) {
   
                console.log(data, ret);
                Layer.alert(ret.msg);
                return false;
            }
        },
        {
   
            name: 'addtabs',
            text: __('新选项卡中打开'),
            title: __('新选项卡中打开'),
            classname: 'btn btn-xs btn-warning btn-addtabs',
            icon: 'fa fa-folder-o',
            url: 'example/bootstraptable/detail'
        }
    ],
    formatter: Table.api.formatter.buttons
}

按钮对应的参数有

参数	说明
name	按钮唯一标识,其中add/edit/del/dragsort已经被占用,如果使用将覆盖相应的按钮配置。如果需要按钮按钮显示，我们可以在HTML视图文件的table添加data-buttons-标识来根据权限控制显示
text	按钮的文本内容,如果不需要显示文本可忽略,支持function和string类型
title	鼠标移上去的标题或弹窗/选项显示的标题,支持function和string类型
icon	按钮的图标,请使用font-awesome图标库,比如 fa fa-home
classname	按钮的class, 其中classname中的btn-dialog、btn-ajax、btn-addtabs、btn-click，FastAdmin已经为这几个固定的Class注册了事件，所以可以直接使用，如果想要实现其它功能，需要自己手动编写代码绑定事件才可使用。
url	按钮的链接/Ajax事件请求的URL/弹窗链接/选项卡链接，直接function和string类型,此链接会自动在链接后添加ids/{ids},{ids}为当行主键ID，如果需要传递其它字段值，请在URL中使用{字段名}占位即可
refresh	自动刷新,只针对btn-ajax事件且不存在success回调
confirm	确认框提示文字,配置后会在确认操作再执行对应的事件，只针对btn-ajax/btn-dialog/btn-addtabs事件
success	事件成功的回调,只针对btn-ajax事件
error	事件失败的回调,只针对btn-ajax事件
callback	弹窗回传的回调,只针对btn-dialog事件,需要在对应打开的页面中使用Fast.api.close(data);进行回传数据
hidden	是否隐藏按钮,按钮默认显示,支持function和bool类型
visible	是否显示按钮,按钮默认显示,支持function和bool类型
disable	是否禁用按钮,按钮默认不禁用,支持function和bool类型
click	当classname包含btn-click时的点击回调事件
extend	按钮扩展信息,可以任意定制按钮的参数,比如我们想在新窗口中打开链接，则配置extend:’ target=“_blank”'即可
dropdown	下拉列表分组的名称,当多个按钮需要显示为一级时,该值为显示的文字

功能Class

btn-dialog : 点击按钮后将会以弹窗的形式打开url这个链接
在这里插入图片描述

btn-addtabs : 点击按钮后将会在顶部选项卡中新增一个选项卡并跳转
在这里插入图片描述
控制器

点击显示

btn-ajax : 点击按钮后将会发起一个Ajax请求
在这里插入图片描述

在这里插入图片描述

给按钮添加权限

默认已给的权限

<table id="table" class="table table-striped table-bordered table-hover" 
       data-operate-edit="{:$auth->check('page/edit')}" 
       data-operate-del="{:$auth->check('page/del')}" 
       width="100%">
</table>

如果我给detail添加权限

<table id="table" class="table table-striped table-bordered table-hover" 
       data-operate-edit="{:$auth->check('page/edit')}" 
       data-operate-del="{:$auth->check('page/del')}" 
       data-operate-detail="{:$auth->check('page/detail')}" 
       width="100%">
</table>

或者,给自定义添加权限

             {
   
                            field: 'operate', title: __('Operate'), table: table,
                            buttons: [
                                {
   name: 'detail', text: '详情', title: '详情', icon: 'fa fa-list', classname: 'btn btn-xs btn-primary btn-addtabs', url: 'version/detail?row=111'},

                                {
   name: 'edit', text: '编辑我', title: '编辑我', icon: 'fa fa-list', classname: 'btn btn-xs btn-primary btn-dialog', url: 'version/edit'},

                                {
   name: 'ajax', text: 'ajax请求', title: 'ajax请求', icon: 'fa fa-list', classname: 'btn btn-xs btn-primary btn-ajax', url: 'version/detail?row=111'}
                            ],
                            events: Table.api.events.operate, formatter: Table.api.formatter.operate
                        }

给自定义按钮添加权限

后台添加相应的菜单规则

2 .给其相应的权限或不给他权限
显示效果
没有权限

给权限后

动态渲染统计信息

在这里插入图片描述

        <a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;">
            <i class="fa fa-dollar"></i>
            <span class="extend">
        金额：<span id="money">0</span>
        单价：<span id="price">0</span>
        </span>
        </a>

下面的代码与 table.bootstrapTable({...})同级


            //当表格数据加载完成时
            table.on('load-success.bs.table', function (e, data) {
   
                //这里可以获取从服务端获取的JSON数据
                console.log(data);
                // 初始化money和price的和为0
                let totalMoney = 0;
                let totalPrice = 0;

                // 遍历rows数组
                data.rows.forEach(row => {
   
                    // 将money和price从字符串转换为数字，并累加
                    totalMoney += parseFloat(row.money);
                    totalPrice += parseFloat(row.price);
                });
                //这里我们手动设置底部的值
                $("#money").text(totalMoney);
                $("#price").text(totalPrice);
            });

结果:
在这里插入图片描述

列表上部按钮（工具栏按钮）

btn-add: 添加按钮使用
btn-edit: 编辑按钮使用
btn-del: 删除按钮使用
btn-import: 导入按钮使用
btn-more: 更多按钮使用
btn-multi: 指操作使用
btn-disabled: 添加此class后则只有在列表有选中数据时按钮才会变为可使用

 {:build_toolbar('refresh,add,edit,del')}

路径如下：
application/admin/common.php:build_toolbar
代码如下：

if (!function_exists('build_toolbar')) {
   

    /**
     * 生成表格操作按钮栏
     * @param array $btns 按钮组
     * @param array $attr 按钮属性值
     * @return string
     */
    function build_toolbar($btns = null, $attr = [])
    {
   
        $auth = \app\admin\library\Auth::instance();
        $controller = str_replace('.', '/', Loader::parseName(request()->controller()));
        $btns = $btns ? $btns : ['refresh', 'add', 'edit', 'del', 'import'];
        $btns = is_array($btns) ? $btns : explode(',', $btns);
        $index = array_search('delete', $btns);
        if ($index !== false) {
   
            $btns[$index] = 'del';
        }
        $btnAttr = [
            'refresh' => ['javascript:;', 'btn btn-primary btn-refresh', 'fa fa-refresh', '', __('Refresh')],
            'add'     => ['javascript:;', 'btn btn-success btn-add', 'fa fa-plus', __('Add'), __('Add')],
            'edit'    => ['javascript:;', 'btn btn-success btn-edit btn-disabled disabled', 'fa fa-pencil', __('Edit'), __('Edit')],
            'del'     => ['javascript:;', 'btn btn-danger btn-del btn-disabled disabled', 'fa fa-trash', __('Delete'), __('Delete')],
            'import'  => ['javascript:;', 'btn btn-info btn-import', 'fa fa-upload', __('Import'), __('Import')],
        ];
        $btnAttr = array_merge($btnAttr, $attr);
        $html = [];
        foreach ($btns as $k => $v) {
   
            //如果未定义或没有权限
            if (!isset($btnAttr[$v]) || ($v !== 'refresh' && !$auth->check("{
     $controller}/{
     $v}", $auth->id))) {
   
                continue;
            }
            list($href, $class, $icon, $text, $title) = $btnAttr[$v];
            //$extend = $v == 'import' ? 'id="btn-import-file" data-url="ajax/upload" data-mimetype="csv,xls,xlsx" data-multiple="false"' : '';
            //$html[] = '<a href="' . $href . '" class="' . $class . '" title="' . $title . '" ' . $extend . '><i class="' . $icon . '"></i> ' . $text . '</a>';
            if ($v == 'import') {
   
                $template = str_replace('/', '_', $controller);
                $download = '';
                if (file_exists("./template/{
     $template}.xlsx")) {
   
                    $download .= "<li><a href=\"/template/{
     $template}.xlsx\" target=\"_blank\">XLSX模版</a></li>";
                }
                if (file_exists("./template/{
     $template}.xls")) {
   
                    $download .= "<li><a href=\"/template/{
     $template}.xls\" target=\"_blank\">XLS模版</a></li>";
                }
                if (file_exists("./template/{
     $template}.csv")) {
   
                    $download .= empty($download) ? '' : "<li class=\"divider\"></li>";
                    $download .= "<li><a href=\"/template/{
     $template}.csv\" target=\"_blank\">CSV模版</a></li>";
                }
                $download .= empty($download) ? '' : "\n                            ";
                if (!empty($download)) {
   
                    $html[] = <<<EOT
                        <div class="btn-group">
                            <button type="button" href="{
     $href}" class="btn btn-info btn-import" title="{
     $title}" id="btn-import-file" data-url="ajax/upload" data-mimetype="csv,xls,xlsx" data-multiple="false"><i class="{
     $icon}"></i> {
     $text}</button>
                            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" title="下载批量导入模版">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu" role="menu">{
     $download}</ul>
                        </div>
EOT;
                } else {
   
                    $html[] = '<a href="' . $href . '" class="' . $class . '" title="' . $title . '" id="btn-import-file" data-url="ajax/upload" data-mimetype="csv,xls,xlsx" data-multiple="false"><i class="' . $icon . '"></i> ' . $text . '</a>';
                }
            } else {
   
                $html[] = '<a href="' . $href . '" class="' . $class . '" title="' . $title . '"><i class="' . $icon . '"></i> ' . $text . '</a>';
            }
        }
        return implode(' ', $html);
    }
}

在这里插入图片描述

管理员只显示自己添加的数据

首先我们给当前控制器添加一个$dataLimit属性，如下

class Page extends Backend
{
   
    protected $model = null;
    protected $dataLimit = 'personal'; //这个属性在基类已经定义，默认为false，表示不启用，$dataLimit可使用auth和personal两个值
}

$d a t a L imi t 默认为 f a l se ，表示不启用，$ dataLimit可使用auth和personal两个值，下面简单介绍一下它的意思

$dataLimit = false; //表示不启用，显示所有数据
$dataLimit = 'auth'; //表示显示当前自己和所有子级管理员的所有数据
$dataLimit = 'personal'; //表示仅显示当前自己的数据

给我们的数据表添加一个admin_id字段，类型为int(10)，如果不想使用admin_id字段，我们改用adminid字段，则可以在当前控制器中定义个$dataLimitField属性，如下

class Page extends Backend
{
   
    protected $model = null;
    protected $dataLimit = 'personal'; 
    protected $dataLimitField = 'adminid';
}

自定义权限数据
如果默认的权限不符合你的要求，你可以在当前控制器自定义一个getDataLimitAdminIds的方法，该方法返回可以查看管理员数据的管理员ID集合。

protected function getDataLimitAdminIds(){
   
    $adminIds = [];//你的自定义可以查看管理员数据的管理员ID的集合
    return $adminIds;
}

注意：

一旦启用 $d a t a L imi t 功能，当前控制器的添加、编辑、删除、批量操作、 S e l ec tp a g e 都会做相应的限制和权限判断。如果你重写了 in d e x / a dd / e d i t / d e l 等方法，需要你自己使用$ adminIds = $this->getDataLimitAdminIds();来获取获取数据限制的管理员ID集合。

如何把入口文件放到根目录下

不建议这样干，因为存在安全隐患，但有时候又没有办法，只能移到根目录

将public目录下的index.php、.htaccess、admin.php、install.php、route.php文件移动到项目根目录，assets、uploads这两个文件夹务必保留在public目录中
修改index.php和admin.php中的/…/为/
修改application/extra/site.php中的cdnurl的值为/fastadmin/public，这里的/fastadmin/public视你的项目名称而修改
修改application/config.php中大概第138行__CDN__的值为/fastadmin/public，这里的/fastadmin/public视你的项目名称而修改
登录后台，在系统配置中将cdnurl的值改为/fastadmin/public，这里的修改是为了同步数据库中的配置。完成，使用https://localhost/fastadmin试试是否可以正常访问了

通用搜索

约定大于配置的思想

测试基本代码

table.bootstrapTable({
   
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                sortName: 'weigh',
                columns: [
                    [
                        {
   field: 'state', checkbox: true},
                        {
   field: 'id', title: __('Id') ,operate: false},
                        {
   field: 'oldversion', title: __('Oldversion')},
                        {
   field: 'newversion', title: __('Newversion')},
                        {
   field: 'packagesize', title: __('Packagesize')},
                        {
   field: 'content', title: __('Content'), formatter: Table.api.formatter.content},
                        {
   field: 'downloadurl', title: __('Downloadurl'), formatter: Table.api.formatter.url},
                        {
   field: 'enforce', title: __('Enforce'), searchList: {
   "1":__('Yes'),"0":__('No')}, table: table, formatter: Table.api.formatter.toggle},
                        {
   field: 'createtime', title: __('Createtime'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange'},
                        {
   field: 'updatetime', title: __('Updatetime'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange'},
                        {
   field: 'weigh', title: __('Weigh')},
                        {
   field: 'status', title: __('Status'), formatter: Table.api.formatter.status},
                       /* {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}*/
                        {
   
                            field: 'operate', title: __('Operate'), table: table,
                            buttons: [
                                {
   name: 'detail', text: '详情', title: '详情', icon: 'fa fa-list', classname: 'btn btn-xs btn-primary btn-addtabs', url: 'version/detail?row=111'},

                                {
   name: 'edit', text: '编辑我', title: '编辑我', icon: 'fa fa-list', classname: "btn btn-xs btn-primary btn-dialog", url: 'version/edit'},

                                {
   name: 'ajax', text: 'ajax请求', title: 'ajax请求', icon: 'fa fa-list', classname: 'btn btn-xs btn-primary btn-ajax', url: 'version/detail?row=111'}
                            ],
                            events: Table.api.events.operate, formatter: Table.api.formatter.operate
                        }

                    ]
                ]
            });

已这个地段为例

  {
   field: 'oldversion', title: __('Oldversion')},

operate:‘=’ //用于查询时的操作符，默认为=，为false表示禁用此字段的通用搜索，支持!=、LIKE、NOT LIKE、>、<、>=<=、
FIND_IN_SET、IN、NOT IN、BETWEEN、NOT BETWEEN、RANGE、NOT RANGE、NULL、NOT NULL、false
operate:false
则
在这里插入图片描述

searchList: //用于渲染列表的数据，支持的格式有JSON Array、JSON Object、$.getJSON、Function

{
   field: 'enforce', title: __('Enforce'), searchList: {
   "1":__('Yes'),"0":__('No')}, table: table, formatter: Table.api.formatter.toggle},

在这里插入图片描述

addclass: //用于给input或select添加额外的class属性

{
   field: 'oldversion', title: __('Oldversion'),addclass:"newClass"},

在这里插入图片描述

type: //用于定义input文本框的类型,默认为text

{
   field: 'oldversion', title: __('Oldversion'),type:"password"},

在这里插入图片描述

data: //用于给input或select添加额外的属性
在这里插入图片描述

renderDefault: //是否根据URL中的参数填充默认值，默认为true，支持的值有false/true

在这里插入图片描述

常用配置示例如下：

//时间区间搜索
{
   field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime},
//金额区间搜索
{
   field: 'money', title: __('Money'), operate: 'RANGE'},
//下拉列表搜索
{
   field: 'flag', title: __('Flag'), searchList: {
   "hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label},
//动态下拉列表搜索
{
   field: 'type', title: __('Type'), searchList: $.getJSON("ajax/dynamicselect")},
//禁用通用搜索
{
   field: 'keywords', title: __('Keywords'), operate: false},

自定义搜索

searchFormTemplate: 'customformtpl'

找到 customformtplhtml模板，一般在该静态文件的index.html里
在这里插入图片描述
找到 customformtpl自定义搜索模板
application/admin/view/example/customsearch/index.html

<script id="customformtpl" type="text/html">
    <!--form表单必须添加form-commsearch这个类-->
    <form action="" class="form-commonsearch">
        <div style="border-radius:2px;margin-bottom:10px;background:#f5f5f5;padding:15px 20px;">
            <h4>自定义搜索表单</h4>
            <hr>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label">ID</label>
                        <!--显式的operate操作符-->
                        <div class="input-group">
                            <div class="input-group-btn">
                                <select class="form-control operate" data-name="id" style="width:60px;">
                                    <option value="=" selected>等于</option>
                                    <option value=">">大于</option>
                                    <option value="<">小于</option>
                                </select>
                            </div>
                            <input class="form-control" type="text" name="id" placeholder="" value=""/>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label">标题</label>
                        <!--隐式的operate操作符，必须携带一个class为operate隐藏的文本框,且它的data-name="字段",值为操作符-->
                        <input class="operate" type="hidden" data-name="title" value="="/>
                        <div>
                        <input class="form-control" type="text" name="title" placeholder="请输入查找的标题" value=""/>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label">管理员ID</label>
                        <div class="row" data-toggle="cxselect" data-selects="group,admin">
                            <div class="col-xs-6">
                                <select class="group form-control" name="group"
                                        data-url="example/bootstraptable/cxselect?type=group"></select>
                            </div>
                            <div class="col-xs-6">
                                <select class="admin form-control" name="admin_id"
                                        data-url="example/bootstraptable/cxselect?type=admin"
                                        data-query-name="group_id"></select>
                            </div>
                            <input type="hidden" class="operate" data-name="admin_id" value="="/>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label">用户名</label>
                        <input type="hidden" class="operate" data-name="username" value="="/>
                        <div>
                            <input id="c-category_id" data-source="auth/admin/index" data-primary-key="username"
                                   data-field="username" class="form-control selectpage" name="username" type="text"
                                   value="" style="display:block;">
                        </div>
                    </div>
                </div>

                <div class=&#