修改一个表格中的内容,把表格中多条数据提交给后台

通常情况下,我们做的数据修改功能,都是在表格每一行数据的后边添加“编辑”按钮,把这一条数据传递到后台,类似于下图

 这样的修改方式,只是针对于一条数据。但是要提交整个表格就不适用了。

类似于这样

需求是点击“编辑”按钮,表格进入可编辑状态(这也是个头疼的问题),然后修改数据,保存提交。

首先,我在考虑怎么让表格进入可编辑状态,这个问题上,查了很多资料,如果前端用bootstrap,需要引插件,如果前端用的jquary,那就更麻烦了,还得自己写插件,后来想了想,偷个懒,直接在表格<td>中加一个<input>标签,再调调样式就可以了,而且传值也方便。

<td><input type="text" name="" value=""></input></td>

表格可以编辑了之后,就要考虑传值的问题了

<c:forEach var="list" items="${newList }" varStatus="status">
					<tr>
						<td style="display:none;"><input  type="hidden" name="bksList[${status.index}].id" value="${list.id}"></input>${list.id}</td>
					    <td>${list.companyName}</td>
						<td><input type="text" name="bksList[${status.index}].originalIinvesAllfee" value="<fmt:formatNumber value='${list.originalIinvesAllfee}' pattern='0.00'/>"></input></td>
						<td><fmt:formatNumber value="${list.originalInvesSum}" pattern="0.00"/></td>
						<td><input type="text" name="bksList[${status.index}].originalInvesSumNum" value="<fmt:formatNumber value='${list.originalInvesSumNum}' pattern='0.00'/>"></input></td>
						<td><fmt:formatNumber value="${list.originalFundReserch}" pattern="0.00"/></td>
						<td><input type="text" name="bksList[${status.index}].originalFundReserchNum" value="<fmt:formatNumber value='${list.originalFundReserchNum}' pattern='0.00'/>"></input></td>
						<td>${list.proportionSumNum}</td>
						<td>${list.proportionAudiNum}</td>
					</tr>
</c:forEach>

大致类似于springmvc的传值方式   对象的属性.属性

解释一下,代码中forEach中items="${newList },是后台action传来的参数集合,bkList是自定义实体类的属性,实体类与表单提交给后代的action如下代码

public class BksProject {

	List<FundStatisticTechInvestInfo> bksList;

	public List<FundStatisticTechInvestInfo> getBksList() {
		return bksList;
	}

	public void setBksList(List<FundStatisticTechInvestInfo> bksList) {
		this.bksList = bksList;
	}
	
	
}
@RequestMapping("/updProjectAudiOpinionList")
	public String updProjectAudiOpinionList(BksProject bksProject,String reportType,String reportYear,ModelMap model, HttpServletRequest request){
		List<FundStatisticTechInvestInfo> bksList = bksProject.getBksList();
		//数据修改
		budgetStatisticBiz.updateTechInvestBatch(reportType, bksList);
		return "redirect:/admin/budgetStatistic/projectAudiOpinionList"+"?reportYear="+reportYear+"&reportType="+reportType;
	}

 

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,这个需求与之前的类似,只不过是针对时间列进行操作。以下是一种实现方式,供您参考: 1. 在表格时间列前面加入一个自定义组件,在该组件加入一个图标,可以使用 ElementUI 的 `el-icon` 图标。 2. 在自定义组件,可以使用 `this.$parent.$emit` 方法触发一个自定义事件,例如 `show-derivative-data` 事件。事件参数传入当前行的时间值。 3. 在表格组件监听该事件,触发后调用后台接口获取衍生时间数据,并将其插入到表格点击图标的那一行下面。 4. 同时,将该行的数据标记为已展开状态,可以使用一个 `isExpanded` 的标记来记录。 5. 再次点击图标时,判断该行的 `isExpanded` 标记,如果为 true,则隐藏衍生数据并将标记设置为 false,否则恢复之前的数据并将标记设置为 true。 以下是一个示例代码,供您参考: ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="time" label="时间"> <template slot-scope="scope"> <div style="display: flex; align-items: center"> <custom-component @show-derivative-data="showDerivativeData(scope.row)"></custom-component> {{ scope.row.time }} </div> </template> </el-table-column> </el-table> </template> <script> import CustomComponent from './CustomComponent.vue' export default { components: { CustomComponent }, data() { return { tableData: [ { name: '张三', time: '2022-01-01', isExpanded: false }, { name: '李四', time: '2022-01-02', isExpanded: false }, { name: '王五', time: '2022-01-03', isExpanded: false } ] } }, methods: { showDerivativeData(row) { // 调用后台接口获取衍生时间数据并插入到表格 const derivativeData = [ { name: '张三的衍生时间1', time: '2022-01-01 01:00:00' }, { name: '张三的衍生时间2', time: '2022-01-01 02:00:00' } ] const index = this.tableData.indexOf(row) this.tableData.splice(index + 1, 0, ...derivativeData) row.isExpanded = true }, hideDerivativeData(row) { // 隐藏衍生时间数据并将标记设置为 false const index = this.tableData.indexOf(row) let i = index + 1 while (i < this.tableData.length && !this.tableData[i].hasOwnProperty('name')) { this.tableData.splice(i, 1) } row.isExpanded = false } } } </script> ``` 在上面的代码,我将时间列的值直接渲染到模板,并在前面加入了一个自定义组件。在组件,我使用 `this.$parent.$emit` 方法触发了一个 `show-derivative-data` 事件,并将当前行的时间值作为参数传入。在表格组件监听该事件,触发后,调用后台接口获取衍生时间数据,并将其插入到表格点击图标的那一行下面。在隐藏衍生时间数据时,我使用了一个 `while` 循环来删除该行之后所有没有 `name` 属性的数据,以此来实现隐藏衍生数据的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值