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> <label>Receive subpage parameters:</label> <input value="" id="getParams" name="getParams" type="text"> <input type="button" value="preservation"> </div> <div style="margin-top: 20px"> <div> <table id="table" data-height="600"> </table> </div> </div>
(2) Sub page (test_edit.html )
<div id="layer"> <div 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"> <div style="margin: 10px 0"> <label>adopt sessionStorage Method to get the parent page parameters:</label> <input value="" id="params2" name="params" type="text"> </div> <label>adopt layer Method to pass values to the parent page</label> <div> <button value="" 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;