fastadmin自定义弹框并回调参数

引言

fastadmin自定义弹框并回调参数

步骤

一、弹框按钮

<a href="JavaScript:;" class="input-group-addon btn-search-device" title="选择设备">选择设备</a>

$(document).on('click','.btn-search-device',function () {
    let val = $("#c-device_type").val()
    let obj = {
        1:'check_device/select_table',
        2:'pro_check_device/select_table'
    }
    Fast.api.open(obj[val],'选择设备',{
        area: ['95%', '95%'],
    })
})

二、弹框页面

<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">
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           width="100%">
                    </table>
                </div>
            </div>

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

// 在对应界面js文件中的Controller对象新增方法
select_table: function () {
    var that = this
    // 初始化表格参数配置
    Table.api.init({
        extend: {
            index_url: 'check_device/index' + location.search,
            add_url: '',
            edit_url: '',
            del_url: '',
            multi_url: '',
            table: '',
        }
    });

    var table = $("#table");

    // 初始化表格
    table.bootstrapTable({
        url: $.fn.bootstrapTable.defaults.extend.index_url,
        pk: 'id',
        sortName: 'id',
        columns: [
            [
                {
                    field: 'operate',
                    title: __('Operate'),
                    table: table,
                    events: Table.api.events.operate,
                    formatter: function (value, row, index){
                        return '<button class="btn btn-xs btn-info select_table" data-id="'+row.id+'" data-name="'+row.name+'">选择</button>';
                    }
                },
                {field: 'id', title: __('Id')},
                {field: 'name', title: __('Name')}
            ]
        ],
        showExport: false,
    });
    $("#table").on('click','.select_table',function () {
        // 给父级传值
        $(window.parent.document).find("#c-device_name").val( $(this).data('name'));
        $(window.parent.document).find("#c-device_id").val( $(this).data('id'));
        // 关闭当前弹框
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    })
    // 为表格绑定事件
    Table.api.bindevent(table);
},

三、后端

// 控制器
public function select_table()
{
    return $this->view->fetch();
}