想要在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，这个操作我还有点不知道该怎么操作。暂时先放在这里，留待以后解决，如果有走过路过的朋友看见，也希望能帮我答疑解惑一下。
