layui父页面向子页面或弹框参数的传递方式
Layui拥有各式各样的后端模板,对于一个需要快速开发的后端系统无疑是雪中送炭,最近听见有小伙伴在使用layui与angularJS作为前段框架的时候在页面传参数的时候遇到了问题,今天我们就来总结一下,主要分为两种。
首先是在父页面传参数
第一种:将参数拼接到请求地址中:
以一个弹出框为例,如果要在弹出框中获取用户信息,则需要将用户id传递到弹出的页面中,在js中的代码如下:
self.editUser = function (id) {
if (id == "" || id == undefined) {
Global.showWarn("请选择需要编辑的用户!");
return;
}
Global.openWindow({
title: '编辑用户信息',
url: basePath + "/page/permission/create?id=" + id + "&operate=update",
width: 750,
height: 400,
ok: function (data) {
self.search();
}
})
};
注意:该方法同样适用于页面做页面跳转。假如是做页面跳转,则js代码如下:
window.location = basePath + "/page/permission/createOrUpdateUser?id=" + id + "&operate=update",
第二种:将参数利用data属性单独封装:
还是上面的例子,要在子页面中获取用户信息,同样需要将用户id传到子页面中,js中代码如下:
self.editUser = function (id) {
if (id == "" || id == undefined) {
Global.showWarn("请选择需要编辑的用户!");
return;
}
Global.openWindow({
title: '编辑用户信息',
url: basePath + "/page/permission/create
data:{
id:id,
username:'zhangsan'
}
width: 750,
height: 400,
ok: function (data) {
self.search();
}
})
};
// 编辑
function x_admin_edit_show(title,url,w,h,permissionId,menuLevel){
window.data= {"permissionId":permissionId,"menuLevel":menuLevel};
if (title == null || title == '') {
title=false;
};
if (url == null || url == '') {
url="404.html";
};
if (w == null || w == '') {
w=($(window).width()*0.9);
};
if (h == null || h == '') {
h=($(window).height() - 50);
};
layer.open({
type: 2,
area: [w+'px', h +'px'], // 宽与高
fix: false, //不固定
maxmin: false, // 不开启最大最小工具栏按钮
shadeClose: true,
shade:0.4,
title: title,
content: url
});
}
参数说明:title:指弹出框的标题;url:请求地址;利用?id=就是将选中的用户id拼接到请求地址中,我这里的operate是用来区别是添加还是编辑,因为我的添加和编辑用的是同一个表单,如果你不需要区分可以不用拼接operate,如果拼接多个参数就用&+参数的key=参数的value即可;width:弹出框的宽(值的大小根据情况而定);height:弹出框的高(值的大小根据情况而定);ok:function(){}:指关闭弹窗后的回调函数,这里面可以自定义你的方法,我这里是重新加载列表。
在子页面接收参数
在子页面接收参数也分为两种
第一种:在页面中使用隐藏的input框接收(此方法对父页面的两种传参方式均适用),代码如下:(通过Controller中转一下)
<input type="hidden" value="${operate}" id="operate"/>
第二种:在js中直接获取(此方法仅适用于在父级页面使用data单独封装参数),代码如下:
var self = this;
self.userId = parent.layer.data.id;
self.operate = parent.layer.data.operate;
或者
var paramData = window.parent.data; //在子页面 -- 获取父页面传递过来的封装一个js对象;
console.info("paramDat:"+JSON.stringify(paramData));