Fastadmin了解一下

基于ThinkPHP5和Bootstrap的极速后台开发框架，详见开发文档：https://doc.fastadmin.net/docs/index.html

benny也是段时间接触到了它，算是入门理解级别，但觉得这个框架的好处就是可以提高我们的开发效率，一键生成开发文档和后台管理系统，对于长期写后台数据接口开发的你们来说，不用写后台管理系统的html和js代码简直是太完美了。特此介绍完毕，有兴趣的可以去网站了解一下。

以下是框架自带的后台管理系统表格列表功能详解：

1.时间筛选器
如果想在搜索栏使用时间区间进行搜索，则可以在JS中修改修改字段属性，如
stylus复制代码{field: 'createtime', title: __('Create Time'), formatter: Table.api.formatter.datetime, operate: 'BETWEEN', type: 'datetime', addclass: 'datetimepicker', data: 'data-date-format="YYYY-MM-DD"'},
其中type为类型，使用datetime将会把结果转换成时间戳进行搜索，如果你的数据库存储的是日期时间型数据，则移除该type属性，data指附件到input文本框上的属性
最新版FastAdmin已经支持用户体验更好的datetimerange插件，使用方式是：
stylus复制代码{field:'createtime', title: __('Create Time'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass:'datetimerange'}
2.状态列表
默认我们的搜索都是一个文本框，如果需要改成下拉列表框，则需要使用如下代码
stylus复制代码{field: 'status', title: __('Status'), formatter: Table.api.formatter.status, searchList: {'normal': __('Normal'), 'hidden': __('Hidden')}, style: 'min-width:100px;'},
其中searchList使用的是一个JSON数据，同时searchList仍然支持数据、JSON对象、Ajax对象、Function函数。
普通搜索栏的搜索荐默认都是全部启用的，如果想禁用字段在普通搜索栏的显示，可以在字段属性中添加operate: false来禁用，如下方代码
maxima复制代码{field: 'status', title: __('Status'), operate:false, formatter: Table.api.formatter.status}
3.添加、编辑、删除、导入、批量操作按钮
FastAdmin的添加、编辑、删除按钮默认是由{:build_toolbar()}生成的，默认是全部生成。如果我们只需要其中的部分按钮，则可以传入参数来实现，如{:build_toolbar('refresh,add')}，这样将只会生成刷新和添加按钮。同时也支持调整参数的位置来调整最后生成的位置，另外请注意{:build_toolbar()}还会根据当前管理员的权限判断按钮是否显示，例如你使用{:build_toolbar('refresh,add')}，如果当前管理员没有添加的权限，添加按钮仍然不会显示 。
目前build_toolbar支持的按钮有：
avrasm复制代码refresh: 刷新按钮
add: 添加
edit: 编辑
del: 删除
import: 导入
批量操作按钮是直接在视图页面上添加的HTML代码，直接修改即可。
启用导入请参考：forum.fastadmin.net/d/540
4.自定义搜索
FastAdmin中的Bootstrap-table表格的自定义搜索功能是非常强大的，我们可以按需要修改来实现自己的搜索功能，这里实现的功能是点击自定义搜索则发起搜索分类ID为1的数据，代码如下：
pgsql复制代码$(document).on("click", ".btn-singlesearch", function () {
    var options = table.bootstrapTable('getOptions');
    options.pageNumber = 1;
    options.queryParams = function (params) {
        return {
            search: params.search,
            sort: params.sort,
            order: params.order,
            filter: JSON.stringify({category_id: 1}),
            op: JSON.stringify({category_id: '='}),
            offset: params.offset,
            limit: params.limit,
        };
    };
    table.bootstrapTable('refresh', {});
    Toastr.info("当前执行的是自定义搜索");
    return false;
});
首先我们为自定义搜索这个按钮绑定上点击事件，这样当我们点击按钮时则发起搜索请求。其次注意我们获取了Bootstra-table表格的属性配置，并修改了其中的pageNumber和queryParams，pageNumber指页码置为第一页，queryParams是这里的重点，我们修改了其中的filter和op，filter是我们的过滤条件，op是我们的条件操作符，操作符支持=、!=、LIKE、NOT LIKE、>、>=、<、<=、IN(...)、NOT IN(...)、BETWEEN、NOT BETWEEN、LIKE %...%、IS NULL、IS NOT NULL，这里的filter和op支持同时搜索多个条件。
5.快速搜索
快速搜索在键入关键词时将实时从服务端搜索数据，如果你的数据表数据较大，建议关闭此功能，关闭的方法是使用search:false，其次快速搜索默认只会搜索主键id这个字段，如果你需要搜索其它字段，则需要在服务端你的控制器中定义$searchFields这个值，如下
ruby复制代码protected $searchFields = 'id,name,title';
这样在快速搜索时将会搜索id,name,title这三个字段。
如果需要修改默认文本框的placeholder，可以在表格初始化前定义
arcade复制代码$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function(){return "自定义placeholder文本";};
6.浏览模式、显示隐藏列、导出、通用搜索
浏览模式可以切换卡片视图和表格视图两种模式，如果不需要此功能，可以设置showToggle: false
显示隐藏列可以快速切换字段列的显示和隐藏，如果不需要此功能，可以设置showColumns: false，如果想要表格中的字段列默认隐藏可以设置字段属性visible: false即可默认隐藏
导出按钮默认将导出整个表的所有行，如果需要仅导出当前分页的数据，需要设置exportDataType: 'basic'，如果想导出选中的行，则可以设置为exportDataType: 'selected'，如果不需要此功能，可以设置showExport: false
通用搜索指表格上方的搜索，通用搜索的表单默认是隐藏的，如果需要默认显示，需要设置searchFormVisible: true，如果不需要通用搜索功能，可以设置commonSearch: false。如果想要控制字段列不参考搜索则可以设置字段列属性为operate: false即可。
7. 分类名称(关联搜索出分类表的名称)
这里显示的分类名称是根据分类表关联查询出来的结果，如果我们启用关联查询，我们必须在当前控制器中设置属性protected $relationSearch = true;，同时我们的index方法也需要重写，请参考下方的完整代码中PHP部分。如果我们启用了关联查询，当两个表中的字段有冲突时，我们必须在字段中加上别名。请参考下方的完整代码中JS部分。
8.标志和图片
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 快速生成切换按钮
9.状态
此处的状态是根据第8项中的Table.api.formatter.status进行生成的。如果需要传入其它状态，请使用custom参数，参数配置为{状态1: 'success', 状态2: 'grey'}
10.按钮组
按钮组的功能是根据第8项中的Table.api.formatter.buttons进行生成的，代码如下
pgsql复制代码{field: 'id', title: __('按钮'), table: table, buttons: [
    {name: 'name1', text: '弹窗', title: '弹窗标题', icon: 'fa fa-list', classname: 'btn btn-xs btn-primary btn-dialog', url: 'page/detail', callback:function(data){}},
    {name: 'name2', text: 'Ajax', title: 'Ajax标题', icon: 'fa fa-flash', classname: 'btn btn-xs btn-success btn-ajax', url: 'page/detail', success:function(data, ret){}, error:function(){}},
    {name: 'name3', text: '选项卡', title: '选项卡标题', icon: 'fa fa-flash', classname: 'btn btn-xs btn-info btn-addtabs', url: 'page/detail'}
], operate:false, formatter: Table.api.formatter.buttons}
按钮配置支持的参数有：
name 按钮唯一标识,其中add/edit/del/dragsort已经被占用,请勿使用。我们可以在HTML视图文件的table使用data-buttons-标识来控制显示
text 按钮的文本内容,如果不需要显示文本可忽略
title 鼠标移上去的标题或弹窗/选项显示的标题
icon 按钮的图标,请使用font-awesome图标库
classname 按钮的class, 其中classname中的btn-dialog、btn-ajax、btn-addtabs，FastAdmin已经为这几个固定的Class注册了事件，所以可以直接使用，如果想要实现其它功能，需要自己手动编写代码绑定事件才可使用。
url 按钮的链接/Ajax事件请求的URL/弹窗链接/选项卡链接，直接function和string类型,此链接会自动在链接后添加ids/{ids},{ids}为当行主键ID，如果需要传递其它字段值，请在URL中使用{字段名}占位即可
refresh 自动刷新,只针对btn-ajax事件
confirm 确认框提示文字,配置后会在确认操作再执行对应的事件，只针对btn-ajax/btn-dialog/btn-addtabs事件
success 事件成功的回调,只针对btn-ajax事件
error 事件失败的回调,只针对btn-ajax事件
callback 弹窗回传的回调,只针对btn-dialog事件
hidden 是否隐藏按钮,按钮默认显示,支持function和bool类型
visible 是否显示按钮,按钮默认显示,支持function和bool类型
extend 按钮扩展信息,可以任意定制按钮的参数,比如我们想在新窗口中打开链接，则配置extend:' target="_blank"'即可
11.操作
操作区域默认是排序、编辑、删除这三个按钮，此功能也是根据第8项中Table.api.formatter.operate来实现的。排序按钮只在表中存在weigh字段时才会出现，编辑按钮和删除按钮会根据管理员所拥有的权限进行按需显示。其次Table.api.formatter.operate也支持buttons属性来配置多个其它按钮，如示例图中的详情按钮。请参考下方完整代码中JS部分。
如果希望禁用编辑、删除按钮，可以通过修改视图中表格的属性置为空即可。
<table id="table" class="table table-striped table-bordered table-hover table-nowrap"
       data-operate-edit="" 
       data-operate-del="" 
       width="100%">
</table>
从FastAdmin 1.2.0版本开发已经支持固定列功能，我们可以将右侧最后一定固定住，当出现横向滚动条时让最后一列始终固定在可视窗口中，如果需要开启此功能，请在初始化表格时添加以下两个参数即可。
//启用固定列
fixedColumns: true,
//固定右侧列数
fixedRightNumber: 1,
17.分页信息
分页信息显示的文字可以通过在表格初始化前定义
$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function (pageFrom, pageTo, totalRows) {
    return '显示第 ' + pageFrom + ' 到第 ' + pageTo + ' 条记录，总共 ' + totalRows + ' 条记录';
};
分页大小或分页大小选项可以在表格初始化时传入以下参数进行配置
pageSize: 10,
pageList: [10, 25, 50, 'All'],
18.翻页信息
翻页信息会根据服务端返回的数据行数自动进行渲染，如果返回的行数不满足分页条件时，此项是不会显示的
完整代码
PHP代码
<?php
namespace app\admin\controller;
use app\common\controller\Backend;
/**
 * 测试管理
 *
 * @icon fa fa-circle-o
 * @remark 此列表是通过php think crud -t test一键生成的针对数据表的查看、添加、编辑、删除、批量修改等功能，只需在设计表时符合FastAdmin相关字段名称、备注要求，即可生成相关的表单组件
 */
class Test extends Backend
{
    protected $model = null;
    protected $relationSearch = true;
    public function _initialize()
    {
        parent::_initialize();
        $this->model = model('Test');
    }
    /**
     * 查看
     */
    public function index()
    {
        if ($this->request->isAjax())
        {
            list($where, $sort, $order, $offset, $limit) = $this->buildparams();
            $total = $this->model
                    ->with("category")
                    ->where($where)
                    ->order($sort, $order)
                    ->count();
            $list = $this->model
                    ->with("category")
                    ->where($where)
                    ->order($sort, $order)
                    ->limit($offset, $limit)
                    ->select();
            $result = array("total" => $total, "rows" => $list, "extend" => ['money' => 1024, 'price' => 888]);
            return json($result);
        }
        return $this->view->fetch();
    }
}
JS代码：
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'test/index',
                    add_url: 'test/add',
                    edit_url: 'test/edit',
                    del_url: 'test/del',
                    multi_url: 'test/multi',
                    table: 'test',
                }
            });
            var table = $("#table");
            //当表格数据加载完成时
            table.on('load-success.bs.table', function (e, data) {
                //这里可以获取从服务端获取的JSON数据
                console.log(data);
                //这里我们手动设置底部的值
                $("#money").text(data.extend.money);
                $("#price").text(data.extend.price);
            });
            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'weigh',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'admin_id', title: __('Admin_id')},
                        {field: 'category.name', title: __('分类名称'), formatter:Table.api.formatter.search},
                        {field: 'category_id', title: __('Category_id'), visible: false},
                        {field: 'flag', title: __('Flag'), searchList: {"hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label},
                        {field: 'genderdata', title: __('Genderdata'), searchList: {"male": __('Genderdata male'), "female": __('Genderdata female')}, formatter: Table.api.formatter.normal},
                        {field: 'title', title: __('Title')},
                        {field: 'image', title: __('Image'), formatter: Table.api.formatter.image},
                        {field: 'images', title: __('Images'), formatter: Table.api.formatter.images},
                        {field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime},
                        {field: 'updatetime', title: __('Updatetime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime, visible: false},
                        {field: 'weigh', title: __('Weigh'), operate: false, visible: false},
                        {field: 'switch', title: __('Switch'), searchList: {"1": __('Yes'), "0": __('No')}, formatter: Table.api.formatter.toggle},
                        {field: 'status', title: __('Status'), searchList: {"normal": __('Normal'), "hidden": __('Hidden')}, formatter: Table.api.formatter.status},
                        {
                            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
                        },
                        {
                            field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate,
                            buttons: [
                                {
                                    name: 'detail',
                                    title: __('详情'),
                                    classname: 'btn btn-xs btn-primary btn-dialog',
                                    icon: 'fa fa-list',
                                    url: 'test/detail',
                                    callback: function (data) {
                                        Layer.alert("接收到回传数据：" + JSON.stringify(data), {title: "回传数据"});
                                    }
                                }],
                            formatter: Table.api.formatter.operate
                        }
                    ]
                ]
            });
            // 绑定TAB事件
            $('.panel-heading a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                var field = $(this).closest("ul").data("field");
                var value = $(this).data("value");
                var options = table.bootstrapTable('getOptions');
                options.pageNumber = 1;
                options.queryParams = function (params) {
                    var filter = {};
                    if (value !== '') {
                        filter[field] = value;
                    }
                    params.filter = JSON.stringify(filter);
                    return params;
                };
                table.bootstrapTable('refresh', {});
                return false;
            });
            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});
HTML代码：
<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        {:build_heading(null,FALSE)}
        <ul class="nav nav-tabs" data-field="status">
            <li class="active"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
            {foreach name="statusList" item="vo"}
            <li><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}</a></li>
            {/foreach}
        </ul>
    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
                        <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('test/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>
                        <a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('test/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                        <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('test/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
                        <a href="javascript:;" class="btn btn-danger btn-import {:$auth->check('test/import')?'':'hide'}" title="{:__('Import')}" id="btn-import-file" data-url="ajax/upload" data-mimetype="csv,xls,xlsx" data-multiple="false"><i class="fa fa-upload"></i> {:__('Import')}</a>
                        <div class="dropdown btn-group {:$auth->check('test/multi')?'':'hide'}">
                            <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                            <ul class="dropdown-menu text-left" role="menu">
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li>
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>
                            </ul>
                        </div>
                        <a class="btn btn-info btn-disabled disabled btn-selected" href="javascript:;"><i class="fa fa-leaf"></i> 获取选中项</a>
                        <a class="btn btn-success btn-singlesearch" href="javascript:;"><i class="fa fa-user"></i> 自定义搜索</a>
                        <a class="btn btn-success btn-change btn-start" data-params="action=start" data-url="example/bootstraptable/start" href="javascript:;"><i class="fa fa-play"></i> 启动</a>
                        <a class="btn btn-danger btn-change btn-pause" data-params="action=pause" data-url="example/bootstraptable/pause" href="javascript:;"><i class="fa fa-pause"></i> 暂停</a>
                        <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>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('test/edit')}" 
                           data-operate-del="{:$auth->check('test/del')}" 
                           width="100%">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
文章参考：https://ask.fastadmin.net/article/323.html