系统之多选表格弹框--（2）

想要在form表单填写的一项中添加多选弹框，实现多选事件和向父页面传递值。

这里在前端使用layer弹框插件，非常好用！

首先，引入layer的js文件，然后在<script></script>标签中，写弹框的方法：

//弹出一个iframe层
  $('#getMultiStaff').on('click', function(){
    layer.open({
            type: 2,
            title: '选择员工',  //弹框的标题
            shadeClose: true,  //点击关闭遮罩层
            shade: 0.8,
            area: ['640px', '480px'],
            content: '/admin/processmanage/chooseStaffs?dept=' +${dept_id}, //URL
            cancel:function () {
                //右上角关闭回调
            }
        });
  });

以上是父页面的调用弹框页方法，然后，我们在test/iframe.html文件中编写弹框内的内容格式，和正常的html一样即可。

在弹框页面，我需要一个多选表单，当选择后，将所选择的项目对应返回父页面。多选表格的介绍，在前面的（1）系列已经介绍过了，如下是封装在form表单里的table表格内容：

<form id="delForm" method="post">
<table class="table table-hover">
            <thead>
                <tr>
                    <td><#--全选按钮-->
                        <input type="checkbox" onclick="selectCheckBoxs(this.checked)">
                    </td>
                    <td>员工ID</td>
                    <td>员工编号</td>
                    <td>姓名</td>
                    <td>部门</td>
                    <td>职务</td>
                </tr>
            </thead>
            <tbody>
                <#list staffs as staff>
                    <tr>
                        <td><#--复选框-->
                            <input type="checkbox" name="ids" value="${staff.id}">
                        </td>
                        <td>${staff.id}</td>
                        <td>${staff.staff_no}</td>
                        <td>${staff.name}</td>
                        <td>${(staff.department)!""}</td>
                        <td>${(staff.duties)!""}</td>
                    </tr>
                </#list>
            </tbody>
        </table>
<div class="form-actions">
            <button class="btn btn-default" id="transmit" type="submit">确定</button>
            <button class="btn btn-default" id="closeIframe">返回</button>
        </div>
    </form>

对应复选框的全选方法和选中方法：

/*全选事件*/
    function selectCheckBoxs(checkStaus) {
        $("input[name=ids][type=checkbox]").prop("checked", checkStaus).trigger('change');
    }
    /*选中事件*/
    $("input[name=ids][type=checkbox]").change(function () {
        if (this.checked) {
            $(this).parents("tr").addClass("danger")
        }
        else {
            $(this).parents("tr").removeClass("danger")
        }
    })

上述方法前面都介绍过，这里不做详细说明，主要介绍一下，选中几项后，如何将iframe弹框中的值传递给父页面的相应表项。这里应该在子页面来写这个方法（网上也有不少教程写的是在父页面的方法调用子页面的数据，但是我都一一尝试过，都不成功，也算是踩了不少坑...）

正确的方法是，从子页面通过parent调用父页面的相应元素，将子页面获取的数据传递到父页面。

 var index = parent.layer.getFrameIndex(window.name);//获取子页面窗口索引
    var ids = "";  //初始化
    /*给父页面传递值*/
    $('#transmit').on('click', function(){
        var checkClass = $("input[name=ids]:checked"); //子页面中所有被选中的项。
//将每个选中项的value值放到字符串中，并用逗号拼接。
        checkClass.each(function () {   
            ids+=$(this).val();
            ids+=",";
        });
//去掉最后一个逗号，因为结尾不用逗号
        ids = ids.substr(0, ids.lastIndexOf(","));
//将子页面的值封装好到一个字符串后塞到父页面去。
        parent.$('#staffIDs').val(ids);
//这句话是在父页面相应框中会显示500ms的提示信息
        parent.layer.tips('选择的员工ID', '#staffIDs', {time: 500});
//关闭弹框层，回到父页面。
        parent.layer.close(index);
    });

这样就基本实现了所需功能。

BUT！！！有一个问题，我还是没有解决 : 这里我选择一个或多个员工后传递的是员工的ID，因为在父页面的表项（input）框中，我们最终要传给后台的值是员工的ID，但是我们希望在页面中显示的是员工的姓名，就是说input框显示的内容希望是员工姓名而不是员工ID，这个操作我还有点不知道该怎么操作。暂时先放在这里，留待以后解决，如果有走过路过的朋友看见，也希望能帮我答疑解惑一下。