【JS】JS 實現父子窗體相互傳值的三個方法

一、在開發項目過程中經常會需要用到父頁面和子頁面互相傳值來獲取參數數據，下面提供了三種總結的比較好用的方法，本例子需要下載bootstrap-table.js、layer.js文件,具體下載地址如下：
https://github.com/wenzhixin/bootstrap-table;
http://layer.layui.com/;
1、html頁面
（1）父頁面（test.html）

  <div class="row">
      <label>接收子頁面參數:</label>
      <input value="" id="getParams" name="getParams" type="text" class="form-input">
      <input type="button" class="btn btn-success save" value="保存">
   </div>
    <div class="col-xs-12 " style="margin-top: 20px">
	    <div class="tableArea ">
             <table class="table table-striped" id="table" data-height="600">
             </table>
	   </div>
    </div>

（2）子頁面（test_edit.html）

<div class="layer" id="layer">
    <div class="layer-body"  style="margin-left: 15px">
        <label>通過URl傳值獲取父頁面參數:</label>
        <input value="" id="params1" name="params" type="text" class="form-input">
        <div style="margin: 10px 0">
            <label>通過sessionStorage方法獲取父頁面參數:</label>
            <input value="" id="params2" name="params" type="text" class="form-input">
        </div>
        <label>通過layer方法向父頁面傳值</label>
        <div class="btn-inner">
            <button value="" class="btn btn-success" id="transmit">點擊按鈕向父窗體傳值</button>
        </div>
    </div>
</div>

2、JS代碼
（1）父頁面（test.js）

$(function () {
    // 初始化表格
    buildData();
    //點擊保存按鈕向子頁面傳值
    $(".save").click(function () {
        check();
    });
});

//通過bootstrap table方法加載表格數據
function buildData() {
    $('#table').bootstrapTable('destroy').bootstrapTable({
        url:'/test.json',
        pagination: true,//分頁
        minimumCountColumns: 4,//設置最小列數
        paginationLoop: false,
        striped: true,//是否顯示行間隔色
        paginationPreText: "上一頁",
        paginationNextText: "下一頁",
        undefinedText: " ",
        height: $(window.innerHeight)[0] - 240,
        pageNumber: pNumber,      //初始化加載第一頁，默認第一頁
        pageSize: pSize,
        pageList: [10, 15, 20],
        idField: "id",
        columns: [
            [
                {
                    field : 'checked',//添加複選框
                    checkbox : true
                },
                {
                    field: 'Number',//可不加
                    title: '序號',//標題  可不加
                    valign: "middle",
                    align: "center",
                    width: 35,
                    formatter: function (value, row, index) {//自動排序
                        return index + 1;
                    }
                },
                {
                    field: 'item1',
                    title: '表頭一',
                    align: "center",
                    valign: "middle",
                    halign: "center",
                    width: 120
                },
                {
                    field: 'item2',
                    title: '表頭二',
                    align: "center",
                    valign: "middle",
                    halign: "center",
                    width: 120
                },
                {
                    field: 'item3',
                    title: '表頭三',
                    align: "center",
                    valign: "middle",
                    halign: "center",
                    width: 120
                },
                {
                    field: ' ',
                    title: '操作',
                    align: "center",
                    valign: "middle",
                    width: 80,
                    formatter: function (value, rowData, index) {
                        return "<a  href='#' onclick=editClick('" + rowData.id + "') style='color:blue' > 編輯 </a>";
                    }
                }
            ]
        ]
    });
}

//方法一，通過URL向子頁面傳值（此方法適應於一條數據裏多個參數的傳值）
function editClick(UserID) {
    layer.open({
        type: 2,
        title: '編輯',
        skin: 'layui-layer-rim',
        area: ['60%', '60%'],    //寬高-->
        shadeClose: true,
        scrollbar: false,
        maxmin: true,
        content: 'test_edit.html?UserID=' + UserID
    });
}

// 方法二：通過sessionStorage方法向子頁面傳值（此方法可同時傳多條數據的參數值）
function check() {
    //獲取複選框選中的所有數據
    var CheckSelections= $("#table").bootstrapTable('getAllSelections');
    console.log(CheckSelections);
    if(CheckSelections.length<=0){
        layer.alert('請選中一行！');
        return false;
    }else {
        var itemIDs = "";
        //遍歷所有選中的數據然後分隔參數
        $.each(CheckSelections, function (index, item) {
            if (item != "") {
                itemIDs += item.id + ",";
            }
        });
        itemIDs = itemIDs == "" ? "0" : itemIDs.trimEnd(",");//獲取所選的ID，去除末尾的逗號
        //用sessionStorage存儲數據
        sessionStorage.setItem('itemIDs', itemIDs);
        layer.open({
            type: 2,
            title: '編輯',
            skin: 'layui-layer-rim',
            area: ['60%', '60%'],    //寬高-->
            shadeClose: true,
            scrollbar: false,
            maxmin: true,
            content: 'test_edit.html'
        });
    }
}

（2）子頁面（test_edit.js）

 //方法一（通過截取URL？後面參數來獲取數據）
    var paramsValue1=getUrlParam("UserID");
    $("#params1").val(paramsValue1);
//方法二（通過存儲在瀏覽器sessionStorage裏的參數來獲取數據）
    var paramsValue2=sessionStorage.getItem('itemIDs');
    $("#params2").val(paramsValue2);

以上兩個方法可以靈活變通，父子頁面互相傳值和讀取參數數據

//給父頁面傳值
    $('#transmit').on('click', function(){
        parent.$('#parentIframe').val('子窗體的值傳過來啦');
        parent.layer.closeAll();
    });
 //截取url參數
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構造一個含有目標參數的正則表達式對象
        var r = window.location.search.substr(1).match(reg);  //匹配目標參數
        if (r != null) return unescape(r[2]);
        return null; //返回參數值
    }

3、測試所用的json數據

[
  {
    "id":"code1",
    "item1":"data-1-1",
    "item2":"data-1-2",
    "item3":"data-1-3"
  },
  {
    "id":"code2",
    "item1":"data-2-1",
    "item2":"data-2-2",
    "item3":"data-2-3"
  },
  {
    "id":"code3",
    "item1":"data-3-1",
    "item2":"data-3-2",
    "item3":"data-3-3"
  },
  {
    "id":"code4",
    "item1":"data-4-1",
    "item2":"data-4-2",
    "item3":"data-4-3"
  },
  {
    "id":"code5",
    "item1":"data-5-1",
    "item2":"data-5-2",
    "item3":"data-5-3"
  },
  {
    "id":"code6",
    "item1":"data-6-1",
    "item2":"data-6-2",
    "item3":"data-6-3"
  }
]

4、具體效果圖

5、總結
這裏所用到的方法：
bootstrap table的.bootstrapTable(‘getAllSelections’)；
js正則分割截取url參數 getUrlParam(name)；
H5的sessionStorage存儲臨時數據；