Home > Article > Web Front-end > How to pass value in layui popup layer

How to pass value in layui popup layer

藏色散人Original: 2020-12-17 09:20:387465browse

The implementation method of passing value in layui pop-up layer: 1. Pass the value from the main window to the pop-up layer; 2. Pass the value from the pop-up layer to the main window; 3. Transfer each other through session; 4. By calling the parent window function to obtain the value of the parent window.

The operating environment of this tutorial: Windows 7 system, layui version 1.0. This method is suitable for all brands of computers.

Recommended: "javascript basic tutorial""layUI tutorial"

There are mainly two parts

Pass the value from the main window to the pop-up layer
Pass the value from the pop-up layer to the main window
Interaction through session Pass
Get the value of the parent window by calling the function of the parent window (the opposite is also possible)

1. From The main window passes the value to the pop-up layer

The first is the js

changefileone function when the button is bound to the event. After the button is clicked, this function is called and the pop-up layer pops up, loading the changefile.html interface

Then success loads the form data of changefile in advance (pass the value from the main window to the pop-up layer)

//bootstraptable的修改,点击按钮的时候自动选中该行，因此可以获取到整行的值
function changefileone() {
    var rowselect = $("#menuTable").bootstrapTable(&#39;getSelections&#39;);   //取得当前选定的selectItem对象,其中包括整行值
    console.log(rowselect);
    layer.open({
        title: "修改文件属性",
        type: 2,
        content: "changefile.html",
        area: [&#39;50%&#39;, &#39;70%&#39;],
        skin: "layui-layer-molv",
        btn: [&#39;确定&#39;, &#39;关闭&#39;],
        success: function (layero, index) {    //成功获得加载changefile.html时，预先加载，将值从父窗口传到 子窗口
            //// console.log(obj.data.editAble);
            let body = layer.getChildFrame(&#39;body&#39;, index);
            //console.log(rowselect[0].filename);
            body.find(".filename").val(rowselect[0].filename);   //通过class名进行获取数据
            body.find(".filepath").val(rowselect[0].path);//意思是将rowselect[0].path这个值传递到子窗口的class="filepath"这个的文本框中，（预先加载）
            //body.find(".menuid").val(rowselect[0].previousid);
            layui.form.render();
        },
        yes: function (index, layero) {         //按了弹出层的确定按钮时，这是将在父窗口中获取子窗口form标签里的所有值，并根据name名和值形成键值对json对象
            //console.log(layero);
            ////layer.alert(&#39;来到这里了&#39;+index);
            let body = layer.getChildFrame("body", index);
            let data = {};
            body.find("#changefileform").serializeArray().forEach(function (item) {    //获取弹出层写下的数据，input，下拉框啊，之类的表单元素（即changefileform下的所有数据）
                data[item.name] = item.value;   //根据表单元素的name属性来获取数据
            });
            data["fileid"] = rowselect[0].fileid;
            //if (data["previousid"] == "" || data["previousid"] == null)
            //    data["previousid"] = rowselect[0].previousid;
            console.log(data);
            $.post(&#39;/api/dofile&#39;, data, function (result) {
                if (result == "success") {
                    layer.alert("修改文件属性成功");
                }
                setTimeout(function () {
                    layer.close(index);
                    parent.location.reload();
                }, 600);
            });
            layer.close(index);
            resetSearch();
        }
    });
    
}

After clicking the button, load in advance

How to pass value in layui popup layer

Then there is the html interface. The script is used to load database data in the drop-down box. You can delete

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="/Scripts/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="/Scripts/layer/layer.js" type="text/javascript"></script>
    <script src="/Scripts/layui/layui.all.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/Scripts/layui/css/layui.css" />
    <script type="text/javascript">
        $(document).ready(function () {
            var selectvalue = ""; //定义这个用来存放选择的value
            layui.use(&#39;form&#39;, function () {
                var form = layui.form;
                $.get("/api/choosemenu", function (data) {
                    for (var j in data.rows) {
                        //alert(data.rows[j].Name);
                        $("#menuname").append("<option value=&#39;" + data.rows[j].menuid + "&#39;>" + data.rows[j].Name + "</option>");
                    }
                    form.render();
                    form.on(&#39;select&#39;, function (data) {
                        //alert(data.value);
                        //console.log(data.value);
                        selectvalue = data.value;
                        console.log(selectvalue);
                    });
                })
            })
        })
    </script>
</head>
<body>
    <form class="layui-form" id="changefileform">
        <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label layui-bg-red layui-center">文件名</label>
            <div class="layui-input-block">
                <input type="text" name="filename" placeholder="请输入" autocomplete="off" class="layui-input filename">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-bg-red layui-center">文件路径</label>
            <div class="layui-input-block">
                <input type="text" name="filepath" placeholder="请输入" autocomplete="off" class="layui-input filepath">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-bg-green layui-center">父目录</label>
            <div class="layui-input-block">
                <select name="previousid" id="menuname" lay-search>
                    <option value="" style="width:50px" class="menuid">请选择父目录</option>
                </select>
            </div>
        </div>
    </form>
</body>
</html>

2. Then fill in the data in the pop-up layer and press OK to start loading the js. This Obtaining data is obtained through the name attribute. The above one is obtained through the class name.

How to pass value in layui popup layer

Then if the controller obtains the data transmitted from js, see my other article Blog

The drop-down box dynamically obtains database data

The drop-down box can be searched

See my other blogs

3. Pass values through session

Set session

sessionStorage.setItem(&#39;roleid&#39;, &#39;hello&#39;);

Get session

var ss=sessionStorage.getItem(&#39;roleid&#39;);

Delete the specified value saved in the session

sessionStorage.removeItem(&#39;roleid&#39;);

Delete all

sessionStorage.clear();

4. By calling the function of the parent window Thus, the value of the parent window is obtained. This is suitable for obtaining a small number of values. The js of the parent window:

(1) (this is to obtain the selected value of bootstraptable) menuTable is the id of the table, so the returned value is jSON The value is

function getrowselect() {
    return $.map($(&#39;#menuTable&#39;).bootstrapTable(&#39;getSelections&#39;), function (row) {
        return row//返回数据行
    });
}

(2) If it is an ordinary text text box (js of the parent window)

function getrowselect() {
    return $.map($(&#39;#text&#39;).val(), function (row) {
        return row//返回数据行
    });}

(3) It can also be directly in the js of the child window

window.parent.getElementById("text").val();

If it is (1)(2), the sub-window js is called like this (this is connected to (1) (2), don’t get it wrong):

 var rowselect = window.parent.getrowselect();
 console.log(rowselect);//这里可以打印一下获取到值没有

5. If the sub-window passes the value to Parent window

Parent window js:

function getrowselect(userdata) {
    console.log(userdata);
    document.getElementById(userdata.inputid).value = userdata.uname;
    var dffff = "id" + userdata.inputid;
    document.getElementById(dffff).value=userdata.uid;
    return;
            }

Child window:

//data="";
//data={"ss"="hello","gg"="world"}
window.parent.getrowselect(data);

6. If the bullet window window wants to be larger than the parent window, you need to use top.layer. open or parent.layer.open

then pass

var iframeWin = window[layero.find(&#39;iframe&#39;)[0][&#39;name&#39;]]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();

The above is the detailed content of How to pass value in layui popup layer. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How layui verifies form tagsNext article：How layui verifies form tags

See more

How to pass value in layui popup layer

Related articles