js子页面的多条数据传递给父页面的表格

点击员工编号input后的button按钮，弹出员工信息的子页面，可多条选择员工，单击确定，返回父页面表格自动生成。

思路：首先点击button弹出子页面，要获取是哪一行的按钮的标识，子页面要得到这一标识，将所选的数据封装在一数组中，之后重点在于如何将子页面的数据遍历在父页面的表格上，有两种考虑：如果子页面选择n条数据，而父页面的表格行数（指当选行到最后一行的行数）大于等于n，则直接遍历数据，将表格的员工编号、员工姓名、部门编号、部门名称填上对应的值；反之是当选行到最后一行的行数小于n,则遍历数据，先填上已有空行的值，后js动态添加表格空行再填值。

效果：

 

父页面的js:

//跳转到员工信息页面
function selectZG(a){
    //获取点击按钮的当前行的标识
    var x = a.parentNode.parentNode.parentNode.parentNode.rowIndex;
    console.log("x"+x);
    //x设值给一input,目的是子页面能获取到父页面表格的当前行的标识
    $('#index').val(x);
    console.log("x"+$('#index').val(x));
    layer.open({
        type : 2,
        title : '员工信息',
        maxmin : true,
        shadeClose : false, // 点击遮罩关闭层
        area : [ '800px', '520px' ],
        content : '/system/zgpf/selectZG', // iframe的url
    });
}

 

子页面的js:

//将数据传送给父页面
function outZG() {
    var rows = $('#exampleTable').bootstrapTable('getSelections'); // 返回所有选择的行，当没有选择的记录时，返回一个空数组
    if (rows.length == 0) {
        layer.msg("请选择要导入的数据");
        return;
    }
    layer.confirm("确认要导入选中的'" + rows.length + "'条数据吗?", {
        btn : [ '确定', '取消' ]
        // 按钮
    }, function() {
        //x为点击的当前行
        var x = parent.$('#index').val() -1;
        console.log("index:::"+x);
        //获取当前父页面表格总数据行数
        var tr = parent.$('#para_table').find('tr').length - 1;
        //trx为从点击行开始计数总行数
        var trx = tr - x;
        console.log(tr);

        //表格最后一行数
        var last = tr - 1;
        console.log("last："+last);

        //先判断后循环
        // 判断：若当前行数大于等于导入数据条数，则直接遍历传值
        if(trx >= rows.length){
            // 遍历所有选择的行数据
            $.each(rows, function(i, row) {
                var ix = i + x ;
                var ixx = ix + 1;
                console.log("ixx:" + ixx);
                parent.$('#para_table').find('tr').eq(ixx).find('td').eq(0).find('div').find('input').val(row['userNo']);
                parent.$('#para_table').find('tr').eq(ixx).find('td').eq(1).find('input').val(row['name']);
                parent.$('#para_table').find('tr').eq(ixx).find('td').eq(2).find('input').val(row['deptNo']);
                parent.$('#para_table').find('tr').eq(ixx).find('td').eq(3).find('input').val(row['deptName']);
            });
        }
        //反之：当前行数小于要导入数据条数
        else{
            //先循环后判断
            // 遍历所有选择的行数据
            $.each(rows,function (i,row) {
                var ix = i + x ;
                var ixx = ix + 1;
                //判断1.填上已有的行的数据；2.补上空行再填上数据
                if(ix <= last){
                    parent.$('#para_table').find('tr').eq(ixx).find('td').eq(0).find('div').find('input').val(row['userNo']);
                    parent.$('#para_table').find('tr').eq(ixx).find('td').eq(1).find('input').val(row['name']);
                    parent.$('#para_table').find('tr').eq(ixx).find('td').eq(2).find('input').val(row['deptNo']);
                    parent.$('#para_table').find('tr').eq(ixx).find('td').eq(3).find('input').val(row['deptName']);
                }
                else {
                    var i = parseInt(parent.$('table tr:last').children("td").eq(0).find("input").val()) + 1;
                    console.log("lasttr:"+i);
                    var table = parent.$("#para_table");
                    var tr= $("<tr>\n" +
                        "\t<td>\n" +
                        "\t\t<input id='"+i+"' value='"+i+"' hidden=\"hidden\">\n" +
                        "\t\t<div class=\"input-group\">\n" +
                        "\t\t\t<input id=\"listZgpf"+i+".zgbh\" name=\"listZgpf["+i+"].zgbh\" class=\"form-control\" type=\"text\" readonly=\"readonly\">\n" +
                        "\t\t\t<span class=\"input-group-btn\">\n" +
                        "\t\t\t\t\t<button class=\"btn btn-default\" type=\"button\" onclick=\"selectZG(this)\">\n" +
                        "\t\t\t\t\t\t..\n" +
                        "\t\t\t\t\t</button>\n" +
                        "\t\t\t\t</span>\n" +
                        "\t\t</div>\n" +
                        "\t</td>\n" +
                        "\t<td>\n" +
                        "\t\t<input id=\"listZgpf"+i+".zgxm\" name=\"listZgpf["+i+"].zgxm\" class=\"form-control\" type=\"text\" readonly=\"readonly\">\n" +
                        "\t</td>\n" +
                        "\t<td>\n" +
                        "\t\t<input id=\"listZgpf"+i+".bmbh\" name=\"listZgpf["+i+"].bmbh\" class=\"form-control\" type=\"text\" readonly=\"readonly\">\n" +
                        "\t</td>\n" +
                        "\t<td>\n" +
                        "\t\t<input id=\"listZgpf"+i+".bmmc\" name=\"listZgpf["+i+"].bmmc\" class=\"form-control\" type=\"text\" readonly=\"readonly\">\n" +
                        "\t</td>\n" +
                        "\t<td>\n" +
                        "\t\t<input id=\"listZgpf"+i+".fs\" name=\"listZgpf["+i+"].fs\" class=\"form-control\" type=\"text\">\n" +
                        "\t</td>\n" +
                        "\t<td>\n" +
                        "\t\t<input id=\"listZgpf"+i+".bz\" name=\"listZgpf["+i+"].bz\" class=\"form-control\" type=\"text\">\n" +
                        "\t</td>\n" +
                        "\t<td style=\"text-align:center; \" onclick=\"deletetr(this)\"><button type=\"button\" class=\"btn btn-warning btn-sm\">删除</button></td>\n" +
                        "</tr>");
                    table.append(tr);

                    parent.$('#para_table').find('tr').eq(ixx).find('td').eq(0).find('div').find('input').val(row['userNo']);
                    parent.$('#para_table').find('tr').eq(ixx).find('td').eq(1).find('input').val(row['name']);
                    parent.$('#para_table').find('tr').eq(ixx).find('td').eq(2).find('input').val(row['deptNo']);
                    parent.$('#para_table').find('tr').eq(ixx).find('td').eq(3).find('input').val(row['deptName']);

                }
            });
        }

        var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
        parent.layer.close(index);
    }, function() {

    });
}