场景：主表 : 附表 = 1 : m，同一个页面，共同使用一个保存按钮进行两个表的数据保存，页面中间有个查询按钮，可以对子iframe页面的内容进行刷新
流程项目页面内嵌了个子iframe，项目页面表单数据提交保存是一个主表（loan_item_apply），内嵌iframe中的列表数据需要存储于附表中（loan_item_apply_funding）
方案：点击保存时，获取子iframe，将子iframe中需要保存的数据以隐藏域的方式拼接到父窗口的form下方，由于子iframe中的数据是列表数据，所以需要在loan_item_apply表对应的映射类里面添加loan_item_apply_funding表的映射类列表属性
LoanItemAppply类
private List<LoanItemApplyFunding> fundingList;
获取子iframe中form表单的属性和值并拼接隐藏域于父窗口的form下方
// 调用子iframe中的方法，校验资金方是否使用完成
var iframeWindow = document.getElementById("fundingIframe").contentWindow;
var isFinishUseMoney = iframeWindow.checkFundingMoney(); // 在父窗口中调用子iframe内的functionif (!isFinishUseMoney){return;}else{ // 在form表单中拼接项目-资金方存表的相关信息const form = document.getElementById("loanItemApplyForm"); // 父窗口表单formconst table = iframeWindow.document.getElementById("loanItemApplyFundingListDetail"); // 子iframe里的form里面的列表属性const rows = table.querySelectorAll("tr");for (let i = 1; i < rows.length; i++) { // 获取第二个tr及后续的trconst row = rows[i];// 检查复选框选中的rowconst checkbox = row.querySelector("input[type='checkbox']");if (null != checkbox){if (checkbox.checked) { // 遍历选中已勾选的tr// 获取所有input标签内容并新增input隐藏域拼接在form表单后面const inputs = row.querySelectorAll("input");inputs.forEach((input) => {const hiddenInput = document.createElement("input");hiddenInput.type = "hidden";hiddenInput.name = input.name;hiddenInput.value = input.value;form.appendChild(hiddenInput);});// 获取所有select标签内容并新增input隐藏域拼接在form表单后面const selects = row.querySelectorAll("select");selects.forEach((select) => {const hiddenInput = document.createElement("input");hiddenInput.type = "hidden";hiddenInput.name = select.name;hiddenInput.value = select.value;form.appendChild(hiddenInput);});}}}}
子iframe中form里面的列表属性展示
<!-- foreach循环遍历后端传过来的list -->
<tr><!-- input框 --><td><input type="checkbox" class="pk" name="fundingList[${item.index}].属性名"id="fundingList[${item.index}].属性名" value="${fundingList元素中对应的属性值}" /></td><!-- select下拉框 --><td><select id="fundingList[${item.index}].属性名" name="fundingList[${item.index}].属性名" value="${fundingList元素中对应的属性值}"><!-- 循环遍历下拉框选项optionList --><option value="${optionList元素中对应的属性值}">${optionList元素中对应的属性值}</option></select></td>
</tr>
 方法)
