Three methods of transferring values between parent and child forms in JS

1, In the process of development projects, it is often necessary to transfer values between parent page and child page to obtain parameter data. The following provides three methods to summarize better. This example needs to download bootstrap-table.js , layer.js File, the specific download address is as follows:
https://github.com/wenzhixin/bootstrap-table;
http://layer.layui.com/;
1. html page
(1) Parent page( test.html )

  <div class="row">
      <label>Receive subpage parameters:</label>
      <input value="" id="getParams" name="getParams" type="text" class="form-input">
      <input type="button" class="btn btn-success save" value="preservation">
   </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) Sub page (test_edit.html )

<div class="layer" id="layer">
    <div class="layer-body"  style="margin-left: 15px">
        <label>adopt URl Get the parameter of parent page by passing value:</label>
        <input value="" id="params1" name="params" type="text" class="form-input">
        <div style="margin: 10px 0">
            <label>adopt sessionStorage Method to get the parent page parameters:</label>
            <input value="" id="params2" name="params" type="text" class="form-input">
        </div>
        <label>adopt layer Method to pass values to the parent page</label>
        <div class="btn-inner">
            <button value="" class="btn btn-success" id="transmit">Click the button to pass values to the parent form</button>
        </div>
    </div>
</div>

2. JS code
(1) Parent page( test.js )

$(function () {
    // Initialization table
    buildData();
    //Click Save button to transfer value to sub page
    $(".save").click(function () {
        check();
    });
});

//The bootstrap table method is used to load the data
function buildData() {
    $('#table').bootstrapTable('destroy').bootstrapTable({
        url:'/test.json',
        pagination: true,//paging
        minimumCountColumns: 4,//Set minimum number of columns
        paginationLoop: false,
        striped: true,//Whether to show color separation between lines
        paginationPreText: "previous page",
        paginationNextText: "next page",
        undefinedText: " ",
        height: $(window.innerHeight)[0] - 240,
        pageNumber: pNumber,      //Init load first page, default first page
        pageSize: pSize,
        pageList: [10, 15, 20],
        idField: "id",
        columns: [
            [
                {
                    field : 'checked',//Add check box
                    checkbox : true
                },
                {
                    field: 'Number',//No more
                    title: 'Serial number',//The title may not be added
                    valign: "middle",
                    align: "center",
                    width: 35,
                    formatter: function (value, row, index) {//Auto sort
                        return index + 1;
                    }
                },
                {
                    field: 'item1',
                    title: 'Head 1',
                    align: "center",
                    valign: "middle",
                    halign: "center",
                    width: 120
                },
                {
                    field: 'item2',
                    title: 'Head 2',
                    align: "center",
                    valign: "middle",
                    halign: "center",
                    width: 120
                },
                {
                    field: 'item3',
                    title: 'Head 3',
                    align: "center",
                    valign: "middle",
                    halign: "center",
                    width: 120
                },
                {
                    field: ' ',
                    title: 'operation',
                    align: "center",
                    valign: "middle",
                    width: 80,
                    formatter: function (value, rowData, index) {
                        return "<a  href='#' onclick=editClick('" + rowData.id + "') style='color:blue' > edit </a>";
                    }
                }
            ]
        ]
    });
}

//Method 1: pass values to the subpage through URL (this method is applicable to the value transfer of multiple parameters in a piece of data)
function editClick(UserID) {
    layer.open({
        type: 2,
        title: 'edit',
        skin: 'layui-layer-rim',
        area: ['60%', '60%'],    //Width and height -- >
        shadeClose: true,
        scrollbar: false,
        maxmin: true,
        content: 'test_edit.html?UserID=' + UserID
    });
}

// Method 2: transfer values to the subpage through the sessionStorage method (this method can transmit parameter values of multiple data at the same time)
function check() {
    //Gets all the data selected by the check box
    var CheckSelections= $("#table").bootstrapTable('getAllSelections');
    console.log(CheckSelections);
    if(CheckSelections.length<=0){
        layer.alert('Please select a line!');
        return false;
    }else {
        var itemIDs = "";
        //Traverse all the selected data and separate the parameters
        $.each(CheckSelections, function (index, item) {
            if (item != "") {
                itemIDs += item.id + ",";
            }
        });
        itemIDs = itemIDs == "" ? "0" : itemIDs.trimEnd(",");//Gets the selected ID, removing the comma at the end
        //Using session storage to store data
        sessionStorage.setItem('itemIDs', itemIDs);
        layer.open({
            type: 2,
            title: 'edit',
            skin: 'layui-layer-rim',
            area: ['60%', '60%'],    //Width and height -- >
            shadeClose: true,
            scrollbar: false,
            maxmin: true,
            content: 'test_edit.html'
        });
    }
}

(2) Sub page (test_edit.js )

 //Method 1 (by intercepting the URL? The following parameters are used to obtain data)
    var paramsValue1=getUrlParam("UserID");
    $("#params1").val(paramsValue1);
//Method 2 (get data through parameters stored in the browser sessionStorage)
    var paramsValue2=sessionStorage.getItem('itemIDs');
    $("#params2").val(paramsValue2);

//The above two methods can be flexible, and the parent-child page can transfer values to each other and read parameter data

//Pass value to parent page
    $('#transmit').on('click', function(){
        parent.$('#parentIframe').val('Here's the value of the subform');
        parent.layer.closeAll();
    });
 //Intercepting url parameters
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //Constructing a regular expression object with target parameters
        var r = window.location.search.substr(1).match(reg);  //Match target parameters
        if (r != null) return unescape(r[2]);
        return null; //Return parameter value
    }

3. Test the json data used

[
  {
    "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. Specific effect picture

5. Summary
The method used here:
The. Bootstrap table ("getAllSelections") of the bootstrap table;
js regular segmentation intercepts the url parameter getUrlParam(name);
H5 session storage stores temporary data;

Tags: Session JSON github

Posted on Wed, 01 Jul 2020 11:54:51 -0400 by Roger Ramjet