Home >Web Front-end >Layui Tutorial >How to pass value in layui popup layer
How to pass value in layui popup layer
- 藏色散人Original
- 2020-12-17 09:20:387496browse
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('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();
}
});
}After clicking the button, load in advance
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('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. 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.
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('roleid', 'hello');
Get session
var ss=sessionStorage.getItem('roleid');
Delete the specified value saved in the session
sessionStorage.removeItem('roleid');
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($('#menuTable').bootstrapTable('getSelections'), function (row) {
return row//返回数据行
});
}(2) If it is an ordinary text text box (js of the parent window)
function getrowselect() {
return $.map($('#text').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('iframe')[0]['name']]; //得到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!