涉及主页面内嵌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>
相关推荐
斯~内克5 分钟前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
阴阳怪气乌托邦6 分钟前
别再啃OA代码了!低代码"搭积木"式搞数智化,我直接少写500行
前端·低代码
beelan10 分钟前
v-on的思考
前端
龙谷情Sinoam12 分钟前
扩展若依@Excel注解,使其对字段的控制是否导出更加便捷
java
山河木马13 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户92724725021913 分钟前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端
努力只为躺平17 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
Web小助手19 分钟前
大保剑:Promise的有趣体验
javascript
李大玄19 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵20 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom