FastAdmin后台列表页添加额外的导入按钮

FastAdmin后台列表页默认只能添加一个导入按钮,点击时会弹出文件选择框,默认上传到控制器的import方法。

如果有多个上传文件/导入文件的需求,就需要改造一下。比如我要在用户列表页再加一个导入按钮。

首先是index.html,添加一个导入按钮

<a href="javascript:;" class="btn btn-danger btn-import2 {:$auth->check('user/user/import2')?'':'hide'}" title="导入" id="btn-import-file2" data-url="ajax/upload" data-mimetype="csv,xls,xlsx" data-multiple="false">
    <i class="fa fa-upload"></i> 导入2
</a>

对应的user.js文件,先配置导入对应的方法

// 初始化表格参数配置

Table.api.init({
    extend: {
        index_url: 'user/user/index',
        add_url: 'user/user/add',
        edit_url: 'user/user/edit',
        del_url: 'user/user/del',
        multi_url: 'user/user/multi',
        import_url: 'user/user/import',
        import2_url: 'user/user/import2',
        table: 'user',
    }
});

增加绑定

api: {
    bindevent: function () {
        Form.api.bindevent($("form[role=form]"));
    }
},
import2: function () {
    Controller.api.bindevent();
},

改写public/assets/js/require-table.js,首先增加一行import2_url的定义:

checkOnInit: true, //是否在初始化时判断
escape: true, //是否对内容进行转义
fixDropdownPosition: true, //是否修复下拉的定位
dragCheckboxMultiselect: true, //拖拽时复选框是否多选模式
selectedIds: [],
selectedData: [],
extend: {
    index_url: '',
    add_url: '',
    edit_url: '',
    del_url: '',
    import_url: '',
    import2_url: '',  //这一行是加的
    multi_url: '',
    dragsort_url: 'ajax/weigh',
}

再加一个import2btn的定义

config: {
    checkboxtd: 'tbody>tr>td.bs-checkbox',
    toolbar: '.toolbar',
    refreshbtn: '.btn-refresh',
    addbtn: '.btn-add',
    editbtn: '.btn-edit',
    delbtn: '.btn-del',
    importbtn: '.btn-import',
    import2btn: '.btn-import2',  //这一行是加的
    multibtn: '.btn-multi',
    disabledbtn: '.btn-disabled',
    editonebtn: '.btn-editone',
    restoreonebtn: '.btn-restoreone',
    destroyonebtn: '.btn-destroyone',
    restoreallbtn: '.btn-restoreall',
    destroyallbtn: '.btn-destroyall',
    dragsortfield: 'weigh',
},

最后是添加按扭的处理事件,仿照importbtn的写就可以了:

// 导入按钮事件
if ($(Table.config.import2btn, toolbar).length > 0) {
    require(['upload'], function (Upload) {
        Upload.api.upload($(Table.config.import2btn, toolbar), function (data, ret) {
            Fast.api.ajax({
                url: options.extend.import2_url,
                data: {file: data.url},
            }, function (data, ret) {
                table.trigger("uncheckbox");
                table.bootstrapTable('refresh');
            });
        });
    });
}

到这里就可以了。

Leave a Comment

豫ICP备19001387号-1