layui彈出層如何傳值？下面本篇文章給大家介紹一下layui彈窗間的傳值(layui彈出層傳值)(窗口傳值)。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

主要有兩部分從主窗口傳值到彈出層

從彈出層傳值到主窗口

通過session互傳

通過調(diào)用父窗口的函數(shù)從而獲取到父窗口的值(相反也是可以的)

1、從主窗口傳值到彈出層

首先時js

changefileone函數(shù)時按鈕綁定事件，按鈕點擊后調(diào)用這個函數(shù)然后彈出彈出層，加載changefile.html界面

然后success提前加載changefile的form數(shù)據(jù)(從主窗口傳值到彈出層)//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: ['確定', '關(guān)閉'],

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名進行獲取數(shù)據(jù)

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標簽里的所有值，并根據(jù)name名和值形成鍵值對json對象

//console.log(layero);

layer.alert('來到這里了'+index);

let body = layer.getChildFrame("body", index);

let data = {};

body.find("#changefileform").serializeArray().forEach(function (item) { //獲取彈出層寫下的數(shù)據(jù)，input，下拉框啊，之類的表單元素(即changefileform下的所有數(shù)據(jù))

data[item.name] = item.value; //根據(jù)表單元素的name屬性來獲取數(shù)據(jù)

});

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

}

});

}

點擊按鈕后，提前加載

然后是html界面,script里面是用來下拉框加載數(shù)據(jù)庫數(shù)據(jù)的，可以刪掉

$(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("" + data.rows[j].Name + "");

}

form.render();

form.on('select', function (data) {

//alert(data.value);

//console.log(data.value);

selectvalue = data.value;

console.log(selectvalue);

});

})

})

})

文件名

文件路徑

父目錄

請選擇父目錄

2、然后再這個彈出層填寫數(shù)據(jù)，按了確定后就開始加載這個js啦，這個獲取數(shù)據(jù)是通過name屬性來獲取的，上面 那個的話是通過class名稱來獲取的

然后controller獲取從js傳來的數(shù)據(jù)的話，看我另外的博客

下拉框動態(tài)獲取數(shù)據(jù)庫數(shù)據(jù)

下拉框可以搜索

看我其他博客

3、通過session傳值

設置sessionsessionStorage.setItem('roleid', 'hello');

取sessionvar ss=sessionStorage.getItem('roleid');

刪除session中保存指定的值sessionStorage.removeItem('roleid');

刪除全部sessionStorage.clear();

4、通過調(diào)用父窗口的函數(shù)從而獲取到父窗口的值， 這個適合獲取少量值， 父窗口的js:

(1)(這個是獲取bootstraptable的選定值)menuTable是表格的id,這樣返回的值是jSON值來的function getrowselect() {

return $.map($('#menuTable').bootstrapTable('getSelections'), function (row) {

return row//返回數(shù)據(jù)行

});

}

(2)如果是普通的text文本框(父窗口的js)function getrowselect() {

return $.map($('#text').val(), function (row) {

return row//返回數(shù)據(jù)行

});}

(3)也可以直接在子窗口的jswindow.parent.getElementById("text").val();

如果是(1)(2)種的話子窗口js這樣調(diào)用(這個是接(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頁的窗口對象，執(zhí)行iframe頁的方法：iframeWin.method();

更多web前端知識，請查閱 HTML中文網(wǎng) ！！

總結(jié)

以上是生活随笔為你收集整理的layui 传递前端请求_layui弹出层如何传值？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。