点击按钮打开子页面，实现父子页面相互传值，再次点击回显子页面保存的数据

最新推荐文章于 2022-12-13 11:59:53 发布

MatchlessHeroL

最新推荐文章于 2022-12-13 11:59:53 发布

阅读量1k

点赞数 1

分类专栏： ajax 文章标签：父子页面传值

本文链接：https://blog.csdn.net/MatchlessHreo/article/details/103892740

版权

ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果图（登录为保存的意思）

1.点击按钮打开子页面 js代码（打开页面如果隐藏域有值就回显在子页面上）

/**
 * 打开银行信息页面
 * */
InputInfoDlg.openAddBankInfo = function () {

    var bankArr = [];
    var bankjsonstr = $('#bankinfo').val();
    if(bankjsonstr == ""){
        bankArr = [];
    }else{
        bankArr =JSON.parse(bankjsonstr);
    }
    
    var index = layer.open({
        type: 2,
        title: '銀行情報を入力します',
        area: ['800px', '400px'], //宽高
        fix: false, //不固定
        maxmin: true,
        shadeClose: true,
        content: Feng.ctxPath + '/input/bank_info',
        success: function (layero, index) {
            // 获取子页面的iframe
            var iframe = window['layui-layer-iframe' + index];
            // 向子页面的全局函数child传参
            iframe.child(bankArr);
        }

    });
     this.layerIndex = index;
};

2.打开子页面对应Controller

@Controller
@RequestMapping("/input")
public class PublishProductKeyController extends BaseController {
    private String PREFIX = "/system/input/";
    @RequestMapping(value = "/bank_info",method = RequestMethod.GET)
    public String bankInfo() {
       return PREFIX + "bank_info.html";
    }
}

3.子页面保存数据向父页面传值（向父页面隐藏域设置值）

/**
 * 保存银行信息
 * */
var bankInfo = [];

InputInfoDlg.saveBankInfo =function(){
    if (!this.validate2()) {
        return;
    }
    bankInfo.push({
        "bankType" : $('input[name="inlineRadioOptions"]:checked ').val(),
        "accountAlias" :$("#accountAlias").val(),
        "accountName" :$("#accountName").val(),
        "bankName" :$("#bankName").val(),
        "bankNum" :$("#bankNum").val(),
        "branchName" :$("#branchName").val(),
        "branchNum" :$("#branchNum").val(),
        "depositType" :$('input[name="inlineRadioOptions2"]:checked ').val(),
        "account" :$("#account").val(),
        "tips" :$("#tips").val()
    });
    var str=JSON.stringify(bankInfo);
    //父页面隐藏域 设置值
    parent.$('#bankinfo').val(str);
    parent.$('#makeLicense')[0].disabled = false;
    parent.layer.close(window.parent.InputInfoDlg.layerIndex);

};

4.子页面获取值，回显数据

对应第一步里 success 回调函数里的 iframe.child(bankArr);

  success: function (layero, index) {
            // 获取子页面的iframe
            var iframe = window['layui-layer-iframe' + index];
            // 向子页面的全局函数child传参
            iframe.child(bankArr);
        }

回显代码写在子页面html 最下方，加载页面即调用

<script>
	function child(data) {
		$("input[name='inlineRadioOptions'][value="+data[0].bankType+"]").attr("checked",true);
		$("input[name='inlineRadioOptions2'][value="+data[0].depositType+"]").attr("checked",true);
		$("input[name='accountName']").val(data[0].accountName);
		$("input[name='accountAlias']").val(data[0].accountAlias);
		$("input[name='bankName']").val(data[0].bankName);
		$("input[name='bankNum']").val(data[0].bankNum);
		$("input[name='branchName']").val(data[0].branchName);
		$("input[name='branchNum']").val(data[0].branchNum);
		$("input[name='account']").val(data[0].account);
		$("input[name='tips']").val(data[0].tips);

		if (data[0].bankType == 1) {
			document.getElementById("bankName").setAttribute("disabled", true);
			document.getElementById("bankNum").setAttribute("disabled", true);
			document.getElementById("branchName").setAttribute("disabled", true);

		}

	}
</script>