涉及主页面内嵌iframe中的列表数据的保存

场景：主表 : 附表 = 1 : m，同一个页面，共同使用一个保存按钮进行两个表的数据保存，页面中间有个查询按钮，可以对子iframe页面的内容进行刷新

流程项目页面内嵌了个子iframe，项目页面表单数据提交保存是一个主表（loan_item_apply），内嵌iframe中的列表数据需要存储于附表中（loan_item_apply_funding）

方案：点击保存时，获取子iframe，将子iframe中需要保存的数据以隐藏域的方式拼接到父窗口的form下方，由于子iframe中的数据是列表数据，所以需要在loan_item_apply表对应的映射类里面添加loan_item_apply_funding表的映射类列表属性

LoanItemAppply类

java 复制代码

private List<LoanItemApplyFunding> fundingList;

获取子iframe中form表单的属性和值并拼接隐藏域于父窗口的form下方

javascript 复制代码

// 调用子iframe中的方法，校验资金方是否使用完成
var iframeWindow = document.getElementById("fundingIframe").contentWindow;
var isFinishUseMoney = iframeWindow.checkFundingMoney(); // 在父窗口中调用子iframe内的function
 if (!isFinishUseMoney){
     return;
 }else{ // 在form表单中拼接项目-资金方存表的相关信息
     const form = document.getElementById("loanItemApplyForm"); // 父窗口表单form
     const table = iframeWindow.document.getElementById("loanItemApplyFundingListDetail"); // 子iframe里的form里面的列表属性
     const rows = table.querySelectorAll("tr");
     for (let i = 1; i < rows.length; i++) { // 获取第二个tr及后续的tr
         const row = rows[i];
         // 检查复选框选中的row
         const 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里面的列表属性展示

html 复制代码

<!-- 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>