一张图解析FastAdmin中的弹出窗口的功能

Karson 5月前 2964

一张图解析FastAdmin中的弹出窗口的功能
点击图片查看高清大图

功能描述

弹出窗口是FastAdmin中最常用的功能之一,FastAdmin中默认生成的CRUD中的编辑、添加和删除的弹窗都是基于Layer弹层组件实现的,FastAdmin在此基础上进行了扩展和二次开发,除了Layer原有的功能外,还有部分FastAdmin特有的功能。

首先我们先来看看最常用的编辑和添加弹窗。在列表中默认是添加和编辑按钮会自动绑定事件,如果需要手动弹窗,我们可以使用Fast.api.open(url, title, options)进行弹出。

这里一定得注意下Fast.api.openLayer.open有很大的区别,Layer.openLayer自带的原始方法,Fast.api.open是FastAdmin独有的方法。

接下来我们看下使用Fast.api.open弹出的弹出窗口的组成部分

1.标题区域
用于显示弹出层的标题,配置title即可

2.内容区域
用于展示url对应的页面的内容,此处嵌入的urliframe,也就是说弹出窗口的正文是通过iframe显示的,那么正文部分相当于完全新开一个页面。

3.操作区域
这个区域比较特殊,FastAdmin做了许多定制化,显示的内容从url对应的页面中的layer-footer区域内的内容复制到外部显示的。也就是说这部分的内容我们完全可以自定义,只需要修改url页面对应layer-footer区域内的内容即可。这里需要注意下这部分的内容会随着页面中layer-footer区域内的内容变化而变化,事件也会随之响应。

事件绑定

内容区域内因为是一个单独的iframe,通常情况下页面都是一个表单,默认是不会绑定事件的,我们需要Form.api.bindevent进行绑定事件,绑定事件后我们点确定按钮才会采用Ajax的方式进行提交表单,否则会采用原始的方式提交表。

常用示例

打开一个弹窗并接收回传数据

Fast.api.open("www.fastadmin.net", "FastAdmin", {
    callback:function(value){
        在这里可以接收弹出层中使用`Fast.api.close(data)`进行回传的数据
    }
});

表单提交成功后不关闭弹窗

Form.api.bindevent("form[role=form]", function(data, ret){
    //这里只要返回false,就会阻止我们的弹窗自动关闭和自动提示
    return false;
});
最新回复 (13)
  • lengyanchen 5月前
    感谢TA
    0 引用 2

    表单submit后在哪里调用Fast.api.close(data)呢?

  • lengyanchen 5月前
    感谢TA
    0 引用 3

    如果想在submit后获得表单处理的结果,比如add后生成的id,然后返回给调用弹窗的那个页面。该如何写呢?

    最后于 5月前 被lengyanchen编辑
  • Karson 楼主 打赏 5月前
    感谢TA
    0 引用 4
    lengyanchen 如果想在submit后获得表单处理的结果,比如add后生成的id,然后返回给调用弹窗的那个页面。该如何写呢?
    Form.api.bindevent("form[role=form]", function(data, ret){
        //这里只要返回false,就会阻止我们的弹窗自动关闭和自动提示
        return false;
    });

    这个成功回调中的data就是从服务器返回的,你可以在服务器返回新增的数据,然后使用即可。

  • lengyanchen 4月前
    感谢TA
    0 引用 5

    感谢楼主,搞了一上午终于搞明白整个流程了!fastadmin真的很强大~

    分享一下我的案例:

    目的是点击按钮弹窗一个操作窗口,在窗口中提交表单成功后给调用弹窗的页面返回需要的数据,并调用指定的回调函数处理这些数据。

    1. 页面A,html代码中添加一个按钮:
    <a data-url="/info/add" href="javascript:;"  class="spec_add_btn" style="padding:0;" data-title="添加" >添加</a>
    1. 页面A,在js代码中添加以下代码监听class=spec_add_btn这个按钮的点击事件并弹窗打开页面B
    $(document).on('click','.spec_add_btn', function (event) {
        var url = $(this).attr('data-url');
        if(!url) return false;
        var msg = $(this).attr('data-title');
        var width = $(this).attr('data-width');
        var height = $(this).attr('data-height');
        var area = [$(window).width() > 800 ? (width?width:'800px') : '95%', $(window).height() > 600 ? (height?height:'600px') : '95%'];
        var options = {
            shadeClose: false,
            shade: [0.3, '#393D49'],
            area: area,
            callback:function(value){
                CallBackFun(value.id, value.name);//在回调函数里可以调用你的业务代码实现前端的各种逻辑和效果
            }
        };
        Fast.api.open(url,msg,options);
    });

    3、页面B,在js代码中对应的add方法里添加以下代码,监听submit并给页面A返回数据

    Form.api.bindevent($("form[role=form]"), function(data, ret){
        //这里是表单提交处理成功后的回调函数,接收来自php的返回数据
        Fast.api.close(data);//这里是重点
        Toastr.success("成功");//这个可有可无
    }, function(data, ret){
        Toastr.success("失败");
    });

    4、页面B,在php代码对应的add方法里添加成功后执行以下代码

    $result = $this->model->allowField(true)->save($params);
    if ($result !== false)
    {
        $data['id'] = $id;
        $data['name'] = $name;
        $this->success('success',null,$data);//这里$data就是返回给第三步js的那个data。这里要根据业务需要返回指定的数据,否则前端接收不到数据。
    }
    
    最后于 4月前 被lengyanchen编辑
  • Karson 楼主 打赏 4月前
    感谢TA
    0 引用 6
    lengyanchen 感谢楼主,搞了一上午终于搞明白整个流程了!fastadmin真的很强大~ 分享一下我的案例: 目的是点击按钮弹窗一个操作窗口,在窗口中提交表单成功后给调用弹窗的页面返回需要的数据,并调用指 ...

    @lengyanchen 使用完全正确!!!

  • Faker 4月前
    感谢TA
    0 引用 7

    @lengyanchen @Karson Fastadmin的弹框是在主内容区弹出的。Fastadmin后台用的是layout布局,但是我布局弹框都是在正中间。

  • HCH 4月前
    感谢TA
    0 引用 8

    请问如何把js里的变量传到弹窗那打印出来?

  • ivyang 3月前
    感谢TA
    0 引用 9
    lengyanchen 感谢楼主,搞了一上午终于搞明白整个流程了!fastadmin真的很强大~ 分享一下我的案例: 目的是点击按钮弹窗一个操作窗口,在窗口中提交表单成功后给调用弹窗的页面返回需要的数据,并调用指 ...

    在iframe引入的文件中,怎么监听啊,我连jquery的$都用不了。

  • xiazhicong 2月前
    感谢TA
    0 引用 10

    急急急!!!请问crud生成的添加和编辑弹窗如何调整弹窗高度和宽度!!!在线等

  • Moran丶佳哥 2月前
    感谢TA
    0 引用 12

    @Karson 我想问一下母页面可以在这个open方法里向子页面传值吗?可以的话在控制器/方法里面怎么接收?title能居中吗

  • jackwu 2月前
    感谢TA
    0 引用 13

    @Karson 如何监听弹出窗口的关闭操作

  • Jay_Jay 2天前
    感谢TA
    0 引用 14

    留个记号

  • 未登录
    15
返回