Comment transmettre une valeur dans la couche contextuelle layui-Tutoriel Layui-php.cn

La méthode d'implémentation pour transmettre la valeur dans la couche contextuelle layui : 1. Transmettez la valeur de la fenêtre principale à la couche contextuelle ; 2. Transmettez la valeur de la couche contextuelle à la fenêtre principale ; ; 3. Se transférer via la session ; 4. En appelant la fonction de fenêtre parent pour obtenir la valeur de la fenêtre parent.

Comment transmettre une valeur dans la couche contextuelle layui

L'environnement d'exploitation de ce tutoriel : Système Windows 7, layui version 1.0 Cette méthode convient à toutes les marques d'ordinateurs.

Recommandé : "Tutoriel de base de JavaScript" "Tutoriel layUI"

Il y a principalement deux parties

Transférer les valeurs de la fenêtre principale vers la couche contextuelle
Transférer les valeurs de la couche contextuelle vers la fenêtre principale
Interaction via session Passez
pour obtenir la valeur de la fenêtre parent en appelant la fonction de la fenêtre parent (l'inverse est également possible)

1. De La fenêtre principale transmet la valeur au calque contextuel

Tout d'abord, le bouton est lié au js

Fonction changefileone. Une fois le bouton cliqué, cette fonction est appelée et la couche contextuelle apparaît, chargeant l'interface changefile.html

Ensuite, le succès charge les données de formulaire du fichier de modification à l'avance ( en passant la valeur de la fenêtre principale au calque pop-up)

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

Copier après la connexion

Après avoir cliqué sur le bouton, chargez-le à l'avance

Comment transmettre une valeur dans la couche contextuelle layui

Ensuite, il y a le html Le script est utilisé pour charger les données de la base de données dans la liste déroulante. Vous pouvez supprimer

<!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>

Copier après la connexion

2. Remplissez ensuite les données dans la couche contextuelle et appuyez sur OK pour commencer à charger le fichier js. L'obtention des données s'obtient via l'attribut name. Celle ci-dessus est obtenue via le nom de la classe

Comment transmettre une valeur dans la couche contextuelle layui

Ensuite, si le contrôleur obtient les données transmises depuis js, voir mon autre article Blog

La liste déroulante obtient dynamiquement les données de la base de données

La liste déroulante peut être recherchée

Voir mes autres blogs

3. via la session

Définir la session

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

Copier après la connexion

Obtenir la session

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

Copier après la connexion

Supprimer la valeur spécifiée enregistrée dans la session

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

Copier après la connexion

Supprimer tout

sessionStorage.clear();

Copier après la connexion

4. En appelant la fonction de la fenêtre parent Ainsi, la valeur de la fenêtre parent est obtenue Ceci convient pour obtenir un petit nombre de valeurs :

(1) (this. est d'obtenir la valeur sélectionnée de bootstraptable) menuTable est l'identifiant de la table, donc la valeur renvoyée est jSON La valeur est

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

Copier après la connexion

(2) S'il s'agit d'une zone de texte ordinaire (js de la fenêtre parent )

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

Copier après la connexion

(3) Vous pouvez aussi l'ajouter directement au js de la fenêtre enfant

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

Copier après la connexion

Si c'est (1)(2), la sous-fenêtre js s'appelle ainsi (ceci est connecté à (1) (2), ne vous méprenez pas) :

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

Copier après la connexion

5 Si la sous-fenêtre transmet la valeur à la fenêtre Parent

Fenêtre Parent 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;
            }

Copier après la connexion

Fenêtre enfant :

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

Copier après la connexion

6. Si la fenêtre de la fenêtre à puces veut être plus grande que la fenêtre parent, vous devez utiliser top.layer open ou parent.layer.open<🎜. >

puis passe

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!