Layui 팝업 레이어에서 값을 전달하는 방법-레이이 튜토리얼-php.cn

layui 팝업 레이어에서 값을 전달하는 구현 방법: 1. 기본 창에서 팝업 레이어로 값을 전달합니다. 2. 팝업 레이어에서 기본 창으로 값을 전달합니다. 4. 상위 창 값을 상위 창에 호출하여 가져옵니다.

Layui 팝업 레이어에서 값을 전달하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템,layui 버전 1.0 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천: "javascript 기본 튜토리얼" "layUI 튜토리얼"

주로 두 부분으로 구성됨

메인 창에서 팝업 레이어로 값 전달
팝업레이어에서 메인창으로 값 전달
세션을 통해 서로 전송
부모창의 함수를 호출하여 부모창의 값을 가져옴(반대도 마찬가지) 가능)

1. 메인 창의 값을 팝업 레이어로 전달합니다

먼저 js

changefileone 함수는 버튼 클릭 후 이 함수가 호출됩니다. 그러면 팝업 레이어가 나타나서changefile.html 인터페이스를 로드합니다

그럼 성공하면 체인지파일의 폼 데이터를 미리 로드합니다(메인 창에서 팝업 레이어로 값 전달)

//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();
        }
    });
    
}

로그인 후 복사

버튼을 클릭한 후 미리 로드합니다

Layui 팝업 레이어에서 값을 전달하는 방법

스크립트는 드롭다운 상자에 데이터베이스 데이터를 로드하는 데 사용됩니다.

<!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 그런 다음 이 팝업 레이어에 데이터를 입력하고 확인을 누릅니다. 이 js를 로드합니다. 위의 데이터는 클래스 이름을 통해 얻습니다. 그런 다음 컨트롤러가 js에서 데이터를 얻으면 상자가 데이터베이스 데이터를 동적으로 얻습니다. 드롭다운 상자에서 검색 가능

내 다른 블로그 보기 Layui 팝업 레이어에서 값을 전달하는 방법

3. 세션을 통해 값 전달

세션 설정

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

로그인 후 복사

Get session

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

로그인 후 복사

Delete 세션에 지정된 값 저장

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

로그인 후 복사

모두 삭제

sessionStorage.clear();

로그인 후 복사

4 . 상위 창의 함수를 호출하여 상위 창의 값을 가져옵니다. 이는 적은 양의 값을 가져오는 데 적합합니다. 상위 창의 js:

(1) (선택한 bootstraptable 값을 가져오는 것입니다. ) menuTable은 테이블의 id이고, 이렇게 반환된 값은 JSON 값입니다

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

로그인 후 복사

(2) 일반 텍스트 텍스트 상자(상위 창의 js)인 경우

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

로그인 후 복사

(3) 자식 창의 js에 직접

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

로그인 후 복사

만약 (1) (2) 자식 창 js가 이렇게 호출된다면 (이것은 (1) (2)와 연결되어 있으니 오해하지 마세요):

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

로그인 후 복사

5. 자식 창이 부모 창에 값을 전달하는 경우

부모 창 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;
            }

로그인 후 복사

자식 창:

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

로그인 후 복사

6. top.layer.open 또는 parent.layer.open을 사용하세요

이때

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

로그인 후 복사

를 전달하세요

위 내용은 Layui 팝업 레이어에서 값을 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!