layui中弹出层中的值向传递给父级

首页->学习资料->web前端->layui 关键词: 发布时间:2019-04-04 14:30:50 浏览次数:2279

如图：点击责任人，弹出一层，然后弹出层上选人，点击确定，将选中的人显示在对应输入框中

弹出层及点击确定后：

//选责任人和负责人

$(document).off("click",".check_users").on("click",".check_users",function(){

var that = $(this);

layer.open({

title:'请选择',

type: 2,

area: ['500px', '240px'],

content: ['/weekly/users','no'],

btn: ['确定','关闭'],

yes: function(index,layero){

var res = window["layui-layer-iframe" + index].callbackdata();

res = unserialize(decodeURIComponent(res ,true));

that.val(res);

layer.close(index); //再执行关闭

cancel: function(){

//右上角关闭回调

}

});

function unserialize(url){

if(url.indexOf("?") > -1) {

url = url.substring(1);

}

url=url.replace(/users=/g,'');

url=url.replace(/&/,',');

console.log(url);

return url;

}

弹出层页面模板

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/index.css">
    <script src="/static/javascript/Jquery.js"></script>
    <script src="/static/layui/layui.all.js"></script>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .layui-form-checkbox{
            margin-bottom:5px;
        }
    </style>
</head>
<body>
<form class="layui-form" action="">
    <div style="margin:20px auto;padding:0 20px;">
            <?php foreach($users as $name){?>
 <input type="checkbox" name="users" value="<?php echo $name;?>" title="<?php echo $name;?>">
            <?php }?>
 </div>
<!--    <div>-->
<!--        <div style="text-align:center;">-->
<!--            <button lay-submit lay-filter="formDemo">确定</button>-->
<!--        </div>-->
<!--    </div>-->
</form>

<script>
    //Demo
 layui.use('form', function(){
        var form = layui.form;
        form.render();



        //监听提交
 // form.on('submit(formDemo)', function(data){
        //     layer.msg(JSON.stringify(data.field));
        //     return false;
        // });
 });
        var callbackdata = function () {
            var data = $('.layui-form').serialize();
            return data;
        }

</script>
</body>
</html>

赞:(0)

踩:(0)