Maison > Article > interface Web > Comment transmettre une valeur dans la couche contextuelle layui
Comment transmettre une valeur dans la couche contextuelle layui
- 藏色散人original
- 2020-12-17 09:20:387405parcourir
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.
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.htmlEnsuite, 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('getSelections'); //取得当前选定的selectItem对象,其中包括整行值
console.log(rowselect);
layer.open({
title: "修改文件属性",
type: 2,
content: "changefile.html",
area: ['50%', '70%'],
skin: "layui-layer-molv",
btn: ['确定', '关闭'],
success: function (layero, index) { //成功获得加载changefile.html时，预先加载，将值从父窗口传到 子窗口
//// console.log(obj.data.editAble);
let body = layer.getChildFrame('body', 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('来到这里了'+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('/api/dofile', data, function (result) {
if (result == "success") {
layer.alert("修改文件属性成功");
}
setTimeout(function () {
layer.close(index);
parent.location.reload();
}, 600);
});
layer.close(index);
resetSearch();
}
});
}Après avoir cliqué sur le bouton, chargez-le à l'avance
<!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('form', 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='" + data.rows[j].menuid + "'>" + data.rows[j].Name + "</option>");
}
form.render();
form.on('select', 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. 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
sessionStorage.setItem('roleid', 'hello');Obtenir la session
var ss=sessionStorage.getItem('roleid');Supprimer la valeur spécifiée enregistrée dans la session
sessionStorage.removeItem('roleid');Supprimer tout
sessionStorage.clear();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($('#menuTable').bootstrapTable('getSelections'), function (row) {
return row//返回数据行
});
}(2) S'il s'agit d'une zone de texte ordinaire (js de la fenêtre parent )function getrowselect() {
return $.map($('#text').val(), function (row) {
return row//返回数据行
});}(3) Vous pouvez aussi l'ajouter directement au js de la fenêtre enfantwindow.parent.getElementById("text").val();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);//这里可以打印一下获取到值没有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;
}Fenêtre enfant : //data="";
//data={"ss"="hello","gg"="world"}
window.parent.getrowselect(data); 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.openpuis passe
var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment layui vérifie les balises de formulaireArticle suivant：Comment layui vérifie les balises de formulaire