Layui 팝업 레이어에서 값을 전달하는 방법
- 藏色散人원래의
- 2020-12-17 09:20:387405검색
layui 팝업 레이어에서 값을 전달하는 구현 방법: 1. 기본 창에서 팝업 레이어로 값을 전달합니다. 2. 팝업 레이어에서 기본 창으로 값을 전달합니다. 4. 상위 창 값을 상위 창에 호출하여 가져옵니다.
이 튜토리얼의 운영 환경: Windows 7 시스템,layui 버전 1.0 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.
추천: "javascript 기본 튜토리얼" "layUI 튜토리얼"
주로 두 부분으로 구성됨
메인 창에서 팝업 레이어로 값 전달
-
팝업레이어에서 메인창으로 값 전달
세션을 통해 서로 전송
부모창의 함수를 호출하여 부모창의 값을 가져옴(반대도 마찬가지) 가능)
1. 메인 창의 값을 팝업 레이어로 전달합니다
먼저 js
changefileone 함수는 버튼 클릭 후 이 함수가 호출됩니다. 그러면 팝업 레이어가 나타나서changefile.html 인터페이스를 로드합니다
그럼 성공하면 체인지파일의 폼 데이터를 미리 로드합니다(메인 창에서 팝업 레이어로 값 전달)
//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();
}
});
}버튼을 클릭한 후 미리 로드합니다
스크립트는 드롭다운 상자에 데이터베이스 데이터를 로드하는 데 사용됩니다.
<!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 그런 다음 이 팝업 레이어에 데이터를 입력하고 확인을 누릅니다. 이 js를 로드합니다. 위의 데이터는 클래스 이름을 통해 얻습니다. 그런 다음 컨트롤러가 js에서 데이터를 얻으면 상자가 데이터베이스 데이터를 동적으로 얻습니다. 드롭다운 상자에서 검색 가능
내 다른 블로그 보기
sessionStorage.setItem('roleid', 'hello');Get session
var ss=sessionStorage.getItem('roleid');Delete 세션에 지정된 값 저장
sessionStorage.removeItem('roleid');모두 삭제
sessionStorage.clear();4 . 상위 창의 함수를 호출하여 상위 창의 값을 가져옵니다. 이는 적은 양의 값을 가져오는 데 적합합니다. 상위 창의 js:(1) (선택한 bootstraptable 값을 가져오는 것입니다. ) menuTable은 테이블의 id이고, 이렇게 반환된 값은 JSON 값입니다
function getrowselect() {
return $.map($('#menuTable').bootstrapTable('getSelections'), function (row) {
return row//返回数据行
});
}(2) 일반 텍스트 텍스트 상자(상위 창의 js)인 경우function getrowselect() {
return $.map($('#text').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('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();를 전달하세요
위 내용은 Layui 팝업 레이어에서 값을 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Layui가 양식 태그를 확인하는 방법다음 기사：Layui가 양식 태그를 확인하는 방법