涉及主页面内嵌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>
相关推荐
gplitems1233 分钟前
Download:Blaxcut - Barbershop & Hair Salon WordPress Theme
前端
拜无忧3 分钟前
【DEMO】互动信息墙 - 无限流动版-点击放大
前端
冰糖雪梨dd4 分钟前
JS中new的过程发生了什么
开发语言·javascript·原型模式
AliPaPa29 分钟前
你可能忽略了useSyncExternalStore + useOptimistic + useTransition
前端·react.js
junnhwan33 分钟前
【苍穹外卖笔记】Day04--套餐管理模块
java·数据库·spring boot·后端·苍穹外卖·crud
parade岁月40 分钟前
nuxt和vite使用环境比变量对比
前端·vite·nuxt.js
小帆聊前端42 分钟前
Lodash 深度解读:前端数据处理的效率利器,从用法到原理全拆解
前端·javascript
程序员清风1 小时前
Dubbo RPCContext存储一些通用数据,这个用手动清除吗?
java·后端·面试
摇滚侠1 小时前
Spring Boot 3零基础教程,条件注解,笔记09
java·spring boot·笔记
南瓜小米粥、1 小时前
从可插拔拦截器出发:自定义、注入 Spring Boot、到生效路径的完整实践(Demo 版)
java·spring boot·后端