• layui 弹出层layer中from初始化 ,并在btn中返回from.data


    1.弹出对话框

    layer.open() 来初始化弹层

     // 监听添加操作
            $(".data-add-btn").on("click", function () {
                var that = this;
                //多窗口模式,层叠置顶
                layer.open({
                    type: 2 //此处以iframe举例
                    , title: '添加机构信息'
                    , area: ['690px', '460px']
                    , shade: 0.5
                    , maxmin: true
                    , offset: "auto"
                    , content: './from_add.html'
                    , btn: ['确定'] //只是为了演示
                    , yes: function (index, layero) {
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
                        //console.log(body.html()) //得到iframe页的body内容
                        //var data1 = iframeWin.getfrom();
                        console.log(iframeWin.layui.form.val('example'));   //这里只有layui 2.5.5的时候可以取到值
                        layer.closeAll();
                    }
                    , zIndex: layer.zIndex //重点1
                    , success: function (layero,index) {
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']];
                        //body.find("#username")[0].value='Hi,我是从父页来的';
                        var dd={
                            "password": "123456"
                            , "interest": 1
                            , "like[write]": true //复选框选中状态
                            , "close": true //开关状态
                            , "sex": "女"
                            , "desc": "我爱 layui"
                        };
                        iframeWin.loadfrom(dd);
                    }
                });
            });

    2.在context的html中定义环视 loadform 并传值

     注:这里测试发现,如果 给from直接传形参如:form.val('example', data); 会初始化失败,form 中没有数据但是不报错,但是序列化,反序列化后成功(估计是这个对象直接初始化有问题,layui这里有bug)

        var loadfrom =function loaddata(data){
            var dd2=  JSON.stringify(data);
            var ddd = JSON.parse(dd2);
            layui.form.val('example', ddd);
    
            // layui.use(['form'], function () 
            // {
            //     var form =layui.form;
            //     var ddd = JSON.parse(dd2);
            //     form.val('example', ddd);
            // });
        };

    注:弹出的窗口时官方示例:注意是:layui-form

    <form class="layui-form" action="" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-block">
                <input type="text" name="username" id="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-block">
                <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
    
        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="interest" lay-filter="aihao">
                    <option value=""></option>
                    <option value="0">写作</option>
                    <option value="1">阅读</option>
                    <option value="2">游戏</option>
                    <option value="3">音乐</option>
                    <option value="4">旅行</option>
                </select>
            </div>
        </div>
    
        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like[write]" title="写作">
                <input type="checkbox" name="like[read]" title="阅读">
                <input type="checkbox" name="like[daze]" title="发呆">
            </div>
        </div>
    
        <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-block">
                <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
            </div>
        </div>
    
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男" checked="">
                <input type="radio" name="sex" value="女" title="女">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
            </div>
        </div>
    
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            </div>
        </div>
    </form>
  • 相关阅读:
    [Python] Python基础字符串
    [android] 手机卫士绑定sim卡
    [Laravel] Laravel的基本数据库操作部分
    [android] 手机卫士手势滑动切换屏幕
    [android] 手机卫士界面切换动画
    [android] 手机卫士设置向导页面
    [javaEE] Servlet的手动配置
    [android] 手机卫士保存密码时进行md5加密
    [android] 手机卫士自定义对话框布局
    [Laravel] Laravel的基本使用
  • 原文地址:https://www.cnblogs.com/leolzi/p/12108586.html
Copyright © 2020-2023  润新知