1、博客目录

一、问题分析

Fastadmin是一个不错的后台管理网站的框架，能够帮助我们尽快地完成项目的管理后台的开发，并且源代码也是开源的，我们可以根据自己的需要进行更改。
在使用Fastadmin作为自己的后台管理网站进行二次开发的时候，会经常需要使用插件根据数据库的记录一键生成表格，并且也会需要在表格中增加操作按钮，来弹出新的窗口对数据进行相应的操作。
接下来，我将介绍一下在使用fastadmin框架生成了列表后，应该如何修改框架中的文件，在列表中增加操作按钮，并且实现自己想要实现的功能。

二、问题解决

1、第一步，在想要加入操作按钮页面的对应js文件中进行操作。

如果是后台管理网站的js文件，则在/public/assets/js/backend（本文所提到的链接都是以fastadmin根目录为相对路径）中找到对应需要进行修改的js文件。
（1）在表格的单元定义中加入buttons定义，例如：

buttons: [{
name: ‘upload’,
title:__(‘Upload’),
text: ‘’,
icon: ‘fa fa-cloud-upload’,
classname: ‘btn btn-xs btn-info btn-dialog’,
url: ‘m_machine/upload’,
}],

（2）对按钮绑定表格事件，例如：

upload: function () {
Controller.api.bindevent();
},

（3）我的js文件代码如下：

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'm_machine/index' + location.search,
                    add_url: 'm_machine/add',
                    edit_url: 'm_machine/edit',
                    del_url: 'm_machine/del',
					upload_url: 'm_machine/upload',
                    multi_url: 'm_machine/multi',
                    table: 'ad_qf_machine',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'type',
                sortName: 'type',
				sortOrder:'asc',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'type', title: __('Type'),operate:'LIKE'},
                        {field: 'version', title: __('Version'), operate:'BETWEEN'},
                        {field: 'folder', title: __('Folder'),operate:'LIKE'},
                        {field: 'size', title: __('Size'), operate:false},
						{field: 'time', title: __('Time'), operate:false},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate,
						buttons: [{
									name: 'upload',
									title:__('Upload'),
									text: '',
									icon: 'fa fa-cloud-upload',
									classname: 'btn btn-xs btn-info  btn-dialog',
									url: 'm_machine/upload',
								  }],
						formatter: Table.api.formatter.operate}
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
		upload: function () {
            Controller.api.bindevent();
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});

2、第二步，在想要加入操作按钮页面对应的html文件中进行操作。

如果是后台管理网站的html文件，则在/application/admin/view对应的模块中找到想要修改的html文件。
（1）在index.html文件中加入按钮的操作，例如：

• 注意m_machine/upload中的m_machine为自己对应的模块，data-operate-upload中的upload为自己刚刚在js文件中buttons中定义的按钮的名字，m_machine/upload中的upload为自己放在与index.html同一目录下的upload.html文件

data-operate-upload="{:$auth->check('m_machine/upload')}"

（2）在/application/admin/view对应的模块（与（1）中的index.html同一目录）下新建upload.html文件

（3）我的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">
                        <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('m_machine/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('m_machine/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('m_machine/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
                        <a href="javascript:;" class="btn btn-danger btn-import {:$auth->check('m_machine/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>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('m_machine/edit')}" 
                           data-operate-del="{:$auth->check('m_machine/del')}" 
						   data-operate-upload="{:$auth->check('m_machine/upload')}" 
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

3、第三步，在想要加入操作按钮页面对应的php文件中进行操作。

如果是后台管理网站的php文件，则在/application/admin/controller对应的模块中找到对应的php控制器。
（1）在控制器中加入对应的方法，例如我的是MMachine.php控制器（与1、2中的模块对应），方法是upload(与1中按键的name属性对应)

（2）加入的方法的逻辑根据已经有的增删查改方法进行修改，最后必须有return $this->view->fetch();并且可以使用$this->view->assign(“version”,$row[‘version’]);将变量传到html文件中进行相应操作。
（3）我的php控制器代码如下：

<?php

namespace app\admin\controller;

use app\common\controller\Backend;
use think\Db;
use think\Config;

/**
 * 
 *
 * @icon fa fa-circle-o
 */
class MMachine extends Backend
{
    
    /**
     * MMachine模型对象
     * @var \app\admin\model\MMachine
     */
    protected $model = null;

    public function _initialize()
    {
        parent::_initialize();
        $this->model = new \app\admin\model\MMachine;

    }
   
    /**
     * 上传固件
     */
    public function upload($ids = null){
        $row = $this->model->get($ids);
        if ($this->request->isPost()) {
            $params = $this->request->post("row/a");
            if ($params['version']) {
                $params = $this->preExcludeFields($params);
                //将上传的文件移动到指定文件夹
                $fileSize=-1;//文件大小
                $headers=@get_headers($params['firmware'],true);
                $head = explode(' ', $headers[0]);
                if (!empty($head[1]) && intval($head[1]) < 400){
                    //文件存在
                    $fileSize=$headers['Content-Length'];

                    //移动文件
                   
                   copy(ROOT_PATH . '/public'.$params['firmware'],ROOT_PATH . '/public/update.bin');

                }
                else $this->error(__('Firmware does not exist'));
                $result = false;
                Db::startTrans();
                try {
                    
                    $result = $this->model->where('type',$ids)->update(['version'=>$params['version'],'size'=>$fileSize]);
                    Db::commit();
                } catch (ValidateException $e) {
                    Db::rollback();
                    $this->error($e->getMessage());
                } catch (PDOException $e) {
                    Db::rollback();
                    $this->error($e->getMessage());
                } catch (Exception $e) {
                    Db::rollback();
                    $this->error($e->getMessage());
                }
                if ($result !== false) {
                    $this->success();
                } else {
                    $this->error(__('No rows were updated'));
                }
            }
            $this->error(__('Parameter %s can not be empty', "最新版本"));
        }
        $this->view->assign("version",$row['version']);
        return $this->view->fetch();
    }
    

}

三、总结

• 完成时间：2020-07-06 23:50
• 这是使用fastadmin进行二次开发的时候经常遇到的问题，所以就记录一下，如果存在不足的地方，麻烦各位大佬指出，小弟虚心接受，我们共同进步！