fastadmin的二次开发教程【简单搭建、多表格问题，API开发】

原创

黄啊码

修改于 2021-07-23 18:03:46

3K0

修改于 2021-07-23 18:03:46

文章被收录于专栏：黄啊码【CSDN同名】黄啊码【CSDN同名】

1、简单搭建模块，不推荐用官方的一键搭建新模块，看不懂还容易出错

圈圈是重点，搭建新模块五点缺一不可，少了就得打屁屁了。

2、简单教程

（1）关于页面有上角生成的导出,切换,列.搜索.

如果不需要的话可以在对应的js文件中添加如下代码.即可屏蔽

//切换卡片视图和表格视图两种模式
showToggle:false,
//显示隐藏列可以快速切换字段列的显示和隐藏
showColumns:false,
//导出整个表的所有行导出整个表的所有行
showExport:false,
//搜索
search: false,
//搜索功能，
commonSearch: false,
//表格上方的搜索搜索指表格上方的搜索
searchFormVisible: false,

（2）.对于令人窒息的缓存问题.

很多时候发现更改页面之后没有效果.刷新,清理缓存也无效.让人又爱又恨.

在Confiig.php中将app_debug打开即可

// 应用调试模式

'app_debug' => Env::get('app.debug', true),

（3）.搜索框默认ID搜索.如果需要搜其他字段,在相应控制器添加以下即可后面为你需要搜索的字段

protected $searchFields = 'id,name,age';

（4）.如果需要对搜索框默认内容进行修改在对应的js里面初始化表格参数配置之前添加

$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function(){return "试试搜索吧";};

（5）.点击搜素不想要那个字段的话可以在对应的js中columns中添加operate:false即可不展示该字段的搜索

{field: 'name', title: __('Name'),operate:false},

（6）.复选框的隐藏

直接注释掉就好了

（7）.关闭多条件搜索

operate: false

（8）.去掉时间区间的记忆

table.on('post-body.bs.table',function (e,settings,json,xhr) {
    $('.datetimerange').each(function () {
        $(this).attr('autocomplete','off');
    })
});

3、这是多表格的js、HTML代码，跟官方默认的一个页面多个表格不同，这里是页面有表创，弹窗也有表格

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init();
            Controller.table['first'].call(this);
            $(".btn-add").data("area",["60%","82%"]);
            var table1;
            var table2;
        },
        table: {
            first: function () {
                // 表格1
                table1 = $("#table1");
                table1.bootstrapTable({
                    url: 'user/validlog/index',
                    extend: {
                        index_url: 'user/validlog/index',
                        add_url: 'user/validlog/add',
                        del_url: 'user/validlog/del',
                    },
                    columns: [
                        [
                            {field: 'state', checkbox: true, },
                            {field: 'id', title: 'ID', operate: false},
                            {field: 'log_id', title: __('Log_id'), operate: false},
                            {field: 'username', title: __('Username'), formatter: Table.api.formatter.search},
                            {field: 'title', title: __('Title'), operate: 'LIKE %...%', placeholder: '模糊搜索'},
                            {field: 'url', title: __('Url'), formatter: Table.api.formatter.url},
                            {field: 'ip', title: __('IP'), events: Table.api.events.ip, formatter: Table.api.formatter.search},
                            {field: 'browser', title: __('Useragent'), operate: false, formatter: Controller.api.formatter.browser},
                            {field: 'createtime', title: __('Create time'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
                            {field: 'operate', title: __('Operate'), table: table1,
                                events: Table.api.events.operate,
                                buttons: [{
                                        name: 'detail',
                                        text: __('Detail'),
                                        icon: 'fa fa-list',
                                        classname: 'btn btn-info btn-xs btn-detail btn-dialog',
                                        url: 'user/validlog/detail'
                                    }],
                                formatter: Table.api.formatter.operate
                            }
                        ]
                    ]
                });
 
                // 为表格1绑定事件
                Table.api.bindevent(table1);
            },
            second: function () {
                // 表格1
                table2 = $("#table2");
                table2.bootstrapTable({
                    url: 'auth/adminlog/index',
                    extend: {
                        index_url: 'auth/adminlog/index',
                        add_url: 'auth/adminlog/index',
                    },
                    columns: [
                        [
                            {field: 'state', checkbox: true, },
                            {field: 'id', title: 'ID', operate: false},
                            {field: 'username', title: __('Username'), formatter: Table.api.formatter.search},
                            {field: 'title', title: __('Title'), operate: 'LIKE %...%', placeholder: '模糊搜索'},
                            {field: 'url', title: __('Url'), formatter: Table.api.formatter.url}
                        ]
                    ]
                });
 
                // 为表格2绑定事件
                Table.api.bindevent(table2);//标记为全部通过
                $(document).on('click','.btn-all-pass',function () {
                    var ids = Table.api.selectedids(table2);
                    Layer.open({
                        title: __('Warning'),
                        content:__('Content'),
                        btn: [__('OK'),__('Cancel')],
                        yes: function (index,layero) {
                            Fast.api.ajax({
                                url: "user/validlog/add",
                                type: "post",
                                data: {ids: ids},
                            }, function (data) {
                                //刷新父级表格
                                parent.$("a.btn-refresh").trigger("click");
                                Layer.close(index);
                                parent.Toastr.success(data);
                                Fast.api.close();//关闭弹窗
                            });
                        },success: function (layero, index) {
                        }
                    });
                });
            }
        },
        add: function () {
            Controller.api.bindevent();
            // 开启新页面表格需要重新初始化
            Table.api.init();
            Controller.table['second'].call(this);
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            },
            formatter: {
                browser: function (value, row, index) {
                    return '<a class="btn btn-xs btn-browser">' + row.useragent.split(" ")[0] + '</a>';
                },
            },
        }
    };
    return Controller;
});
//index.html
<div class="panel panel-default panel-intro">
    {:build_heading()}
    <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">
                        {:build_toolbar('refresh,del,add')}
                    </div>
                    <table id="table1" class="table table-striped table-bordered table-hover" 
                           data-operate-detail="{:$auth->check('user/validlog/index')}" 
                           data-operate-detail="{:$auth->check('user/validlog/add')}" 
                           data-operate-del="{:$auth->check('user/validlog/del')}" 
                           width="100%">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
//弹窗页面
<div class="panel panel-default panel-intro">
        {:build_heading()}
       <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">
                            {:build_toolbar('refresh')} &nbsp;<a href="javascript:;" class="btn btn-all-pass btn-success btn-disabled disabled " title="{:__('Addvalid')}" >{:__('Addvalid')}</a>
                        </div>
                        <table id="table2" class="table table-striped table-bordered table-hover" 
                               data-operate-detail="{:$auth->check('auth/adminlog/index')}"
                               width="100%">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

怎么？看不懂啊？看不懂来问我呗？QQ抖在这里977798066，需要就问我，能用官方文档和例子解决的就算了哈，我也不会

回答，完美！

4、接下来是API接口开发