tnblog
首页

layer弹窗引入独立页面进行操作

149人阅读 2019/4/29 11:31 评论:1 手机浏览 收藏
分类: 前端


使用layer弹窗进行操作的时候我们可以使用type=2,来把一个独立的页面指向content内容


例如我们有一个表格,点击添加后,我们可以单独创建一个视图来做添加

  $(".adda").click(function () {

            layer.open({
                title: "添加",
                type: 2,
                skin: "layui-layer-molv",
                area: ["550px", "320px"],
                /*指定添加的页面*/
                content: "/home/addview",
                yes: function () {
                },
                btn: ["确定"]
            });

        });

/home/addview就是一个独立的视图,里边就是放了一些输入框,以便用户输入


弹出效果如下:

其实就是生成了一个Iframe而已,所以里边的内容其实就是一个iframe



由于我们现在添加的页面独立出来了,所以我们点击确定的时候,就需要调用添加页面里边的方法

这里的思想应该是:添加的逻辑写到添加页面里边去

而不是点击确定后把添加的信息拿到引用他的页面然后在写添加逻辑

如果把添加逻辑写到引用他的页面去主要有两个不好的地方:

1:还要把一大堆添加的数据拿回来

2:通用性就差了,如果还有一个地方要使用,添加的逻辑就要重复编写了,本来使用独立的页面写就是为了降低耦合度


首先看看在添加视图里边的添加逻辑

    //添加的逻辑(在独立的页面里)
    var addway = function (success) {
        $.post('/home/AddUser', $("#opeform").formtojsonobj(), function (result) {
            success(result);
        });
    }

这个逻辑很简单就是把表单一句话序列化成json对象,然后回传使用ef添加就行了,非常的简单方便

只是要注意一下,我这里在addway里边传递了一个方法过来,是因为添加成后我要添加引入他的页面我添加成功了

然后引用他的页面知道后才可以做后续的操作,其实就是一个使用回调函数的逻辑,这里使用回调函数逻辑会清晰很多


然后我们只需要在引用他的页面调用一个addway方法就ok了

由于是跨iframe调用,所以我们需要通过Id拿到iframe对象后在调用方法

window.frames["id"].方法


所以在我们这里就这样就可以了

 window.frames["layui-layer-iframe1"].addway(function (result) {
    if (result > 0) {
         alert('添加成功');
         location.href = "/home/index";
     }
 });

layui-layer-iframe1就是弹出层iframe的那个di

完整的弹出代码如下:

$(".adda").click(function () {

            layer.open({
                title: "添加",
                type: 2,
                skin: "layui-layer-molv",
                area: ["550px", "320px"],
                content: "/home/addview",
                yes: function () {
                    window.frames["layui-layer-iframe1"].addway(function (result) {
                        if (result > 0) {
                            alert('添加成功');
                            location.href = "/home/index";
                        }
                    });
                },
                btn: ["确定"]
            });

        });

当然如果那个这样的弹出层有多个,iframe的id写死不好,那么使用当前layer的对象,或者id去拿吧


最后在说一点:

优点:代码耦合性低,功能独立写到一个页面,如果可能还可以重复利用

缺点:增加工作量,页面加载速度更慢,如果要做通用代码生成的话感觉也不是太好

所以还是业务逻辑复杂一点,功能多一点的操作单独提出来写吧,显得逼格都要高一点


吃饭啦,吃饭啦




评价
断剑重铸之日,骑士归来之时
博主搜索
文章
6
评论
8
分类
16
关注
16
文章类别
最新文章
最新评价
{{item.ArticleTitle}}
{{item.BlogName}} : {{item.Content}}