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

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

猜你喜欢

转载自blog.csdn.net/wbx_wlg/article/details/80570250