Layui 父子页面间传递参数

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