【JS】JS 实现父子页面通过URL传值

表格数据增删改的功能实现通常需要用到父子页面传值,当用户需要用到点击表格某一行查看详情或者编辑当前表格数据时,我们用以下方法便可轻松实现传值:
一:父页面Js

//此处用的bootstrapTable创建表格
 {
		   field:'NAME',
           title:'名称',
           align:"left",
           width : 300,
           halign:"middle",
           formatter: function (value, row, index) {
           //获取表格里的的所有字段数据封装成数据
               var params = "";
               $.each(row, function(e, i){
                   params += e + "=" + row[e] + "&";
               });
               return "<a href=\"javascript:viewInfo('" + params.substring(0, params.length - 1) + "');\">" + value + "</a>";
           }
  },
//查看详情 layer.js弹窗插件
function viewInfo(params) {
    layer.open({
        type: 2,
        title: '查看详情',
        skin: 'layui-layer-rim',
        area: ['60%', '80%'],
        shadeClose: true,
        maxmin: true, //开启最大化最小化按钮
        minBtn: 0,
        scrollbar: false,
        content: 'viewInfo.html?type=Edit&params=' + params        
    })
}

二、子页面Js

function initForm(){
	 var pstr = window.location.search;
     var params = pstr.substring(1, pstr.length).split("&");//截取Url里的字段参数
     var key = "", value = "";
	 $.each(params, function(i, p){
        key = p.split("=")[0];//获取字段名
        value = p.split("=")[1];//获取字段值
        if (value.indexOf("%") >= 0){
	        //将子页面的id值与所获取的字段保持一致
            $("#" + key).html(decodeURI(value));//转码中文字符
        } else {
            $("#" + key).html(value=="null"?"":value);
        }
    }
}

三:示例:
这里写图片描述
这里写图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值