一张图解析FastAdmin中的弹出窗口的功能(备份)

功能描述

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

首先我们先来看看最常用的编辑和添加弹窗。在CRUD后的列表中默认的添加和编辑按钮会自动绑定事件,如果需要手动弹窗,我们可以使用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,通常情况下页面都是一个表单,默认是不会绑定事件的,我们需要在控制器对应的JS中Form.api.bindevent进行绑定事件,绑定事件后我们点确定按钮才会采用Ajax的方式进行提交表单,否则会采用原始的方式提交表单。

常用示例

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

javascript 复制代码
Fast.api.open("/example/select", "FastAdmin", {
    callback:function(value){
        在这里可以接收弹出层中使用`Fast.api.close(data)`进行回传的数据
    }
});

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

javascript 复制代码
Form.api.bindevent("form[role=form]", function(data, ret){
    //这里只要返回false,就会阻止我们的弹窗自动关闭和自动提示
    return false;
});

参考

https://ask.fastadmin.net/article/2527.html

相关推荐
万岳软件开发小城2 小时前
基于PHP+Uniapp的互联网医院源码:电子处方功能落地方案
开发语言·uni-app·php·软件开发·互联网医院系统源码·智慧医院app
星云ai2 小时前
矩阵运营的限流问题本质上是平台与创作者之间的流量博弈
服务器·网络·php
会讲英语的码农5 小时前
php基础
开发语言·后端·php
天若有情67312 小时前
用 C++ 模拟 Axios 的 then 方法处理异步网络请求
网络·c++·php
安顾里13 小时前
LInux平均负载
linux·服务器·php
ALe要立志成为web糕手14 小时前
create_function()漏洞利用
安全·web安全·网络安全·php·rce
我最厉害。,。20 小时前
-PHP 反序列化&POP 链构造&魔术方法流程&漏洞触发条件&属性修改
开发语言·php
fakaifa1 天前
【最新版】沃德代驾源码全开源+前端uniapp
前端·小程序·uni-app·开源·php·沃德代驾·代驾小程序
用户199701080181 天前
手把手教你搭建 cssbuy 式淘宝代购系统
大数据·php
流星白龙2 天前
【Linux】46.网络基础(3.3)
linux·网络·php